↓↓ double down
[LAB:00][FX:SCROLL-SCRUB-3D]

double down · motion lab

the lab

a sandbox for section transitions. scroll down. each bay stacks a different technique on the last.

[LAB:01][FX:PARALLAX-LAYERS]

depth from speed

foreground and background move at different rates as you scroll. the eye reads the rate difference as depth, the trick rolex leans on for product hero shots.

[LAYER:Z+120]
[LAB:02 · FX:CROSSFADE-SCALE]

panels that breathe

this whole panel fades up and scales in as it enters, then eases back out, apple-style scene-to-scene handoff.

[LAB:03 · FX:CROSSFADE-SCALE]

gooey matter

a distortion shader warps the surface; scroll feeds the distortion amount and speed.

[LAB:04][FX:PIN-CARD-STACK]

pinned stack

the section pins while the page scrolls behind it; progress drives each card independently.

[01/03]

intake

applications stream in from the ring.

[02/03]

matching

builders pair on overlapping problems.

[03/03]

shipping

thirty days, public, in toronto.

[LAB:05][FX:PARTICLE-VORTEX]

fields that spin

seven hundred points on a disk. scroll tightens the spiral and lifts them off the plane. every particle recomputed per frame.

[POINTS:700 · TWIST↔SCROLL]

[LAB:06][FX:SNAP-RAIL]

snap rail

drag or scroll the rail. panels snap to center, css scroll-snap living alongside lenis smooth-scroll.

[01/06]momentum
[02/06]snap
[03/06]pin
[04/06]parallax
[05/06]crossfade
[06/06]scrub
[LAB:07][FX:SCROLL-WALL]

the wall

[FX:scrub]01/09
scrub
[FX:scale]02/09
scale
[FX:mask]03/09
mask
[FX:pin]04/09
pin
[FX:drift]05/09
drift
[FX:warp]06/09
warp
[FX:snap]07/09
snap
[FX:spin]08/09
spin
[FX:fade]09/09
fade
motion lab /// ↓↓ /// scroll-scrub /// pin /// parallax /// crossfade /// wall /// vortex ///

end of rail

← back to home