Animated Grainy Background Demo

1import {
2  AnimatedGrainyBg,
3  GrainyAnimatedBgProps,
4} from "../ui/animated-grainy-bg";
5 
6export default function GrainyBgDemo() {
7  const animationTypes: Array<GrainyAnimatedBgProps["animationType"]> = [
8    "flow",
9    "mesh",
10    "waves",
11    "aurora",
12    "spiral",
13    "pulse",
14  ];
15 
16  const grainTypes: Array<GrainyAnimatedBgProps["grainType"]> = [
17    "digital",
18    "plasma",
19    "scratches",
20    "paper",
21    "noise",
22    "dust",
23  ];
24 
25  return (
26    <>
27      <div className="min-h-screen">
28        <div className="mb-16">
29          <div className="mb-16">
30            <h2 className="text-2xl font-bold mb-8 text-center">
31              Animation Types
32            </h2>
33            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
34              {animationTypes.map((animationType) => (
35                <div key={animationType} className="relative">
36                  <AnimatedGrainyBg
37                    animationType={animationType}
38                    grainType="paper"
39                    grainIntensity={40}
40                    colors={["#1b078c", "#a3079e", "#c20673", "#06d4b8"]}
41                    speed={1.5}
42                    style={{
43                      height: "200px",
44                      width: "200px",
45                    }}
46                  >
47                    <div className="flex items-center justify-center h-full">
48                      <div className="text-center">
49                        <h3 className="text-lg font-semibold text-black capitalize">
50                          {animationType}
51                        </h3>
52                        <p className="text-sm text-neutral-800 mt-1">
53                          Animation Pattern
54                        </p>
55                      </div>
56                    </div>
57                  </AnimatedGrainyBg>
58                </div>
59              ))}
60            </div>
61          </div>
62 
63          {/* Grain Types Demo */}
64 
65          <h2 className="text-2xl font-bold mb-8 text-center">Grain Types</h2>
66          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
67            {grainTypes.map((grainType) => (
68              <div key={grainType} className="relative">
69                <AnimatedGrainyBg
70                  animationType="mesh"
71                  grainType={grainType}
72                  grainIntensity={60}
73                  colors={["#1b078c", "#a3079e", "#c20673", "#06d4b8"]}
74                  speed={0.8}
75                  style={{
76// … truncated