Plenum
R3F z-axis gallery fly-through: frames mounted on fresnel-edged glass panes float down a corridor in an alternating left/right rhythm; wheel, drag or arrow keys fly the camera through with eased banking while passing panes dissolve and fog swallows the distance. Click or Enter glides square-on to a pane, Escape returns. Idle drift loops seamlessly via recycled panes; offscreen-paused, reduced-motion-safe, CSS fallback.
r3fpro
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/plenumManual — install dependencies, then copy the source
npm install three @react-three/fiberProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | PlenumItem[] | eight seeded procedural plates. Loops seamlessly | Frames hung along the corridor. |
| speed | number | 1 | Multiplier for the idle drift and for scroll / drag fly-through speed. |
| spacing | number | 1.15 | Distance between consecutive panes along the corridor, in pane widths (≈1.7 units each). |
| fog | number | 0.45 | Depth fog, 0 (clear to the end of the corridor) → 1 (dense haze). |
| interactive | boolean | true | Wheel / drag to fly, click a pane to focus it. Keyboard always works. |
| paused | boolean | false | Freeze the idle drift and the intro; steps and focus still ease on demand. |
| label | string | "Gallery" | Accessible name for the gallery. |
| children | React.ReactNode | Overlay content laid over the stage (pointer events pass through to the corridor). | |
| className | string | Extra classes for the root element. | |
| ref | React.Ref<PlenumHandle> | Imperative handle: next(), prev(), focus(i), release(). |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.