Depth Cascade

3D parabolic movement gallery

Why it works: Most carousels move sideways. Cascading cards into depth gives you a focal point that always reads first while showing what's around it as soft context. Each step has a parabolic dip that lifts and tilts the card mid-transit, so changes feel choreographed instead of mechanical. Under the hood: - A precomputed slot table maps each integer step to an `(x, y)` position so layout per frame is two memory reads and a lerp, not trig. - A single offset advances continuously; cards interpolate between adjacent slots with a fractional `t` for fluid motion. - Scale, opacity, blur, and rotation all derive from a card's "level" (distance from the focused slot), so visual depth stays consistent at any gap or spread. - A parabolic dip (`t (1 - t) 4`) adds a Z-axis bump and brief fade during transit — the cue that makes the movement feel intentional. - Cards outside the active depth band are skipped each frame. - Wheel input nudges the target offset; drag updates it directly with inertia. After release, GSAP snaps to the nearest integer with an eased decay. - Auto-pauses when scrolled offscreen via `IntersectionObserver`. Best for: - Product galleries and case-study reels - Stream and editorial feeds - Music albums and video chapters - Onboarding flows that want a "next up" peek - Hero sections with rotating featured cards Controls: - Cards : array of component instances — design any card in Framer and feed it in - Orientation : portrait (vertical stack) or landscape (horizontal stack) - Gap : distance between depth levels along the scroll axis (40–320 px) - Spread : how far cards fan out across the secondary axis (0–400 px) - Blur : out-of-focus blur applied to deeper cards (0–8) - Transition : parabola (animated dip) or none (linear) - Interactive : enable wheel and drag scrubbing - Auto Play : auto-advance interval in ms (0 disables) Built for production: GSAP handles the inertia tweens and snap easing. The slot table is built once per gap/spread/orientation change, so the per-frame work is constant regardless of how many cards you connect. Pointer events handle drag on both mouse and touch with `touchAction: none` so the gesture doesn't fight page scroll. `IntersectionObserver` pauses autoplay when the component scrolls offscreen.

3D parabolic movement gallery