Pixel Transition
Pixel-based transition effect.
First
Second
import PixelTransition from "@/components/vritti/pixel-transition";
export function PixelTransitionExample() {
return (
<div className="flex items-center justify-center p-8">
<PixelTransition
firstContent={<div className="flex items-center justify-center w-full h-full bg-blue-500 text-white text-xl font-bold">First</div>}
secondContent={<div className="flex items-center justify-center w-full h-full bg-purple-500 text-white text-xl font-bold">Second</div>}
gridSize={7}
/>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/pixel-transition"
Dependencies
pnpm add gsap