← index

Interactions

Cursor showpieces — trails, magnetics, tilts, spotlights

18 blocks
( filter blocks )
01CursorImageTrailHover-list index that scatters trailing image ghosts along the cursor path, fading out in sequence.
03HoverRevealListProject rows that hide an image behind a circular clip-path mask which follows the cursor in place.
04TiltCardsPerspective tilt cards that rotate on rotateX/rotateY as the cursor moves, with a tracking spotlight glow.

( work, in 3d )

Vantage

Vantage

Product
Ferrous

Ferrous

Identity
Kindling

Kindling

Campaign
05SpotlightGridFeature grid with a cursor-tracking radial spotlight and a matching glow ring on each card border.

( built for scale )

Realtime sync

Every change streams to the whole team instantly, no refresh needed.

Version history

Rewind to any point — nothing is ever truly lost.

Granular access

Share exactly what people need, down to the field.

API-first

Everything in the product is scriptable from day one.

Audit trail

A full, exportable log of who changed what, and when.

Global edge

Sub-100ms reads from thirty regions worldwide.

06CharacterScatterDark statement headline whose individual characters flee the cursor within a small radius.

( move your cursor over the words )

t
y
p
e
 
t
h
a
t
 
r
u
n
s
 
a
w
a
y

a headline built from independent characters, each one nudged by proximity to the pointer.

08StickyCTAOrbOversized magnetic accent orb CTA that pulls harder and grows the closer the cursor gets.

( start a project )

let's talk
09ImageZoomTilesThumbnail grid where hovered tiles tint and zoom their media while a custom cursor pill labels the action.
10LiquidButtonRowCTA button row with magnetic pull, a center-out fill sweep, and a gooey border-radius morph on hover.

( ready when you are )

11IxStickerScatterStatement headline surrounded by five brand stickers/badges that spring-pop in on scroll and drift on gentle parallax.

( the corner spot )

✦ made fresh every morning since 2016

12IxHoverMenuPeekMenu rows where hovering floats the dish photo along the cursor on spring motion values; on touch, tapping expands the photo inline.

( the menu )

charred leek risotto
crispy pork bánh mì
miso-glazed eggplant
burnt basque cheesecake
yuzu spritz

hover a dish to peek ✦ tap on mobile

13IxPhoneRevealContact card with one oversized magnetic pill that flips on hover/press to reveal the phone number; touch devices see the number directly.

( contact )

we pick up daily · 09:00 — 22:00

14IxStampHoverFour service cards where hovering drops a brand stamp in with a bouncy overshoot and slight tilt; pre-stamped on touch.

( what we do )

01

kitchen renovations

full gut-to-gorgeous rebuilds, done to the day we promised.

02

bathrooms & tiling

waterproofed, warrantied, and laser-level straight.

03

decks & pergolas

outdoor rooms built for two decades of summers.

04

emergency repairs

burst pipe at midnight? we answer the phone.

15FlickCardDeckFanned deck of photo cards — flick or drag the top card to send it to the back and pull the next one forward; arrow buttons for keyboards and touch.

( flick through the deck )

Lofoten
Kyoto
Atacama
Dolomites
Essaouira
Faroes

Lofoten

Midnight-sun ride above the arctic circle

see the route
01 / 06
16PixelRevealCardFake browser window whose screenshot loads like a 90s JPEG — sharpening from chunky pixels in three steps on scroll; hovering replays the focus pull.

( work in progress )

Every build starts blurry. We put the rough cut on the internet early, then sharpen it release by release — same URL, more pixels.

dashboard_v0.3.png( hover to refocus )
Product screenshot resolving from pixelated to sharp
17RollupButtonRowRow of double-label roll-up buttons — masked stacked labels roll up one line on hover, with accent-flood, solid and leapfrog-arrow ghost variants.

( interaction 06 — the roll-up )

✦ the same device in three weights — flood, solid, ghost

18CursorStickerFieldMoving the cursor across the section peels off a trail of brand stickers that spring in and fade away; touch devices get a static hand-placed scatter.

( move your cursor around )

Every visit leaves a mark. Swap these placeholder stickers for your own cut-outs and the whole page starts feeling like a sticker sheet.