Blast
An audio-reactive furnace: a horizon coal bed whose glow and flame-lick height follow amplitude, with bass strikes hurling ember volleys upward and treble adding spark flicker. Degrades to a gently breathing coal bed without audio — never black. Mic capture only behind an explicit user gesture, with full AudioContext and GL teardown on unmount.
oglpro
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/blastManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| source | BlastSource | null | Audio source driving the furnace. **"mic" must only be set in response to an explicit user gesture** (e.g. an "Enable microphone" button) — the component requests getUserMedia as soon as it sees the value. A media element is analysed and routed on to the speakers; note the platform restriction that an element can only ever feed one MediaElementSourceNode, so keep the same element instance across renders. Without a source the furnace degrades to a gentle breathing idle. |
| sensitivity | number | 1 | Input gain applied to the analysed signal. |
| smoothing | number | 0.65 | Analyser smoothing (0–0.95): higher values make the coals swell and relax lazily, lower values track the signal nervously. |
| colors | [string, string, string] | Forge triplet: [molten, ember, deep]. Molten paints the hottest coals and ember tips, ember the body of the glow, deep the cold smoke above. | |
| idleIntensity | number | 0.6 | Brightness of the no-audio "breathing coal bed" fallback (0–1). 0 still leaves a faint floor — the furnace is never black. |
| speed | number | 1 | Idle-breathing and flicker speed multiplier. |
| intensity | number | 1 | Overall brightness multiplier. |
| heat | number | 1 | Forge heat (0–1): scales glow, ember energy, and spark brightness together. |
| paused | boolean | Freeze the render loop, holding the current frame. | |
| onAudioError | (error: unknown) => void | Called when an audio source fails (mic denied, unsupported element, …). The furnace has already fallen back to its idle breathing by then. | |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.