Capability 01 — Parallax hero
Depth, on a single axis of scroll.
Three layers at three depths, fixed in place by GSAP ScrollTrigger, enriched by mouse tracking on desktop and device orientation on phones. Scroll slowly.
How this is built
The motion is the content.
Eight small primitives, composed. Nothing novel — what’s different is that the teardown, the font-load refresh, and the reduced-motion fallback all work on the first try. Every file below is open in the repo.
01GSAP ScrollTriggerPinned section, scrubbed progress, y-translation and scale on each layer.View source
02gsap.context()Scoped teardown so the ScrollTrigger instance is cleaned up on route change.View source
03ScrollTrigger.refresh() on load + resize + fontsAvoids the offset-drift bug where pinning stops working once fonts or images finish loading.View source
04SplitHeading (GSAP SplitText)Character-stagger reveal on the title, word-stagger on the subtitle.View source
05pointermove parallaxDesktop-only. Rotational and translational parallax per-layer, lerped for smoothness.View source
06DeviceOrientationEventMobile-only. Gamma/beta tilt maps to per-layer translation. iOS prompts on gesture.View source
07prefers-reduced-motionAll motion short-circuits to a static hero when the user opts out at the OS level.View source
08Scroll-driven vignetteRadial gradient tightens its inner radius and darkens as scroll progresses — subtle, not kitsch.View source