MotionLab

A production-grade web animation lab

UI physics, scroll-driven timelines, shared-canvas WebGL, vector state machines, shaders, simulations and native web motion. Every demo ships with live playground controls, a perf HUD, its source, and a reduced-motion path.

demos: 52
showcases: 25
WebGL context: 1

Explore the lab ↓Same effect, 4 engines →

Physics Lab

Springs, drag, layout morphing, micro-interactions and cursor physics.

All 12 →

Drag & Throw

Fling cards around a bounded table. Momentum, elastic edges and spring snap-back.

Motion

Card → Fullscreen

Shared-element transition with layoutId: a grid card morphs into a full-screen dialog and back.

Motion

Layout Shift Smoothing

Add, remove, shuffle and drag-to-reorder. Every layout shift animates instead of jumping.

Motion

Magnetic Buttons

Buttons that lean toward the cursor, with a separate spring for the label (parallax inside the button).

Motion

Stateful Button Morph

idle → loading → success / error. Width, icon and colour morph as one continuous object.

MotionSVG

Ripple Effects

Material-style ink ripples that originate exactly at the pointer (or centre, for keyboard).

MotionCSS

3D Tilt & Glare

Perspective tilt that follows the pointer, with a moving specular glare layer.

MotionCSS

Staggered Menu

Mobile navigation: circular clip-path reveal, blurred backdrop, staggered links.

MotionCSS

Modal & Drawer

Animated modal plus a bottom sheet you can drag down to dismiss.

Motion

Morphing Command Palette

⌘K palette that morphs out of its trigger, filters live and animates the highlight between rows.

Motion

Fluid Cursor & Hover Traps

A lagging cursor blob that stretches with velocity and snaps into “trap” targets.

Motion

Particle Trail

A pooled particle tail following the pointer, drawn on a single 2D canvas.

Canvas 2D

Scroll Hub

Pinning, parallax, split text, SVG drawing and scroll-scrubbed timelines.

All 13 →

Pinned Horizontal Panels

Vertical scroll drives a horizontal track of panels, with nested per-panel animations.

GSAPScrollTriggerLenis

SplitText Reveals

Char, word and line reveals with masks, plus skew driven by scroll velocity.

GSAPSplitTextScrollTrigger

Himalayan Parallax

Sunrise over the Himalaya: five mountain ranges moving at five scroll speeds.

GSAPScrollTrigger

Zoom-on-Scroll Reveal

A small framed image expands to full-bleed while the headline splits apart.

GSAPScrollTrigger

Highlight Fill

Paragraph words light up one by one as you read, with a marker highlight on key phrases.

GSAPSplitTextScrollTrigger

Kinetic Marquee

Infinite running text that speeds up and reverses with scroll direction.

GSAPScrollTrigger

SVG Path Drawing

A route traces itself as you scroll, with a progress indicator and waypoint pops.

GSAPDrawSVGScrollTrigger

SVG Shape Morphing

Circle → star → blob → polygon, scrubbed by scroll with MorphSVG.

GSAPMorphSVGScrollTrigger

Flip Layout Grid

Switch grid ↔ list and filter categories; GSAP Flip animates every item to its new box.

GSAPFlip

Stacking Cards

Sticky cards that scale down and dim as the next one slides over them.

GSAPScrollTriggerCSS

Observer Fullscreen Slides

Wheel, touch and keys step through full-screen slides with one normalised gesture API.

GSAPObserverSplitText

Text Scramble / Decode

Hacker-style decode effects with ScrambleText — on hover, on load and on a loop.

GSAPScrambleText

Apple-Style Frame Scrub

96 pre-rendered frames drawn to canvas and scrubbed by scroll position, with text beats.

GSAPScrollTriggerCanvas 2D

3D Canvas

One shared WebGL context, many scenes: glass, particles, physics, post FX.

All 9 →

Glass Hero

Floating transmission-glass shapes that tilt toward the cursor, lit by a procedural environment.

R3FdreiThree.js

Scroll-Driven Disassembly

A procedural device explodes into parts as you scroll, while the camera orbits around it.

R3FdreiGSAPScrollTrigger

Particle Swirl

60k GPU particles swirl in a galaxy; click to blast them outward by depth.

R3FGLSL

Cursor-Reactive Shader Blob

An icosphere whose vertices ripple outward from the cursor, with a normal-based palette.

R3FGLSL

Scroll Camera Flythrough

The camera flies along a spline through a field of monoliths as you scroll.

R3FGSAPScrollTrigger

Bloom, DoF & Shadows

Dynamic soft shadows plus a bloom + depth-of-field + vignette post-processing pipeline.

R3FPostprocessingdrei

Rigid-Body Physics

Click to rain rigid bodies into a bowl. Real collisions via Rapier (WASM).

R3FRapier

Instanced Wave Field

Up to 40,000 cubes in one draw call, animated by a travelling wave.

R3FGLSL

WebGPU + TSL (Stretch)

Three.js WebGPURenderer with a node material written in TSL. Falls back to WebGL2 automatically.

Three.jsTSL

Vector Machines

Rive state machines and Lottie playheads driven by input and scroll.

All 3 →

Rive State-Machine Character

A login character that tracks your typing, covers its eyes for passwords and reacts to success/fail.

RiveMotionSVG

Scroll-Scrubbed Lottie

A Lottie timeline whose playhead is bound to scroll position (goToAndStop per frame).

LottieGSAPScrollTrigger

Lottie State Toggles

Menu ↔ close, like-heart burst and checkbox — each Lottie plays forward/back as a toggle.

