import * as React from "react";

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

const noiseDataUri =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E";

type NoiseTextureBackgroundProps = React.HTMLAttributes<HTMLDivElement> & {
  intensity?: number;
};

export function NoiseTextureBackground({
  intensity = 0.35,
  className,
  children,
  ...props
}: NoiseTextureBackgroundProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-2xl border border-border bg-card p-6",
        className
      )}
      {...props}
    >
      <div
        className="pointer-events-none absolute inset-0 text-muted-foreground mix-blend-soft-light"
        style={{
          backgroundImage: `url("${noiseDataUri}")`,
          backgroundSize: "180px 180px",
          opacity: intensity,
          animation: "noise-shift 1.4s steps(2) infinite",
        }}
        aria-hidden="true"
      />
      <div className="relative z-10">{children}</div>
      <style jsx>{`
        @keyframes noise-shift {
          0% {
            transform: translate3d(0, 0, 0);
          }
          25% {
            transform: translate3d(-6%, 4%, 0);
          }
          50% {
            transform: translate3d(4%, -5%, 0);
          }
          75% {
            transform: translate3d(-3%, -2%, 0);
          }
          100% {
            transform: translate3d(0, 0, 0);
          }
        }
      `}</style>
    </div>
  );
}
Noise Texture Background

Grain Overlay

Dependencies

Files

Installation
