Noise

---
/**
 * Noise — film grain over whatever is beneath. Zero JS: one SVG turbulence
 * tile as a background, blended, with its translate stepped at 12 fps so
 * the grain lives without repainting. Fills its positioned parent and clips
 * the moving grain to it, so it never widens the page.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Strength, 0–1. */
  opacity?: number;
  /** Flicker the grain. */
  animate?: boolean;
  /** Blend mode against the layers beneath. */
  blend?: 'overlay' | 'soft-light' | 'multiply' | 'screen' | 'normal';
  /** Grain size: tile size in px. Smaller is finer. */
  size?: number;
}

const { opacity = 0.08, animate = true, blend = 'overlay', size = 200, class: className, style, ...rest } = Astro.props;
const vars = [`--ma-noise-o:${opacity}`, `--ma-noise-blend:${blend}`, `--ma-noise-size:${size}px`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<div class:list={['ma-noise', className]} aria-hidden="true" data-animate={animate ? '' : undefined} style={vars} {...rest}></div>

<style is:global>
  @layer components {
    /* the box is the parent's size and clips; the grain is a pseudo-element 10% larger on every side, so its translate
       never shows an edge. The oversized box itself used to be the grain, and it widened any page it touched the edge of */
    :where(.ma-noise) {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      mix-blend-mode: var(--ma-noise-blend, overlay);
      opacity: var(--ma-noise-o, 0.08);
    }
    :where(.ma-noise)::before {
      content: '';
      position: absolute;
      inset: -10%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: var(--ma-noise-size, 200px) var(--ma-noise-size, 200px);
    }
    :where(.ma-noise[data-animate])::before {
      animation: ma-noise 0.5s steps(6) infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-noise)::before {
        animation: none;
      }
    }
  }

  @keyframes ma-noise {
    to {
      translate: 5% 3%;
    }
  }
</style>