ComponentsPixel
Noise dissolve
The title forms from noise and dissolves back into it.
Installation
$ npx shadcn@latest add @textlab/noise-dissolveNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { NoiseDissolve } from "@/components/textlab/noise-dissolve/noise-dissolve";
<NoiseDissolve as="h1" text="Ashes" />Variants
burndissolveProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "burn" | "dissolve" | "burn" | A glowing ember edge, or a soft dissolve. |
| duration | number | 1.4 | Seconds each part takes. |
| hover | boolean | true | Dissolve on hover and re-form on leave. |
| edge | [number, number, number] | [1, 0.45, 0.1] | Burn edge color as RGB from 0 to 1. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Dramatic reveals for launches, games and film.
- Moments of transformation: before and after, old and new.
Skip it
- Text that must stay readable while hovered.
- Several WebGL effects on one page.
Accessibility and motion
Accessibility
- Decorative canvas; the text is read from a hidden copy.
- Without WebGL, a CSS fade shows the real text.
Motion
- Forms over 1.4 s at a constant rate, so the burn edge travels evenly.
- Hover eats roughly half the letters, never all of them.
Reduced motion. Plain text; the shader never loads.
Performance
- Loaded only in view; draws only while the threshold is moving.