cinematic-hero-sectionslisted

<!-- last-verified: 2026-07 --> # Cinematic hero sections The hero is the **highest-stakes performance surface on the page**: it's almost always the LCP element, it's the first paint the user judges you by, and a naïve video hero is the single easiest way to ship a 10 MB, 4-second, INP-killing first impression. Every rule here is about getting the cinematic effect *without* paying for it in Core Web Vitals (cross-ref `core-web-vitals-for-ui`). **First decide the effect is worth a video at all.** A short seamless loop, a scroll-scrubbed sequence, a WebGL scene (`webgl-react-three-fiber`), and a static poster with CSS motion are four very different weight classes. Don't reach for video where a poster + CSS gradient/parallax reads the same at 1% of the bytes. ## 1. Background-video hero ```html <div style="aspect-ratio: 16/9"> <!-- reserve space → no CLS --> <video autoplay muted loop playsinline preload="none" poster="/hero-poster.avif" aria-hidden="true"> <source src="/hero.av1.webm" type="video/webm; codecs=av01" /> <source src="/hero.h264.mp4" type="video/mp4" /> </video> </div> <h1>Real DOM headline over the video</h1> <!-- not baked into the clip --> ``` - **`muted` + `playsinline` are mandatory** — mobile browsers block autoplay otherwise, and without `playsinline` iOS goes fullscreen. Never rely on audio. - **The poster is the LCP element, not the video.** Ship an optimized `poster` (AVIF/WebP) so first paint is instant; l