Motion study

Vertical Depth Card Carousel

Loading…
Scene

Overview

Cards indexed by depth: scale, y, and opacity from a depth curve. Advance the index over time.

Build

  1. 01

    depth = f(i - playhead).

  2. 02

    scale/y/opacity from depth.

  3. 03

    Optional bounce table.

scale = map(depth)
zIndex = -abs(depth)
Example source React / TSX

examples/vertical-depth-card-carousel.tsx · Uses the catalog’s shared composition helpers.

Loading source…