Browse components
Pixel Transition
A card that dissolves into a random pixel grid on hover and reassembles as its second face.
Installation
npx shadcn@latest add @glint-ui/pixel-transitionFirst 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-transition.json
Usage
import { PixelTransition } from "@/components/ui/pixel-transition";
<PixelTransition className="h-96 w-72" back={<Details />}>
<img src="/cover.jpg" alt="" className="size-full object-cover" />
</PixelTransition>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Face shown at rest. |
| back | ReactNode | — | Face revealed on hover, focus or tap. |
| gridSize | number | 12 | Pixels per row and column. |
| pixelColor | string | "#c6ff3d" | Color of the covering pixels. |
| duration | number | 700 | Total ms for cover + reveal. |
| label | string | "Flip card" | Accessible label for the card. |
| className | string | — | Extra classes for the root element. |