Pixel Animation

Component 135

About

You can now customize container size, background color, pixel spacing, animation speed, color palette, pixel size, animation duration, and hint text.

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

Code

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

Usage.tsx

import { PixelAnimation } from "@/components/ui/pixel-animation";

const settings = {
  animationSpeed: 0.25,
  pixelGap: 6,
  colorHueRange: 50,
  animationDuration: 360,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <PixelAnimation
        containerWidth="100vw"
        containerHeight="100vh"
        animationSpeed={s.animationSpeed}
        pixelGap={s.pixelGap}
        colorHueRange={s.colorHueRange}
        animationDuration={s.animationDuration}
        showHint={false}
      />
    </div>
  );
}