Fragments of production-grade motion work: GSAP timelines, Motion springs, and a lot of easing curves. Everything below is live. Touch it.
Infinite Ring Marquee
Motion · rAF · springsAn infinite marquee built as a ring: every card exists exactly once; a rAF loop, velocity easing and six independent pause owners keep it physical. Drag a card and its velocity hands off to the track; focus one and a spring centres it. Cards open a fully choreographed dialog.
Multiplayer Cursors
GSAP · procedural · tickerFake teammates roam the canvas: a procedural engine picks landmarks, jitters them, scales duration with distance, and rolls dice between clicking, thinking and drifting. The name pill trails its cursor with a frame-by-frame elastic lag.
Dashboard Choreography
GSAP · timelines · morphA master timeline pops four cards in off-beat, then hands off to state: bars grow with an overshoot bezier, a donut draws itself, a card hides into a mini icon and flies back, and a subscribe button morphs through three overlapping steps.
Pill → Card Morph
Motion · AnimatePresenceChips exchange vertically with their expanded cards: the collapsed pill drops from above, the card rises from below, on the same custom curve, so the swap reads as one object changing state, not two views cross-fading.
Measured Accordion
GSAP · height measureHeight is measured from the natural layout before every expand, so the timeline animates to real pixels, with tags staggering in behind the reveal, an asymmetric collapse that's faster than the open, and an icon crossfade with overlap.
Form State Choreography
Motion · pathLength · statesA submit button that breathes while pending (halo plus light sweep, width held constant by a ghost label), then a check that draws itself and a success cascade. Errors announce politely and hand focus back.
Light, Grain & Progressive Blur
GSAP · ScrollTrigger · masksA layered composite recipe: radial light bloom, film-grain noise blended on top, a progressive-blur mask dissolving the subject's edge, a scrub-driven parallax wordmark, and a damped mouse-follow that makes it feel alive.
How I think about motion
I'm a design engineer focused on interaction and motion. I build interface animation as a system: tokens for easing and duration, timelines that clean up after themselves, and details that hold up under a screen reader as well as a screen recording.
- One shared easing vocabulary, enforced by imports, not by prose.
- Physics over choreography: velocity hands off, springs settle, nothing teleports.
- Reduced motion is a first-class variant, not an afterthought switch.
- Accessibility survives the trick: real focus order, real semantics, no hidden clones.