# Torch — WebGL Background for React

> A volumetric cutting-torch beam: a single shaft of light stands anchored at a molten ground-contact bloom and fans upward into a soft amber column, with white-hot wisps rising inside it and volumetric fog falling through. The beam leans toward the pointer and the base carries a faint uneven-gas hum. An original OGL raymarched-quad fragment shader — DPR-clamped, offscreen-paused, with a steady rest-tilt frame under reduced motion. Idles on its own when untouched — the beam sways with a slow ghost lean.

- Page: https://crucibleui.com/components/backgrounds/torch
- 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/torch
```

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

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

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 (`TorchProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string, string]` | `a cutting- torch ramp: near-white core edging to amber fog over a deep-orange base` | Three warm hues: `[core, fog, bloom]`. `core` paints the white-hot center of the beam and the pit of the ground bloom, `fog` the amber body and the volumetric haze falling through the light, `bloom` the deep-orange ground-contact glow. |
| `position?` | `number` | `0.5` | Ground-contact position across the width, 0 = left, 1 = right. |
| `tilt?` | `number` | `1` | How far the beam leans toward the pointer. 0 locks it vertical, 1 is a strong lean; the tilt itself is smoothed by the render harness. |
| `wisps?` | `number` | `1` | Rising-wisp (spark) density and brightness inside the beam. |
| `fog?` | `number` | `1` | Volumetric fog amount drifting down through the light. |
| `bloom?` | `number` | `1` | Ground-contact bloom brightness — the illumination cast behind content. |
| `speed?` | `number` | `1` | Flow speed multiplier for wisps and fog. 1 = default. |
| `intensity?` | `number` | `1` | Overall brightness multiplier. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer sways the beam slowly side to side so it never looks dead in thumbnails and heroes; the real pointer takes over instantly. Never runs under reduced motion. |
| `paused?` | `boolean` | — | Freeze the render loop, holding the current frame. |
| `className?` | `string` | — | Extra classes for the wrapper. Positioned `absolute inset-0 -z-10`. |

## Usage example

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

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

export default function TorchDemo() {
  return (
    <DemoScene
      background={<Torch />}
      headline="Cut a line through the dark"
      subhead="A volumetric beam anchored to a molten base. Move your cursor to tilt it."
    />
  );
}
```

## 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.