Dross
A pixel-dissolve card: on hover or click the surface divides into a grid of cells that dissolve away — each flashes white, shrinks and drifts up as a bright particle, with the odd seeded soft-white spark — then the second face condenses back from neutral smoke. Keyboard-operable, instant crossfade under reduced motion.
canvaspro
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/drossProps
| Prop | Type | Default | Description |
|---|---|---|---|
| front | React.ReactNode | Content shown before the dissolve. | |
| back | React.ReactNode | Content revealed after the dissolve. | |
| rows | number | 7 | Grid rows the card divides into. |
| cols | number | 10 | Grid columns the card divides into. |
| stepDuration | number | 8 | Stagger between cell ignitions in ms — the "step" of the wave. |
| trigger | "hover" | "click" | "hover" | What starts the dissolve. Hover also responds to keyboard focus. |
| once | boolean | false | Stay on back after the first dissolve instead of reverting. |
| colors | DrossColors | Palette overrides for the dissolve/smoke effects. | |
| heat | number | 1 | 0–1 master intensity: flash brightness, spark chance, smoke opacity. |
| paused | boolean | Freeze the dissolve mid-frame. | |
| seed | number | 11 | Deterministic seed for cell order and spark placement. |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"div">, "children" | "onClick"> — 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.