Motion Feature Lab

One page per animation technique (GSAP, Rive and Three.js), each with a live demo and the code behind it. A sibling of the Vercel and Cloudflare feature labs. 10 of 16 built so far.

The three tools

  1. GSAP animates the page itself: any CSS property, SVG or JavaScript value, sequenced on timelines and tied to scrolling.
  2. Rive plays interactive vector animations designed in the Rive editor. Designers build the motion and its logic; the app feeds it data.
  3. Three.js renders real-time 3D with WebGL. Here it's used through react-three-fiber, which lets a scene be written as React components.

Every demo respects the motion setting in the sidebar, which follows your system's "reduce motion" preference by default.

Foundations

Motion & accessibilityReduced motion, pausing off-screen, and an FPS meter for every demo.Live

GSAP

Tweens & timelinesAnimate anything, sequence it, and scrub through it.LiveScrollTriggerAnimations driven by scrolling: pinning, scrubbing, parallax.LiveSplitTextAnimate words, lines and characters, accessibly.LiveSVG: draw & morphDrawSVG and MorphSVG: line drawing and shape morphing.LiveFlipSmooth layout changes: reorder, filter, expand.Live

Rive

Rive playbackPlay .riv files, control playback, react to the pointer.LiveData bindingDrive a Rive file from your app's data, and read values back.LiveLayouts & responsiveFit, alignment and artboards that resize with the page.Live

Three.js

A first 3D sceneCamera, lights, meshes and orbit controls with react-three-fiber.LiveModelsLoad glTF models, play their animations, frame them.Phase 4Materials & lightingPhysically based materials, environment lighting, shadows.Phase 4ShadersWrite a custom GLSL shader and animate its uniforms.Phase 4

Together

GSAP × Three.jsScroll-driven camera moves through a 3D scene.Phase 5Rive × Three.jsA Rive interface layered over, or textured onto, a 3D scene.Phase 5

Performance

PerformanceLazy loading, frame budgets, and fallbacks without WebGL.Phase 6