Electrotype
Image or seeded procedural plate deposited as a hex grid of metal domes whose radius follows luminance: plates in along a noisy front, glints slide under a drifting key light, and the pointer acts as an electrode that swells nearby dots into a crust with a depleted ring around it. Stacking pulse clicks, multi-image dissolve-and-replate morphs, nickel/copper/gold or custom metal, light tone. Original OGL shader, DPR-clamped, offscreen-paused, reduced-motion static frame.
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/electrotypeManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| ref | React.Ref<ElectrotypeHandle> | React 19 ref-as-prop → {@link ElectrotypeHandle}. | |
| src | string | A single image URL to plate (loaded with crossOrigin="anonymous", so cross-origin hosts must send CORS headers). Ignored when images is set. Omit both for three built-in seeded procedural plates. | |
| images | string[] | Several image URLs: every interval seconds (and on next()), the deposit dissolves along a noisy front and the next image plates back in. | |
| dot | number | 12 | Dot pitch — distance between neighbouring dot centers — in CSS px, 5–40. |
| metal | ElectrotypeMetal | "nickel" | Metal finish of the deposit. Ignored when colors is set. |
| colors | [string, string, string] | Custom metal ramp [shadow, body, highlight] (hex). Overrides metal — e.g. ["#101a2c", "#5d86c9", "#e6f0ff"] for anodised blue. | |
| contrast | number | 1.3 | Luminance contrast before it drives dot radius, 0.3–3. |
| interval | number | 9 | Seconds between automatic image changes (when there is more than one image), or 0 to disable. Pauses offscreen and under reduced motion. |
| tone | "dark" | "light" | "dark" | "dark" — bright metal on near-black, dots grow with luminance; "light" — metal on pale stock, dots grow with darkness (reads like print). |
| interactive | boolean | true | Pointer acts as an electrode: nearby dots swell into a crust with a depleted ring just outside; clicks stack plating pulses. When idle, a ghost electrode wanders so the surface never looks dead. Listens on the parent element, so overlay content above it does not block the effect. |
| paused | boolean | false | Freeze all animation at the current frame. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children"> — 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.