Dissolve transitionPro
Swaps one image for the next through a seedable random pixel dissolve, for regenerate and variation swaps. The old picture holds until the new one has loaded.
On this page
ProFour variations of one prompt. Pick one and the picture dissolves into it pixel by pixel; the same seed repeats its pattern.
Installation
Usage
import { DissolveTransition } from "@/components/ui/chatcn/pro/dissolve-transition"
<DissolveTransition src={variant.url} alt={variant.prompt} seed={variant.seed} aspectRatio="1:1" />Change src and the picture on screen dissolves into the new one. The swap starts from a snapshot of what is showing, so picking another variation mid swap continues smoothly. Passing the generation's seed makes the pattern repeat exactly for the same result, on every machine.
Examples
States
ProLoading, appearing out of the paper, coarse Bayer cells, no ink front, a failed variation that keeps the picture, and rows order.
Props
| Prop | Type | Notes |
|---|---|---|
src, alt | string | The image to show, and what it is |
seed | number | Same seed, same pattern. Default 1 |
order | "random" | "bayer" | "center" | "rows" | "diagonal" | Default random. rows mirrors in right to left |
cellSize | number | CSS px per cell. Default 4 |
duration | number | Default 640 ms |
appear | boolean | Dissolve the first image out of the paper too |
edge | boolean | Print the front in ink. Default true |
announcement | string | false | Default Showing: <alt> after each swap |
errorText, retryLabel | The bar shown over the current picture when a new one fails | |
onDissolveEnd, onStatusChange | loading, ready, dissolving or error |
Keyboard
| Key | Action |
|---|---|
Tab | Reaches the retry button when a variation fails |
Accessibility
- The
<img>under the canvas always carries the alt of the picture on screen; a polite live region announces each landed swap. - A failed variation keeps the current picture and says how to fix it, with a retry button.
- Under forced colors and for hosts without CORS headers the plain image shows and swaps instantly.
Motion
- 640 ms of discrete cells: they read as intentional steps, not as a blur. Offscreen swaps land at once.
- Under reduced motion a swap is a 150 ms crossfade. The first image fades in unless
appearis set.