Pixel Transition

'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>
	);
}