Motion
Easing and spring curves played side by side, scroll choreography, and the shader wall.
Easing curves
The character of a move lives in its curve. Each dot loops automatically against a faint linear reference, so you can read where it speeds up and slows down. Click a card to copy the value. Our own tokens sit beside the classics.
Spring physics
Where curves end, springs begin. Each dot loops automatically so you can feel stiffness, damping and mass. Click the value to copy the preset.
Calm and refined glide. Our editorial default.
Crisp and responsive, no wobble. UI controls.
Lively overshoot. Playful micro-feedback.
Near instant and tight. Drag, snap, magnetic returns.
Micro-interactions
The small responses that make an interface feel alive. Restrained and tactile, never loud.
The shader wall
Our single-file WebGL pieces, the living backdrops of the family. They mount as they scroll into view to stay kind to the machine.
Tiles marked Radiant are adapted from Radiant by Paul Bakaus, used under the MIT License and recolored to emerald. Tiles marked Own are my own work.
Modern moves
The techniques behind motion that feels current in 2026, and when each one earns its weight.
Scroll-driven CSS
animation-timeline runs reveals off the main thread, no JS. The performance first choice, with an observer fallback.
GSAP ScrollTrigger
Now fully free. Best for pinned scenes and scrubbed timelines that CSS cannot express. Reserve for showpieces.
Mask and clip wipes
Reveal type and imagery through animated masks or clip-path. Cheap, GPU friendly, very editorial.
Scroll-driven WebGL
Scroll progress drives a shader backdrop. High impact, gated behind reduced motion and mobile to protect thermals.
Springs and momentum
Lenis for inertial scroll, springs on hover and press. The premium smooth baseline, kept conservative on mobile.
Cursor as context
The cursor morphs to signal drag, view or play. Desktop only, and never blocking native feedback.
View Transitions API
Shared element morphs between states and pages. Graceful no-op where unsupported. Ideal for gallery to detail.
Kinetic typography
Per glyph reveals and variable weight on scroll. Core editorial-tech identity, with a fade fallback for reduced motion.