Animated Grainy Background

1"use client";
2import type React from "react";
3import { useMemo } from "react";
4import { motion, type Variants } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7export interface GrainyAnimatedBgProps {
8  children?: React.ReactNode;
9  className?: string;
10  style?: React.CSSProperties;
11  colors?: string[];
12  speed?: number;
13  grainType?: "digital" | "plasma" | "scratches" | "paper" | "noise" | "dust";
14  grainIntensity?: number;
15  grainSize?: number;
16  animationType?: "flow" | "mesh" | "waves" | "aurora" | "spiral" | "pulse";
17  size?: "sm" | "md" | "lg" | "full" | number;
18  position?: "fixed" | "absolute" | "relative";
19  zIndex?: number;
20  animate?: boolean;
21  darkMode?: boolean;
22  as?: "div" | "section" | "article" | "main" | "aside" | "header" | "footer";
23  grainBlendMode?:
24    | "multiply"
25    | "overlay"
26    | "soft-light"
27    | "hard-light"
28    | "screen"
29    | "color-burn"
30    | "normal";
31}
32 
33const getSizeStyles = (
34  size: GrainyAnimatedBgProps["size"],
35): React.CSSProperties => {
36  if (typeof size === "number") {
37    return { width: `${size}px`, height: `${size}px` };
38  }
39  const sizeMap = {
40    sm: { width: "300px", height: "300px" },
41    md: { width: "500px", height: "500px" },
42    lg: { width: "800px", height: "800px" },
43    full: { width: "100%", height: "100%" },
44  } as const;
45  return sizeMap[size || "full"];
46};
47 
48const getGrainSVG = (
49  type: NonNullable<GrainyAnimatedBgProps["grainType"]>,
50  intensity: number,
51  size: number,
52  darkMode: boolean,
53): string => {
54  const baseFreq = Math.max(0.1, size / 120);
55  const opacity = Math.min(0.95, (intensity / 100) * 1.2);
56  const lightMatrix = darkMode
57    ? "0 0 0 0 0.9 0 0 0 0 0.9 0 0 0 0 0.9 0 0 0"
58    : "0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0";
59 
60  const grainConfigs = {
61    digital: {
62      freq: baseFreq * 1.8,
63      octaves: 3,
64      opacity: opacity * 1.5,
65      seed: 5,
66      type: "turbulence" as const,
67    },
68    plasma: {
69      freq: baseFreq * 0.15,
70      octaves: 12,
71      opacity: opacity * 1.1,
72      seed: 7,
73      type: "turbulence" as const,
74    },
75    scratches: {
76      freq: baseFreq * 0.05,
77      octaves: 2,
78      opacity: opacity * 1.8,
79      seed: 1,
80      type: "turbulence" as const,
81    },
82    paper: {
83      freq: baseFreq * 0.6,
84      octaves: 7,
85      opacity: opacity * 0.7,
86      seed: 4,
87      type: "fractalNoise" as const,
88    },
89    noise: {
90      freq: baseFreq * 2.2,
91      octaves: 4,
92      opacity: opacity * 1.4,
93      seed: 8,
94// … truncated