Depth Scroll Gallery
Native scrolling moves through a stack of depth planes without trapping the page or hijacking the wheel.
- spatial
- scroll
- depth
- gallery
- spatial
Open plan
01 / 04Shared studio
02 / 04Quiet room
03 / 04Long table
04 / 041 / 4
Usage
usage
import { DepthScrollGallery } from "@pinky-ui/layouts";
<DepthScrollGallery items={projects} onIndexChange={setProject} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SpatialCollectionItem[] | — | Ordered media planes with labels and optional metadata. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Intersection state is supplemental; all items remain in DOM order.
- Previous/next buttons and Arrow keys provide direct navigation.
- No scroll lock or essential content hidden behind a plane.
Performance
- IntersectionObserver selects the active item; no scroll-frame React loop.
- Transforms and opacity are bounded to the visible collection.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- A short visual story where depth should follow reading progress.
When not to use
- Long-form text or pages with several competing scroll narratives.
Skill
Purpose
Use when native page scroll should move through a short stack of visual planes while keeping the reading relationship predictable.
Use when
- A visual story has three to twelve steps.
- Each plane can stand alone with a label and useful alt text.
Avoid when
- The page already has several sticky or horizontal narratives.
- Scroll position would be required to reveal essential prose.
Interaction
Intersection state may emphasize the current plane, but previous/next buttons and Arrow keys must also work. Never trap the wheel or replace the page scrollbar.
Reduced motion and performance
Use a normal vertical gallery when reduced motion or compact layout is active. IntersectionObserver selects the current item; avoid scroll-frame React updates.