Reeded
Architectural reeded glass over an image or video: each vertical flute refracts a compressed, mirrored slice through a convex lens profile, with a slow cool specular line, edge grooves and a faint chromatic split. The pointer fogs the pane with condensation that clears in streaks along the reeds, clicks stack breath blooms, an idle ghost breathes across, and the flutes sweep in from flat glass on first view. Ships a seeded procedural dusk plate when no src is given. OGL, DPR-clamped, offscreen-paused, reduced-motion-safe.
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/reededManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | string[] | Image or video URL (or an array of them, which crossfades as a slideshow every interval seconds). Videos are detected by extension (mp4, webm, ogv, mov, m4v) and play muted + looped. Media is fetched with crossOrigin="anonymous", so cross-origin hosts must send CORS headers — if one fails to load, the built-in procedural plate stays up. Omit to show the procedural plate: a seeded dusk landscape generated on the client. | |
| alt | string | Accessible description of the media, rendered as visually-hidden text. | |
| flute | number | 22 | Flute (reed) width in CSS px. |
| curvature | number | 0.6 | Lens curvature of each flute, 0–1. 0 = flat clear glass; higher compresses and mirrors a wider slice of the image into every reed. |
| frost | number | 0.7 | Strength of the pointer condensation, 0–1. 0 disables frost. |
| tilt | number | 1 | Drift speed of the specular line as the pane slowly "tilts". 0 holds it still. |
| tone | "dark" | "light" | "dark" (default) tunes the frost to a cool smoked gray and the plate to a dusk palette; "light" gives milky-white frost and a pale morning plate. | |
| colors | [string, string, string] | a cool blue dusk (dark tone) or pale mist (light tone) | Procedural-plate palette [deep, haze, light]: night sky + near hills, horizon haze + far ridges, sun + glints. Ignored when src is shown. |
| seed | number | 7 | Seed for the procedural plate's layout (sun, ridges, clouds). |
| interval | number | 6 | Seconds per slide when src is an array. |
| interactive | boolean | true | Pointer leaves frost; click breathes; idle autoplay ghost. |
| paused | boolean | Freeze the glass (and pause any video) on the current frame. | |
| children | React.ReactNode | Overlay content, centered above the glass. | |
| ref | React.Ref<ReededHandle> | React 19 ref prop → {@link ReededHandle}. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — 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.