<NoisyBackground patternUrl="/path/to/your/background.webp" />

"use client";
import { cn } from "@/lib/utils";

interface NoisyBackgroundProps {
  className?: string;
  /**
   * Custom background image to use as background pattern.
   */
  patternUrl?: string;
}

const NoisyBackground: React.FC<React.ComponentProps<"div"> & NoisyBackgroundProps> = ({
  className,
  patternUrl,
  ...props
}) => {

  return (
    <div
      className={cn(
        "pointer-events-none fixed inset-[0%] z-[9999] flex items-center justify-center overflow-hidden",
        className
      )}
      {...props}
    >
      <div
        style={{
          animation: "noise 1s steps(1) infinite",
          backgroundImage: `url(${patternUrl || "/assets/noisy-background/noisy_texture.webp"})`,
          backgroundSize: "256px",
          flex: "none",
          height: "300%",
          maxWidth: "none",
          position: "absolute",
          width: "300%",
        }}
      />
    </div>
  );
};

export default NoisyBackground;

@keyframes noise {
    0%, 100% {
        background-position: 0 0;
    }
    10% {
        background-position: -5% -10%;
    }
    20% {
        background-position: -15% 5%;
    }
    30% {
        background-position: 7% -25%;
    }
    40% {
        background-position: 20% 25%;
    }
    50% {
        background-position: -25% 10%;
    }
    60% {
        background-position: 15% 5%;
    }
    70% {
        background-position: 0% 15%;
    }
    80% {
        background-position: 25% 35%;
    }
    90% {
        background-position: -10% 10%;
    }
}

import NoisyBackground from "@/components/noisy-background";

<NoisyBackground /> /* Global Background */
<NoisyBackground className="absolute" /> /* Not global but relative to parent */
<NoisyBackground isAnimationActive={false} /> /* With disabled animation */