Cinematic Grain, Vignette & Slow Push-In Hero

What this builds

A full-viewport hero section with a cinematic feel achieved through three layered effects: a film grain texture overlay, a radial vignette darkening the edges, and a slow push-in (Ken Burns) zoom on the background image or video. A headline, subline, and CTA sit above all layers with guaranteed contrast. The result reads as a still from a film, not a webpage.

• Full-viewport background image or video with slow push-in zoom (10-20s, scale 1.0 to 1.08)
• SVG feTurbulence or canvas-generated film grain overlay at low opacity
• Radial-gradient vignette darkening the edges and corners
• Headline, subline, CTA with contrast-safe positioning
• prefers-reduced-motion: no push-in, grain static, content fully visible
• Optional: grain animation (cycling random seed or translating noise tile)

When to use / when not to

• Use for editorial, fashion, film, luxury, hospitality, or any brand where the hero image IS the hero.
• Use when the design calls for warmth, texture, and cinematic framing rather than clean/digital precision.
• Do NOT use when the hero background is a solid color or gradient. Grain on a gradient looks dirty, not cinematic. See hero-gradient-mesh-aurora for gradient heroes.
• Do NOT use when the hero image is an illustration or vector graphic. Grain overlays on flat-color illustration look like JPEG compression artifacts.
• For the grain/noise technique in isolation, see primitive noise-grain-texture. This toolkit builds the complete cinematic hero around it.