Content appears as a grid of blocks dissolves in a pseudo-random order.
npx shadcn@latest add https://hyperblur.dev/r/pixel-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pixel-reveal.tsx.
import { PixelReveal } from "@/components/hyperblur/pixel-reveal"
<PixelReveal><h1>HYPERBLUR</h1></PixelReveal>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | What to reveal. |
| rows | number | 8 | Grid rows. |
| cols | number | 14 | Grid columns. |
| duration | number | 1.2 | Seconds until fully revealed. |
| color | string | "#0a0a0a" | Block color (match your background). |