Browse components
Pixel Swap
On hover or focus, an image dissolves into a second one through a wave of pixel blocks spreading from the pointer.
Installation
npx shadcn@latest add @glint-ui/pixel-swapFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pixel-swap.json
Usage
import { PixelSwap } from "@/components/ui/pixel-swap";
<PixelSwap src="/before.jpg" hoverSrc="/after.jpg" alt="Product shot" className="h-96 w-72 rounded-2xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image shown at rest (CORS-enabled). |
| hoverSrc | string | — | Image revealed on hover. |
| alt | string | — | Accessible description. |
| blockSize | number | 18 | Pixel block size in px. |
| duration | number | 700 | Transition length in ms. |
| accent | string | "#c6ff3d" | Color of the dissolve's leading edge. |
| className | string | — | Extra classes for the root element. |