Aureole
Volumetric god rays through drifting atmosphere: a light source anchored to a frame edge or corner pours a bundle of shafts into the dark, an angular noise mask slowly churns so individual beams brighten, split, and die like sun through smoke, and sparse dust motes twinkle only inside the lit volume. Inverse power-law bloom at the source, radial falloff keeping the far field text-safe, and a gentle searchlight re-aim toward the pointer. An original OGL fragment shader — DPR-clamped, offscreen-paused, with a composed static frame under reduced motion.
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/aureoleManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| edge | AureoleEdge | "top-left" | Which frame edge the light pours in from. The source sits just outside the frame so only its bloom and the shaft bundle are visible. |
| colors | [string, string] | pale gold/ivory through a warm neutral haze | Two tones: [light, haze]. light is the pale core of the brightest shafts, the source bloom, and the dust motes; haze tints the dimmer shaft bodies and the soft atmospheric fill between beams. |
| beamCount | number | 12 | Approximate number of distinct shafts across the fan. Higher packs the fan with fine rays; lower gives a few broad cathedral beams. Clamped 2–48. |
| churn | number | 1 | How actively the angular noise mask evolves — beams brightening, splitting and dying like sun through smoke. 0 = a fixed arrangement that only drifts along its length, 2 = restless. |
| motes | number | 1 | Density/brightness of the dust-mote layer drifting through the lit shafts (motes never appear in the dark field). 0 disables. |
| reach | number | 1 | How far the shafts reach into the frame before falling to black, 0.2–3. 1 keeps the far field dark enough for overlay text. |
| interactive | boolean | true | Searchlight follow: the shaft bundle re-aims a few degrees toward the pointer, heavily smoothed. Disabled automatically under reduced motion. |
| speed | number | 1 | Animation speed multiplier for churn, drift, and motes. |
| intensity | number | 1 | Overall brightness multiplier, 0–2. |
| seed | number | Deterministic per-instance variation: offsets the noise domain and clock so multiple instances on one page desynchronize. Auto-assigned by mount order when omitted. | |
| paused | boolean | Freeze the render loop, holding the current frame. | |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. | |
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.