GalactrexAccountOriginals
CreativePixel Dissolve
It breaks into squares that switch off in a dithered or random order. An exit transition with the texture of a game console, for closing cards, swapping screens and removing items.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add pixel-dissolveUsage
import { PixelDissolve } from "@/components/galactrex/pixel-dissolve";
<PixelDissolve show={open}>
<Card />
</PixelDissolve>Source
Installs to components/galactrex/pixel-dissolve.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The content. |
show | boolean | — | False dissolves it away, true assembles it. |
pixel | number | 8 | Pixel size in px. |
duration | number | 700 | Ms for the whole dissolve. |
pattern | "ordered" | "scatter" | "ordered" | Dither pattern or random order. |
onDone | (shown: boolean) => void | — | Called after it fully leaves or returns. |
className | string | — | Extra classes for the outer element. |
Variants
- Ordered. An 8×8 Bayer dither, crisp and retro.
- Scatter. Pixels go in random order.
Accessibility
- Hidden content is aria-hidden and invisible once gone, so it leaves the tab order too.
Motion and reduced motion
- Masks are computed once per size; each step swaps one mask image.
- Reduced motion: it appears or disappears at once.