Video Hero

What it does

The video hero opens your page like a scene: a muted clip looping quietly behind your headline, selling the vibe before a single word gets read. Bars, gyms, travel, venues, anywhere atmosphere is the product. It sets the mood in the first second, before anyone reads.

• Sound off, always; the video never plays audio and never shows controls.
• The hero fills most of the first screen, with an eyebrow line, a big headline, and one or two buttons centered in it.
• A poster image shows instantly, treated as the page's first paint, so the hero looks finished before the video arrives.
• Visitors who prefer less motion get the poster, full stop.
• The overlay keeps your words readable over every single frame, not just the calm ones.
• Keep the clip short and heavily compressed; the code says how.

How it works

1. 1Pick the overlay, a dark veil, a bottom-up gradient, or a tint of your brand color.
2. 2Copy the prompt, the hero's build brief for your AI, into whichever AI you use.
3. 3Add a short, tightly compressed clip and a poster frame that stands alone with pride.
4. 4Write the eyebrow, headline, and button over it, words first, atmosphere second.
5. 5Test the fallbacks: reduced-motion and slow connections should get a hero that looks complete with just the poster.
6. 6Watch a whole loop with the text up: if any moment makes the headline hard to read, darken the overlay, not the message.

What you can customize

• Overlay: dark is the safe cinematic pick; the gradient darkens just where your text sits; brand tint colors the whole mood.
• Headline, buttons, and type adapt to your site automatically, because your AI builds the hero right inside your own design, text always on top.