# Pixel Dissolve

> Content leaves as dithered pixels and comes back the same way.

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.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/pixel-dissolve/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add pixel-dissolve
```

It installs to `components/galactrex/pixel-dissolve.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { PixelDissolve } from "@/components/galactrex/pixel-dissolve";

<PixelDissolve show={open}>
  <Card />
</PixelDissolve>
```

## 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

- Masks are computed once per size; each step swaps one mask image.
- Reduced motion: it appears or disappears at once.