Iris
A holographic foil sheet: a slowly raking light drives thin-film iridescence across a domain-warped oil-slick field, crossed diffraction micro-gratings split it into fine rainbow bands, and a soft specular bloom sweeps and leans toward the pointer for a tilt-shimmer, with glints twinkling like glitter. Original OGL fragment shader, hard-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/irisManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | Three tones: [substrate, tintA, tintB]. substrate is the dark sheet the foil sits on (near-black, shows through the dim valleys). tintA and tintB are a subtle gradient the rainbow iridescence is multiplied by — as a foil sits on a coloured card. Leave them near-white for a pure spectral rainbow, or push them to two hues for a duotone holo sheet. Any hex string. | |
| speed | number | 1 | Light-sweep speed multiplier. 1 = default (dreamy slow), 2 = twice as fast. |
| intensity | number | 1 | Overall shimmer brightness / specular bloom, 0–2. 1 = default. Higher blows the moving highlight hotter and lifts the foil glow; lower reads as a matte, distant sheet. |
| iridescence | number | 1 | Rainbow band density — how many spectral cycles the diffraction grooves split light into, 0.4–2.5. 1 = default. Lower gives broad dreamy oil-slick sweeps; higher gives tight, busy holo micro-banding. |
| 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.