Strata
A pinned scroll section that scrubs an image sequence like a product turntable — pass your own frames or get a seeded faceted gem rendered and cached on the fly, loaded coarse-to-fine behind a hairline progress bar, with neighbour crossfades and captions that fade in at their progress points.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/strataProps
| Prop | Type | Default | Description |
|---|---|---|---|
| frames | string[] | Image sequence to scrub, in playback order (URLs). Frames load progressively coarse-to-fine, so scrubbing works long before the last one lands. When omitted, a seeded procedural turntable renders instead: a faceted gem rotating a full 360°, generated lazily and cached as bitmaps. | |
| pinLength | number | 300 | Section height as a percentage of the viewport (or the scroller's height). The extra length beyond 100 is the pinned scroll distance that scrubs the sequence. |
| captions | StrataCaption[] | [] | Overlay captions that fade in and out at their progress points. |
| scroller | React.RefObject<HTMLElement | null> | the viewport | Scroll container to track instead of the window. Pass a ref to an overflow-y-auto ancestor; the pin then sizes itself to THAT box. |
| fit | "contain" | "cover" | "contain" | How frames fit the stage. |
| crossfade | boolean | true | Blend between neighbouring frames for sub-frame smoothness. |
| smoothing | number | 0.5 | Scrub catch-up, 0–1. 0 locks frames 1:1 to the scroll position; higher values ease the turn into place. |
| frameCount | number | 60 | Frames in the procedural sequence (ignored when frames is set). |
| seed | number | 7 | Seed for the procedural gem's cut (facet count, proportions, sparkle). |
| colors | [string, string] | ["#e2e8f0", "#93c5fd"] | Procedural gem palette as hex: [body, accent] — the crystal's tint and the cool rim light that catches its back facets. |
| hud | boolean | true | Show the small turn readout (degrees, or frame number for custom frames). |
| idle | boolean | true | Gentle hover-bob on the procedural gem so the stage never looks frozen. Ignored for custom frames. |
| label | string | Accessible description of the sequence. When set the canvas is exposed as role="img" with this label; otherwise it is treated as decorative. | |
| dpr | number | 2 | Max devicePixelRatio for the stage canvas. |
Also accepts all props of Omit< React.ComponentPropsWithoutRef<"section">, "children" > — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.