# Kaleido — WebGL Background for React

> A living kaleidoscope mandala: a per-pixel polar mirror-fold gives exact N-fold dihedral symmetry over a domain-warped, slowly drifting jewel-tone field, so shards rotate and morph while luminous veins trace the facet seams and a soft bloom glows at the hub. Original OGL fragment shader with segments/speed/colors/intensity knobs, exponential-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe; a ghost pointer keeps it moving when untouched.

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

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

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

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors?` | `[string, string, string]` | `a cool jewel triad (amethyst → emerald → sapphire). The center bloom is derived from these, lifted toward white. Pass a warm set (e.g. `["#ff5f6d", "#ffb347", "#c471ed"]`) for a stained-glass sunburst` | Three shard tones the mandala mixes between: `[a, b, c]`. |
| `segments?` | `number` | `6` | Number of mirror-fold segments — the mandala's rotational symmetry order. 3–16, rounded to an integer. Lower is bold and geometric, higher is a fine lacework rosette. |
| `speed?` | `number` | `1` | Rotation / morph speed multiplier. 1 = default, 2 = twice as fast. |
| `intensity?` | `number` | `1` | Overall luminosity of the shards and center bloom, 0–2. 1 = default; lower banks it to a moody stained glass, higher blazes the jewels. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer leans and twists the mandala on a slow drift so it never looks dead in thumbnails and heroes; the real pointer takes over instantly. Never runs under reduced motion. |
| `paused?` | `boolean` | — | Freeze the animation at its current frame. |

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 { Kaleido } from "@/components/crucible/kaleido";
import { DemoScene } from "@/components/registry/demo-scene";

export default function KaleidoDemo() {
  return (
    <DemoScene
      background={<Kaleido />}
      headline="A mandala that never repeats"
      subhead="An N-fold mirror-fold over a drifting jewel-tone field. Move your cursor to twist 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.