2026-07-10
In productionScroll-motion system: six signature moments, zero scroll-hijack
Problem
The site was visually premium but static — no motion language. The obvious fix (GSAP + ScrollTrigger + Lenis smooth scroll) would have added ~50KB gz of duplicate animation engine, a documented Astro ClientRouter conflict in Firefox, and wheel-event hijacking that reads as a bug to task-oriented visitors.
Outcome
Built on motion v12 (already shipped for the islands, +1KB gz for the scroll module) + native CSS scroll-driven animations. Six signature moments: hero compile mask-reveal (pure CSS, plays before JS), scroll-scrubbed terminal boot on the live-desk console, scramble→odometer counters on the real published metrics, the customer-zero dark card clip-path-expanding to full-bleed, a scroll-velocity-reactive tech marquee with a visible pause control, and an orange accent bleed that wanders down the page with scroll depth. Native scroll untouched. Reduced-motion kills everything via three layers (CSS gate, JS matchMedia gate, MotionConfig) plus a visible footer toggle. Lighthouse median across 5 runs: perf ~91 (best 100), a11y 100, bp 100, seo 100, TBT 0ms — and CLS improved from ~0.10-0.17 to 0.02-0.05 because the hero mask hides the font-swap shift.
What we learned
The 8-researcher pass killed our own first instinct: we had GSAP+Lenis scaffolded before the evidence came back (bundle math measured from dist files, the astro#12725 Firefox issue, and production CSS pulled from Linear/Stripe/Vercel showing nothing over 0.6s). Premium motion is mostly restraint — two easing curves, one reveal primitive, and a handful of earned moments that dramatize real data instead of decorating it.