Components
Pixel Transition
A pixel-style transition effect that animates blocks across the screen in center, horizontal, or vertical patterns. Perfect for scene changes, interactive reveals, or retro-inspired UI animations.
Loading preview...
'use client';
import React from 'react';
import { PixelTransition } from "@/components/ui/pixel-transition";
import { Button } from '@/components/ui/button';
export default function DefaultDemo() {
const [isActive, setIsActive] = React.useState(false);
return (
<div className="relative flex min-h-screen w-full items-center justify-center">
<Button
className="z-10"
variant={isActive ? 'secondary' : 'default'}
onClick={() => setIsActive(!isActive)}
>
Toggle
</Button>
<PixelTransition
isActive={isActive}
variant="vertical"
color="var(--foreground)"
blockSize={5}
animationSpeed={0.02}
className="absolute inset-0 z-0"
/>
</div>
);
}