IG
Motion Lab
000 / 100
back to lab
/ category · 8 demos

Motion Systems

Scroll, parallax, and inertia choreography that guides the eye.

scroll inside this panel ↓
/ chapter 01

Motion that listens to the wheel.

Every scroll tick becomes a frame in a story. Opacity, translation, and blur are bound to scroll progress so the page reveals itself in time with the reader, not on a timer.

/ chapter 02

Type that arrives in focus.

Headlines drift up from below, sharpen out of a soft blur, and settle into place — a small piece of cinematography for a paragraph. The reader feels the arrival before they read the words.

/ chapter 03

Layers handed off cleanly.

As one block fades out, the next is already fading in. Nothing pops. Nothing snaps. The transitions overlap so attention is passed forward instead of dropped on the floor.

/ chapter 04

Restraint is the effect.

The trick is not the animation — it's how little of it you need. A few pixels of travel, a touch of blur, and a curve that respects the eye. Restraint is what makes the motion feel premium.

live demo
/ ScrollStory

Cinematic Scroll Reveal

Three-act scroll-linked storytelling: opacity, blur, and translate are mapped to scroll progress, choreographing chapters as the reader descends.

/ best for
Narrative landing pagesEditorial featuresManifestos
Light perf
Mobile optimized
/ layer 01 · background

The furthest plane moves the least — a quiet field of color that gives the eye somewhere to rest while the foreground does the talking.

/ layer 02 · midground

Supporting copy and accent shapes move at a middle pace. Fast enough to feel responsive, slow enough to stay readable as you travel down.

/ layer 03 · foreground

Type in the foreground moves the furthest and fastest. The contrast between layers is what sells depth — three speeds, one camera.

/ layer 04 · horizon

No drop shadows, no fake 3D — just differential motion. The brain assembles the depth on its own once the speeds disagree.

/ layer 01 · background
Distance drifts slowly.
/ layer 02 · midground
Context tracks with you.
/ layer 03 · foreground
Headlines lead the descent.
/ layer 04 · horizon
Depth is a feeling, not a shadow.
01

Distance drifts slowly.

02

Context tracks with you.

03

Headlines lead the descent.

04

Depth is a feeling, not a shadow.

scroll inside this panel — three columns drift apart

live demo
/ useScroll + useTransform

Dynamic Depth Parallax

Background, midground, and foreground layers move at independent rates as the page scrolls, simulating cinematic depth without 3D.

/ best for
Hero sectionsStorytelling sites
Light perf
Mobile optimized
/ hover me

Inertia & spring physics.

Cursor position drives rotation; spring damping settles the rest.

live demo
/ useSpring + tilt

Inertia Card Physics

Cards and headlines tilt toward the cursor with spring-damped rotation, settling back with realistic inertia when the pointer leaves.

/ best for
Product cardsHero headlinesFeature tiles
Light perf
Desktop only
0%
Uptime
0+
Deploys
0ms
Median
live demo
/ Counter

Kinetic Counter

Numerical values animate from zero to target on viewport entry with eased acceleration, making metrics feel earned instead of static.

/ best for
Stats sectionsDashboardsPricing
Light perf
Mobile optimized
/ panel 01

Frame

/ panel 02

Compose

/ panel 03

Reveal

/ panel 04

Ship

scroll inside this panel ↓ — travels sideways

live demo
/ HorizontalScrollGallery

Horizontal Scroll Gallery

Vertical scroll drives sideways travel through a panel sequence — a single page section that behaves like a horizontal slide deck.

/ best for
GalleriesCase studiesProduct feature tours
Medium perf
Mobile optimized
frame
frame 01 / 24

scroll inside this panel — frame is bound to scroll position

live demo
/ ScrollScrubSequence

Scroll-Scrub Image Sequence

A flipbook of frames is scrubbed by the scroll wheel, turning a section into a frame-by-frame cinematic — useful for transforming objects or revealing diagrams.

/ best for
Product revealsAnimated diagramsBrand intros
Heavy perf
Desktop only
Motion Lab↗ Cursor Systems↗ Scroll Choreography↗ Atmosphere↗ Glass & Depth↗ Cinematic UI↗ ComponentsMotion Lab↗ Cursor Systems↗ Scroll Choreography↗ Atmosphere↗ Glass & Depth↗ Cinematic UI↗ ComponentsMotion Lab↗ Cursor Systems↗ Scroll Choreography↗ Atmosphere↗ Glass & Depth↗ Cinematic UI↗ Components
hover to pause · scroll the page to reverse
live demo
/ MarqueeTicker

Marquee Ticker

An infinite content ticker that pauses on hover and reverses direction in time with scroll direction — kinetic without being noisy.

/ best for
Logo stripsNews tickersFooter credits
Light perf
Mobile optimized

scroll inside this panel ↓

The mask travels with the wheel.

Words sharpen as the reader arrives.

Nothing pops. Nothing snaps.

Restraint is the effect.

live demo
/ TextMaskReveal

Text Mask Reveal

Words are wiped into existence by a moving gradient mask tied to scroll progress — a clean way to fade a line in as the reader reaches it.

/ best for
Editorial headlinesSection openersManifestos
Light perf
Mobile optimized