Pixel Background Demo

1"use client";
2 
3import {
4  type AnimationPattern,
5  PixelBackground,
6} from "@/components/sora-ui/effects/pixel-background";
7 
8export function PixelBackgroundExample({
9  colors = "#f8fafc,#f1f5f9,#cbd5e1",
10  pattern = "center",
11  gap = 5,
12  speed = 35,
13  pixelOpacity = 1,
14}: {
15  colors?: string;
16  gap?: number;
17  pattern?: AnimationPattern;
18  pixelOpacity?: number;
19  speed?: number;
20}) {
21  return (
22    <div className="h-[min(420px,60dvh)] w-full min-w-0 sm:h-[420px]">
23      <PixelBackground
24        className="h-full w-full"
25        colors={colors}
26        gap={gap}
27        pattern={pattern}
28        pixelOpacity={pixelOpacity}
29        speed={speed}
30      >
31        <div className="flex h-full w-full items-center justify-center">
32          <p className="font-medium text-lg">Hover me</p>
33        </div>
34      </PixelBackground>
35    </div>
36  );
37}
38 
39export default PixelBackgroundExample;