Hero section generator

The hero is the first screen a visitor sees on your site — typically eyebrow text, headline, subhead, one or two CTAs, and a visual (screenshot, video, illustration, or shader). It's the only part of the page 65% of visitors read; if it doesn't land in 5 seconds, they leave. This generator gives you 12 proven hero patterns to start from.

The headline generator gives you 15 formulas for the H1 only. The hero section generator gives you the full above-the-fold: layout, eyebrow chip, headline, subhead, primary + secondary CTAs, and a description of the visual element. Use the headline generator when you've got the rest figured out; use the hero generator when you need the whole top of the page.

There's no universal winner — the right pattern depends on what you sell. For most SaaS, 'Centered with dual CTA' or 'Split (copy + product)' is the safest default. For AI products, 'Prompt-composer hero' usually wins because the input is the hook. For premium brands, 'Big claim, tiny chrome' or 'Mouse-tracked 3D' signal craft. Run two patterns as A/B variants and let traffic decide.

Dual CTA (primary + secondary) is the standard. The primary is the conversion (Start free / Sign up / Generate site). The secondary is for the not-ready-yet visitor (See pricing / Watch demo / Read case studies). A single-CTA hero works for high-intent traffic (paid ads landing pages); for organic traffic, dual CTA almost always lifts engagement.

Not always. The 'Big claim, tiny chrome' pattern intentionally has no image — it sets up a strong brand statement and pushes the visual proof to the next section. But for most products, a screenshot, product video, or illustrated visual above the fold lifts conversion meaningfully. The rule: if your product UI is good, show it. If not, use motion / shader / illustration.

Hero LCP (largest contentful paint) should fire under 2 seconds on a median mobile. That means: hero image as AVIF or WebP, sub-200KB, preloaded with `<link rel='preload'>`. For video, set `poster` to a static image so first paint isn't blocked. For shader backgrounds, defer the WebGL canvas until after the static hero is painted.

Yes. These are public-domain layout patterns and example copy. We don't own the structure of a hero; the patterns date back to the early 2010s. Steal them freely. The thing you do owe yourself is to rewrite the example copy with your specifics — the verbatim examples are starter clay.

Generate a full site on Website Killer; every site ships with a complete hero section as production-ready React + Tailwind code you can export. The hero is conditioned on your brand voice, design system, and audience — so you get a hero that matches the rest of the site, not a standalone snippet you have to integrate.