Motion craft · The detail layer

The two percent
juries notice.

Award sites don't win on layout — they win on the micro-interactions that make a page feel like an instrument. Here's the toolkit, live and hand-written. Move your mouse. Hover everything. Zero libraries.

01 · Cursor

Blend-mode cursor

A single dot, mix-blend-mode: difference, inverting whatever it crosses. It grows over anything interactive.
move across this text →
02 · Buttons

Magnetic pull

The button leans toward your cursor and snaps back with elastic overshoot.
03 · Type

Scramble reveal

Characters cycle random glyphs, then lock in. Hover to decode.
UNMISSABLE
04 · Depth

Cursor tilt

A card that tilts in 3D toward the pointer — the "expensive hover".
TILT ME
05 · Type

Proximity weight

Letters swell and warm as your cursor passes — kinetic typography, no variable font needed.
LOCALENHANCE
06 · Motion

Velocity marquee

A belt that drifts on its own and lurches with your scroll speed.
CRAFT — DETAIL — MOTION — POLISH — CRAFT — DETAIL — MOTION — POLISH
Honest label: every effect here is hand-written vanilla JS — no GSAP, no libraries — because that's what ships inside a sandboxed page. On production builds we reach for GSAP (now free) + Lenis for the same grammar at scale. The rule that makes it read as craft, not chaos: one signature moment per view, everything else fast and quiet.

Why this is the moat

Anyone can assemble a layout. The gap between "nice site" and "how did they do that" lives entirely in this layer — the cursor, the ease curves, the way type responds to the hand. It's also the least copyable thing we make, because it's taste expressed in milliseconds, not pixels.

Make my site feel like this →