Spectra
White light dispersing through an off-screen prism: a fan of rays spreads from a configurable origin, each frequency band refracting at its own angle so the spectrum separates red to violet — pinched to a white-hot throat at the prism and widening with distance. Rays flicker slowly like light through moving air, a slow hue-phase drift cycles which band leads, and the pointer tilts the dispersion axis with damped easing. True premultiplied-alpha transparency composites over any backdrop; an N-stop colors gradient overrides the spectral ramp. Original OGL fragment shader, jitter-dithered, 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/spectraManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| origin | [number, number] | [-0.06, 0.12] | Where the unseen prism sits, as fractional container coordinates — [0, 0] is the top-left corner, [1, 1] the bottom-right. Values outside 0–1 push the prism off-screen (the intended look: only the dispersed fan enters the frame). The fan always aims from here toward the frame center. |
| spreadAngle | number | 70 | Full angular width of the dispersed fan, in degrees, 10–160. Wider floods the frame; narrower reads as a single searching beam. |
| dispersion | number | 1 | How strongly the spectrum separates with distance, 0–2. At 0 the bands leave the prism already fanned out; at higher values the light exits as a pinched white throat and the red→violet separation visibly widens as the rays travel. |
| rayDensity | number | 26 | Number of discernible rays across the fan, 4–80. Lower is a few broad searchlight blades; higher is a fine comb of filaments. |
| colors | string[] | N-stop gradient (2–8 hex colors) overriding the spectral ramp across the fan, first stop at the leading edge. Omit for the true red→violet dispersion spectrum. E.g. ["#f43f5e", "#a855f7", "#38bdf8"]. | |
| speed | number | 1 | Animation-speed multiplier — flicker, hue drift. 1 = default. |
| intensity | number | 1 | Overall luminosity of the fan, 0–2. Higher blooms the ray cores toward white; lower is a faint ghost of light. |
| interactive | boolean | true | Cursor interaction: the pointer tilts the dispersion axis a few degrees (exponentially damped), as if nudging the prism. |
| paused | boolean | false | Freeze the animation at its current frame. |
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.