Lab · 06 experiments

Small things, tuned until they feel right.

Every tile below is live React, not a video. Poke at them. Each one respects reduced-motion settings and works with touch, mouse and keyboard.

react 19 · motion 12
no canvas, no WebGL

Magnetic button

Pointer pull with a damped spring; a plain press on touch.

tap to feel the press

spring(260, 18) · pull 0.28

Drag the top card sideways to send it to the back.

01 / 04Tokenscolor · type · space

02 / 04Components31 primitives

03 / 04Motionspring(400, 32)

04 / 04Docswritten for humans

drag x · threshold 70px

Same switch, three springs. Feel the difference.

spring(180, 14)

layout · 3 presets

Height to auto without measuring, icon turns into a close.

Code. Figma is where I think; the pull request is what I deliver.

320ms · ease-out-expo

Each digit is its own reel; numbers never jump.

0123456789012345678901234567890123456789

per-digit spring(260, 26)

Icon swap with pop layout, resets itself after 1.6s.

$ npx relay@latest init

180ms · popLayout