Five web motion techniques in one demo — split-text entrances, scroll-driven reveals, magnetic cursor hover, staggered grid reveals, kinetic type. Motion as a UX decision, not decoration. Built in GSAP, no framework.
Five techniques. One file. No framework.
The brief was proof — not a portfolio item, but a technical argument. Each technique is a production approach worth reaching for on a real project: split-text for hero entrances, scroll scrub for narrative pacing, magnetic hover for interaction depth, stagger for list reveals, kinetic type for emphasis. They're not effects. They're tools.
No framework because a framework would obscure the motion. The motion is the content — and the code is the only thing between you and understanding how it works.
22ms per character with power3.out. The mask is an overflow:hidden line wrapper — characters slide up from yPercent: 110. Browser-native CSS clipping. No SVG, no plugin.13/10px on the wrapper and 22/16px on the inner label. Inner moves further than outer — parallax depth inside a 2D animation. On exit, both spring back with elastic.out(1, .45).prefers-reduced-motion. The CSS hover state stays; the cursor chase and elastic spring are skipped.i × .42s, dimming the previous to 28% opacity. The spotlight moves with reading speed — not animation speed.2.8× the section height. Long pin = slow scrub = the user reads each line at the pace of their own scroll. Pin distance is the design knob.mousemove with no throttling. Fine on a fresh page; on a heavier page it would jank. gsap.quickTo would smooth the hot path.// scroll to advance annotation would solve it.