Bloom
A centerpiece sphere of luminous plasma — the white-hot bloom drawn from a bloomery furnace. Layered fresnel shells wrap domain-warped turbulence convecting upward inside the volume, a molten seam migrates slowly across the surface, and a wide soft halo seats the orb in the dark. Hover leans the orb toward the cursor and quickens the convection; click sends a slow shockwave ripple crawling across the shell. Original OGL fragment shader with all fragment work bounded to the orb+halo region, tanh soft-clip tone mapping, position/size knobs for hero layouts, full palette control — DPR-clamped, offscreen-paused, with a composed poster 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/bloomManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#fff3dd", "#ff9440", "#6b2f10"] | Three tones: [core, shell, halo]. core is the white-hot center the plasma filaments and the molten seam burn toward, shell is the ember body of the sphere and its fresnel rim, halo is the wide soft glow the orb casts into the dark. Any hex string. |
| size | number | 0.55 | Orb radius as a fraction of half the frame height — 1 fills the frame vertically, 0.55 reads as a centerpiece hero orb. |
| position | [number, number] | [0.5, 0.5] | Orb center as [x, y] fractions of the frame, measured from the top-left (CSS-style): [0.5, 0.5] is dead center, [0.72, 0.4] parks it in the upper right for asymmetric hero layouts. |
| turbulence | number | 1 | Internal convection violence 0–2: scales the domain warp and contrast of the plasma turbulence rising inside the sphere. 0 stills the interior to a soft gradient, 2 boils. |
| haloRadius | number | 1 | Halo reach multiplier: scales how far the soft glow extends beyond the shell. 0 collapses it to a tight rim glow, 2 washes half the frame. |
| hoverReact | boolean | true | Pointer response: the orb leans a few degrees toward the cursor and its internal convection quickens while hovered; click sends a slow shockwave ripple across the shell. Set false for a fully passive orb. |
| speed | number | 1 | Animation speed multiplier — convection, seam migration, shockwave travel. |
| intensity | number | 1 | Overall brightness / exposure. 1 = default. |
| 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.