Cinematic hero patterns that still load fast

The hero is the only part of a website almost everyone sees. It is also where most sites spend their entire performance budget on a video that plays for two seconds before the visitor scrolls. There is a better trade.

Pattern one: the reveal

Open on a single still image with real depth, then bring the brand in as a sequence: image, light, wordmark, line of copy. Each beat is 300 to 600 milliseconds. The visitor feels a film, the browser loads a JPEG.

Pattern two: the drawn line

An SVG path that draws itself across the hero carries more energy than a looping video and weighs a few hundred bytes. Tie its progress to time on first load and to scroll afterwards so it feels alive without ever being distracting.

Pattern three: the rotating word

One headline, one word that changes: real estate, brands, talent. Per-letter animation reads as craft. Keep the dwell time under three seconds and never rotate more than five words.

The budget

• Largest image under 250 KB, served as WebP or AVIF with a responsive srcset.
• Fonts limited to the weights actually used; preload the display face.
• All motion collapses under prefers-reduced-motion. A hero that makes someone dizzy is not premium.
• Nothing above the fold waits for JavaScript. The still image and headline render first; the sequence layers on top.

Run Lighthouse on the hero alone before adding anything else. If it is not above 95 on mobile, the cinema is costing you visitors.