Pixel Transition

Component 15

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixel Transition to your project and fits it to your theme.

Code

How Pixel Transition is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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