Low Tide44.636° N · 1.249° W
Depth Gallery
A scroll-scrubbed Z-flythrough — plates hang scattered in 3D space and the scrollbar is the dolly; far plates loom out of the fog, near ones sweep past the camera.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/depth-gallery.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/depth-gallery.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode[] | — | One plane per item — the camera flies through them front to back. |
| spacing | number | 420 | Z distance between planes in px. |
| scrollContainerRef | RefObject<HTMLElement | null> | — | Scrollable ancestor when embedded; defaults to the window. |
| hud | boolean | true | Show the 01 / 05 progress HUD. |
| stiffness | number | 90 | Camera-scrub spring stiffness. |
| damping | number | 24 | Camera-scrub spring damping. |
| mass | number | 0.65 | Camera-scrub spring mass. |
| className | string | — | Additional CSS classes. |