Film Grain

"use client";

/**
 * Film Grain — a two-colour gradient under moving photographic grain.
 *
 * Self-contained: no dependencies. Canvas 2D. The grain is a small
 * noise tile redrawn every frame and scaled up, so it costs almost
 * nothing at any size. The editorial standby: behind a serif headline,
 * a quote, a chapter opener.
 *
 *   <FilmGrain from="#2a1a12" to="#c35a2c" grain={0.18} angle={160} />
 */
import { useEffect, useRef } from "react";

export type FilmGrainProps = {
  from?: string;
  to?: string;
  /** Grain opacity, 0–0.5. */
  grain?: number;
  /** Gradient angle in degrees. */
  angle?: number;
  className?: string;
};

export function FilmGrain({ from = "#2a1a12", to = "#c35a2c", grain = 0.18, angle = 160, className = "" }: FilmGrainProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const context = canvas.getContext("2d");
    if (!context) return;

    const tile = document.createElement("canvas");
    tile.width = 192;
    tile.height = 192;
    const tileContext = tile.getContext("2d");
    if (!tileContext) return;
    const image = tileContext.createImageData(tile.width, tile.height);

    let width = 0;
    let height = 0;
    let raf = 0;
    let visible = true;

    function resize() {
      if (!canvas) return;
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      width = canvas.clientWidth;
      height = canvas.clientHeight;
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      context?.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function draw() {
      if (!context || !tileContext) return;
      // Gradient.
      const rad = (angle * Math.PI) / 180;
      const dx = Math.cos(rad) * width;
      const dy = Math.sin(rad) * height;
      const gradient = context.createLinearGradient(width / 2 - dx / 2, height / 2 - dy / 2, width / 2 + dx / 2, height / 2 + dy / 2);
      gradient.addColorStop(0, from);
      gradient.addColorStop(1, to);
      context.globalAlpha = 1;
      context.globalCompositeOperation = "source-over";
      context.fillStyle = gradient;
      context.fillRect(0, 0, width, height);

      // Grain: fresh noise every frame.
      const data = image.data;
      for (let i = 0; i < data.length; i += 4) {
        const v = (Math.random() * 255) | 0;
        data[i] = v;
        data[i + 1] = v;
        data[i + 2] = v;
        data[i + 3] = 255;
      }
      tileContext.putImageData(image, 0, 0);
      const pattern = context.createPattern(tile, "repeat");
      if (pattern) {
        context.globalCompositeOperation = "overlay";
        context.globalAlpha = grain;
        context.fillStyle = pattern;
        context.fillRect(0, 0, width, height);
      }

      if (visible) raf = requestAnimationFrame(draw);
    }

    const observer = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
      if (visible) {
        cancelAnimationFrame(raf);
        raf = requestAnimationFrame(draw);
      }
    });

    resize();
    observer.observe(canvas);
    window.addEventListener("resize", resize);
    raf = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(raf);
      observer.disconnect();
      window.removeEventListener("resize", resize);
    };
  }, [from, to, grain, angle]);

  return <canvas ref={canvasRef} className={className} style={{ display: "block", width: "100%", height: "100%", minHeight: 240 }} />;
}

export default FilmGrain;