# Pixel Transition · Pro

Hover or click covers the content with a grid of cells in random order, switches to the alternate content underneath, then clears the cells. Cells snap rather than fade, which is what makes it read as pixels.

This is a Charcoal UI Pro component. Its source and examples are available with a Pro seat: https://charcoalui.com/pricing

## With a Pro seat

1. Add the registry to components.json:

```json
{
  "registries": {
    "@charcoal": {
      "url": "https://charcoalui.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CHARCOAL_LICENSE_KEY}"
      }
    }
  }
}
```

2. Copy your licence key from https://charcoalui.com/dashboard and put it in .env.local as CHARCOAL_LICENSE_KEY, then:

```bash
npx shadcn@latest add @charcoal/pixel-transition
```

To read Pro source through this MCP server, reconnect it with the header "Authorization: Bearer <licence key>".

## API — Pixel Transition
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Shown at rest. |
| `alternate` | `ReactNode` | — | Shown after the swap. |
| `grid` | `number` | `7` | Cells per side. |
| `duration` | `number` | `0.8` | Seconds for cover, switch and uncover together. |
| `color` | `string` | `"var(--ember)"` | Cell colour. |
| `trigger` | `"hover" \| "click"` | `"hover"` |  |
| `label` | `string` | `"Toggle"` | Accessible name for the button. |
| `className` | `string` | — |  |

See it live: https://charcoalui.com/docs/components/pixel-transition