A grid of square cells blinks on in a diagonal, slightly scattered order, flashing the accent before going solid. The views swap behind the grid and the cells drop away in a second wave.
21°
Clear, light breeze
H 24° L 15°
npx shadcn@latest add https://hyperblur.dev/r/transition-pixel-dissolve.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/transition-pixel-dissolve.tsx.
import { TransitionPixelDissolve } from "@/components/hyperblur/transition-pixel-dissolve"
<TransitionPixelDissolve active={isNight} columns={16} rows={9} from={<Day />} to={<Night />} />| Prop | Type | Default | Description |
|---|---|---|---|
| from | ReactNode | built-in scene | The first view, shown while active is false. You can also pass two children instead of from and to. |
| to | ReactNode | built-in scene | The second view, shown while active is true. |
| active | boolean | Controlled state. False shows from, true shows to. Pair with onActiveChange. | |
| defaultActive | boolean | false | Initial state when uncontrolled. |
| onActiveChange | (active: boolean) => void | Called whenever the view switches, including switches made by autoPlay. | |
| autoPlay | boolean | false | Switch back and forth by itself. Stops when the user prefers reduced motion. |
| interval | number | 2800 | Milliseconds between switches when autoPlay is on. |
| duration | number | 1300 | Full cover and reveal time in milliseconds. |
| columns | number | 14 | Cells across. |
| rows | number | 8 | Cells down. |
| accent | string | "#2f7bff" | Flash color of each cell as it lands. |
| cover | string | "#08090c" | Solid color of the cells once they settle. |