Pixel Transition
Pro
Two views that swap through a grid of pixels filling in and dissolving away.
Lantern Drift
Hover or press Enter for details
Arcade runner
Carry one small light through a city that forgot the sun. Short runs, tight controls.
4.8 rating€4.99
Customize
12
#ff784f
Trigger
Origin
Installation
Pixel Transition is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy pixel-transition.tsx into components/ui and run npm install motion.
Usage
import { PixelTransition } from "@/components/ui/pixel-transition";
<PixelTransition
origin="pointer"
front={<img src="/cover.png" alt="Lantern Drift" />}
back={<GameDetails />}
className="w-72"
/>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | — | Content shown at rest. |
| back | ReactNode | — | Content revealed by the transition. |
| gridSize | number | 12 | Pixels per side of the grid. |
| pixelColor | string | "#ff784f" | Color of the pixels. |
| duration | number | 0.8 | Length of the whole transition, in seconds. |
| trigger | "hover" | "click" | "hover" | Play on hover, or toggle on click. Enter and Space toggle in both modes. |
| origin | "random" | "pointer" | "random" | Fill in any order, or spread out from where the pointer entered or clicked. |
| className | string | — | Extra classes for the card, such as its width. |
Dependencies: motion