Grain Overlay

Add a film grain overlay. A subtle noise texture laid over gradients and photos that kills the 'flat plastic' look and reads as printed film. Implementation: generate the noise as an inline SVG data URI: an SVG with feTurbulence (type='fractalNoise', baseFrequency ~0.85, numOctaves 2, stitchTiles='stitch') applied to a rect at ~0.6 opacity. Use it as a repeating background-image on an absolutely positioned overlay (inset: 0, pointer-events: none) above the surface it should texture, at 25-40% opacity with mix-blend-mode: overlay (or soft-light for a gentler effect). Tuning: baseFrequency controls grain size: 0.65 is chunky film, 0.9+ is fine dust; the 120px SVG tile repeats invisibly thanks to stitchTiles. Apply to gradient heroes, dark sections, and image overlays: anywhere flat color looks cheap. Static grain is normally correct; animating it (swapping tile position a few times a second) reads as VHS, a different, louder statement. Keep the overlay under text but over the background color/image, and skip any animation under prefers-reduced-motion. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.