You can now customize container size, background color, pixel spacing, animation speed, color palette, pixel size, animation duration, and hint text.
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> ); }