Pixel Dissolve Transition React component
A slideshow that changes images block by block: the frame breaks into a grid, each block flashes to the new picture's colour and then resolves into it, in a random scatter, a diagonal sweep or a ripple from the centre, with dots, arrows and autoplay.
About the Pixel Dissolve Transition component
Pixel Dissolve Transition is a slideshow that swaps images like an old computer screen redrawing: the frame breaks into a grid of blocks, each block flashes to the new picture's colour and then resolves into it, until the whole image has changed.
The blocks can switch in a random scatter, a diagonal sweep or a ripple outward from the centre. It comes with dots, arrows, a counter and optional autoplay that pauses while you hover.
When to use it
Use it for portfolio heroes, game and tech product showcases, retro-themed campaigns or any gallery where the change between images should feel like part of the design.
Bigger blocks feel more 8-bit, smaller ones more like a fine dissolve; around 20–30px suits most hero sizes.
Installation
Add the Pixel Dissolve Transition component to your project with the shadcn CLI. It lands in components/pixel-dissolve-transition.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/pixel-dissolve-transitionOr copy the source by hand and install its dependencies:
npm install lucide-react clsx tailwind-mergeProps
<PixelDissolveTransition /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| slides | { src: string; alt?: string; title?: string; meta?: string }[] | SLIDES |
| order Order the blocks switch in. | "random" | "diagonal" | "radial" | "random" |
| block Block size in px. | number | 26 |
| duration Transition length in ms. | number | 1100 |
| autoPlay Advance on its own every n ms (0 = off). Pauses on hover and focus. | number | 0 |
| aspectRatio Width / height of the frame. | number | 16 / 10 |
| radius | number | 16 |
| showControls | boolean | true |
| label | string | "Gallery" |
| onChange | (index: number) => void | — |
- slides{ src: string; alt?: string; title?: string; meta?: string }[]Default: SLIDES
- order
Order the blocks switch in.
"random" | "diagonal" | "radial"Default: "random" - block
Block size in px.
numberDefault: 26 - duration
Transition length in ms.
numberDefault: 1100 - autoPlay
Advance on its own every n ms (0 = off). Pauses on hover and focus.
numberDefault: 0 - aspectRatio
Width / height of the frame.
numberDefault: 16 / 10 - radiusnumberDefault: 16
- showControlsbooleanDefault: true
- labelstringDefault: "Gallery"
- onChange(index: number) => void
npm dependencies
Installed for you by the shadcn CLI.
Pixel Dissolve Transition FAQ
- Which orders are there?
- random scatters the blocks, diagonal sweeps from the top-left corner and radial ripples out from the middle.
- Can it play on its own?
- Yes. autoPlay takes an interval in milliseconds; it pauses while the pointer or keyboard focus is on the slideshow.
- Do my images need special headers?
- No. Images from another domain still work; without CORS headers the transition simply skips the brief solid-colour step.
- Is it accessible?
- Each slide's alt text is on the canvas, the caption is announced as it changes, and the dots and arrows are real buttons. Reduced motion switches images instantly.
