Kaleido
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.
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/kaleidoManual — install dependencies, then copy the source
npm install oglProps
| 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. |
| paused | boolean | 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.