# Bloom — WebGL Background for React

> 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; clicks stack shockwaves, and it idles on its own when untouched.

- Page: https://crucibleui.com/components/backgrounds/bloom
- Category: [backgrounds](https://crucibleui.com/backgrounds)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: ogl

## Install

```bash
npx shadcn@latest add @crucible/bloom
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/bloom`.

Backgrounds render `absolute inset-0 -z-10`. Their parent must be a stacking context — wrap in `relative isolate` and put your content in a `relative z-10` child, or the background disappears behind an opaque ancestor.

## Props (`BloomProps`)

| 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. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost leans the orb along a slow drift and sends an occasional shockwave across the shell, so thumbnails and heroes never sit still; the real pointer takes over instantly. Requires `hoverReact`. Never runs under reduced motion. |
| `paused?` | `boolean` | `false` | Freeze the animation at its current frame. |
| `ref?` | `React.Ref<BloomHandle>` | — | React 19 ref prop → {@link BloomHandle}. |

Also accepts: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

`DemoScene` is a site-only preview harness, not part of the component — replace it with your own layout.

```tsx
import { Bloom } from "@/components/crucible/bloom";
import { DemoScene } from "@/components/registry/demo-scene";

export default function BloomDemo() {
  return (
    <DemoScene
      background={<Bloom />}
      headline="Draw the bloom from the furnace"
      subhead="A sphere of luminous plasma. Hover to lean it toward you — click to send a shockwave across the shell."
    />
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.