What content can pixel transition swap?

Any two React nodes, images, text or whole cards. The grid covers the first, swaps to the alternate underneath, then clears in the same order.

How do I install Pixel Transition?

Pixel Transition is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/pixel-transition. It copies pixel-transition.tsx into components/ui and installs motion, clsx, tailwind-merge.

Is Pixel Transition free for commercial use?

Pixel Transition needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.

Does Pixel Transition work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Pixel Transition?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Pixel Transition's props and get_install_command returns the exact command.

Pixel Transition

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.

Category: Image
Licence: Charcoal UI Pro
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Pixel Transition

Hover the image; switch the trigger to click for touch.

API reference

Prop	Type	Default	Description
`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`	—

About Pixel Transition

Pixel Transition covers content with a grid of cells in random order on hover or click, switches to the alternate content underneath, then clears the cells.

Pixel Transition is an image effect for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Pixel Transition

Product image swaps.
Team photo reveals.
Before and after.
Retro-styled cards.

How it works

A deterministic shuffle orders the cells so the effect is stable across renders. grid, duration and trigger are props.

Images keep their alt text, controls are keyboard operable, and the effect never hides the content it decorates. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Pixel Transition

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

The Customize panel next to the preview lets you change grid, duration, color, trigger live, and the Code tab updates to match, so the snippet you copy already carries your values.

alternate (ReactNode): Shown after the swap.
grid (number, default 7): Cells per side.
duration (number, default 0.8): Seconds for cover, switch and uncover together.
color (string, default "var(--ember)"): Cell colour.
trigger ("hover" | "click", default "hover").
label (string, default "Toggle"): Accessible name for the button.

The example on this page

Pixel Transition: Hover the image; switch the trigger to click for touch.

Goes well with Pixel Transition

These image pieces share its tokens and motion language, so they sit together on one page without clashing.

Parallax Image: A React parallax image that drifts slower than the page as you scroll
Pixelate Reveal: A React pixelate reveal: images resolve from chunky pixels to full detail
Image Reveal: A React image reveal: a clip-path wipe uncovers the image as it settles
Zoom Lens: A React zoom lens: a magnifier follows the pointer over product images
Ken Burns: A React Ken Burns slideshow: slow pan and zoom crossfading through images

Install Pixel Transition

npx shadcn@latest add @charcoal/pixel-transition

Pixel Transition is part of Charcoal UI Pro. One seat unlocks all 300 Pro components, 107 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies pixel-transition.tsx into components/ui and installs clsx, tailwind-merge.

You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.

See Charcoal UI Pro pricing · Pro setup

Frequently asked questions

What content can pixel transition swap?: Any two React nodes, images, text or whole cards. The grid covers the first, swaps to the alternate underneath, then clears in the same order.
How do I install Pixel Transition?: Pixel Transition is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/pixel-transition. It copies pixel-transition.tsx into components/ui and installs motion, clsx, tailwind-merge.
Is Pixel Transition free for commercial use?: Pixel Transition needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
Does Pixel Transition work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Pixel Transition?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Pixel Transition's props and get_install_command returns the exact command.

Pixel Transition as Markdown · llms.txt