Lottie

Shaders & Media

GLSL image distortion, liquid transitions, video masking and scrubbing.

All 7 →

Image Hover Distortion

WebGL image planes that wave, ripple or split RGB channels under the cursor.

R3FGLSLdrei

Liquid Image Transition

Noise-displaced liquid morph between images — click, arrow keys or autoplay.

R3FGLSLGSAP

SVG Mask over Live Video

Knockout typography and a cursor-driven spotlight reveal a playing video.

SVGVideoMotionCSS

Animated clip-path

Circle, polygon, inset and wipe reveals — interpolated by the browser.

MotionCSS

Video Scroll Scrub

Scroll sets video.currentTime directly — smooth because every frame is a keyframe.

VideoGSAPScrollTrigger

Generative Noise Gradient

A full-bleed flowing gradient background from domain-warped simplex noise.

R3FGLSL

Dhaka Weave Shader

A generative Nepali Dhaka textile: diamonds, chevrons and stripes woven thread by thread in a fragment shader.

R3FGLSL

Simulations & Audio

Fluid, cloth and flow-field sims plus a real-time audio visualizer.

All 4 →

Fluid Simulation (Worker)

Stable-fluids solver running in a Web Worker, rendering to an OffscreenCanvas.

Web WorkerCanvas 2D

Prayer Flags (Verlet Cloth)

Nepali prayer flags on a sagging rope. Wind makes them flutter; drag, cut or pull hard to tear them.

Canvas 2D

Flow Field

Thousands of particles following a noise-driven vector field, leaving silky trails.

Canvas 2D

Audio Visualizer

Web Audio AnalyserNode driving 2D bars, waveform, radial and a 3D mesh. Built-in synth, mic or your file.

Web AudioCanvas 2DR3F

Native Web

View Transitions, CSS scroll timelines, @starting-style — and when to skip JS.

All 4 →

View Transitions API

Gallery → detail morph using document.startViewTransition and view-transition-name.

View TransitionsCSS

CSS Scroll-Driven Animations

animation-timeline: view() and scroll() — reveals, progress bar and parallax with no JavaScript.

CSS

Same Effect, 4 Engines

One stagger animation built in CSS, WAAPI, Motion and GSAP — side by side, with main-thread stress test.

CSSWAAPIMotionGSAP

@starting-style Entry/Exit

Popover and <dialog> entry/exit animations in pure CSS, including display:none transitions.

CSS

Physics Lab

Drag & Throw→

Card → Fullscreen→

Layout Shift Smoothing→

Magnetic Buttons→

Stateful Button Morph→

Ripple Effects→

3D Tilt & Glare→

Staggered Menu→

Modal & Drawer→

Morphing Command Palette→

Fluid Cursor & Hover Traps→

Particle Trail→

Scroll Hub

Pinned Horizontal Panels→

SplitText Reveals→

Himalayan Parallax→

Zoom-on-Scroll Reveal→

Highlight Fill→

Kinetic Marquee→

SVG Path Drawing→

SVG Shape Morphing→

Flip Layout Grid→

Stacking Cards→

Observer Fullscreen Slides→

Text Scramble / Decode→

Apple-Style Frame Scrub→

3D Canvas

Glass Hero→

Scroll-Driven Disassembly→

Particle Swirl→

Cursor-Reactive Shader Blob→

Scroll Camera Flythrough→

Bloom, DoF & Shadows→

Rigid-Body Physics→

Instanced Wave Field→

WebGPU + TSL (Stretch)→

Vector Machines

Rive State-Machine Character→

Scroll-Scrubbed Lottie→

Lottie State Toggles→

Shaders & Media

Image Hover Distortion→

Liquid Image Transition→

SVG Mask over Live Video→

Animated clip-path→

Video Scroll Scrub→

Generative Noise Gradient→

Dhaka Weave Shader→

Simulations & Audio

Fluid Simulation (Worker)→

Prayer Flags (Verlet Cloth)→

Flow Field→

Audio Visualizer→

Native Web

View Transitions API→

CSS Scroll-Driven Animations→

Same Effect, 4 Engines→

@starting-style Entry/Exit→

Drag & Throw

Card → Fullscreen

Layout Shift Smoothing

Magnetic Buttons

Stateful Button Morph

Ripple Effects

3D Tilt & Glare

Staggered Menu

Modal & Drawer

Morphing Command Palette

Fluid Cursor & Hover Traps

Particle Trail

Pinned Horizontal Panels

SplitText Reveals

Himalayan Parallax

Zoom-on-Scroll Reveal

Highlight Fill

Kinetic Marquee

SVG Path Drawing

SVG Shape Morphing

Flip Layout Grid

Stacking Cards

Observer Fullscreen Slides

Text Scramble / Decode

Apple-Style Frame Scrub

Glass Hero

Scroll-Driven Disassembly

Particle Swirl

Cursor-Reactive Shader Blob

Scroll Camera Flythrough

Bloom, DoF & Shadows

Rigid-Body Physics

Instanced Wave Field

WebGPU + TSL (Stretch)

Rive State-Machine Character

Scroll-Scrubbed Lottie

Lottie State Toggles

Image Hover Distortion

Liquid Image Transition

SVG Mask over Live Video

Animated clip-path

Video Scroll Scrub

Generative Noise Gradient

Dhaka Weave Shader

Fluid Simulation (Worker)

Prayer Flags (Verlet Cloth)

Flow Field

Audio Visualizer

View Transitions API

CSS Scroll-Driven Animations

Same Effect, 4 Engines

@starting-style Entry/Exit