What is a hero section?
A hero section is the first screen of a website, the part a visitor sees before scrolling. It has to say what the site is, show why it is worth staying and point to the next step.
It usually holds a headline, one short supporting line, one main action, and an image, video or 3D scene.
What makes a hero section work
A good hero makes one idea readable at a glance, and everything on screen serves that idea. These are the checks we run on ours:
- One sentence. The headline can be read in a couple of seconds, without the supporting line.
- An image that shows the idea. The scene explains the business. A nice background that would fit any company does not.
- One main action. A second link can exist, but it does not compete with the first.
- Text that stays readable. Type keeps an outer margin and its contrast holds through every frame of the motion.
- A real phone version. Its own crop and lighter motion, tested on a phone, not the desktop layout shrunk down.
- Something to show while it loads. A poster image, so a slow connection or blocked video never leaves an empty screen.
Hero section or full landing page?
Use a hero alone when you already have a site and need a stronger opening; use a full landing page when the whole story still has to be told. A hero is one screen, and a visitor who scrolls expects the same care below it.
Our landing page templates carry the idea through every section, down to the closing and the footer.
How to build a hero section with AI
Give the tool exact decisions, because every word you leave out becomes its most common answer. Name the font and size, the colours as hex values, the composition, what moves and how it ends, and what changes on a phone. The guide how to write a website prompt shows the parts to include.
To see a complete prompt, start with Lune, which is free. If your hero needs a moving background, this comparison helps you choose between video, WebGL and CSS.
Questions about hero sections
What should a hero section include?
A headline, one short supporting line, one main action, and an image, video or scene that shows the idea. Navigation usually sits above it. Anything else competes with the headline.
How tall should a hero section be?
Usually the height of the first screen, so the headline and the main action are visible without scrolling. On phones, measure with the browser bars visible, because they take part of the screen.
Can a hero section use video?
Yes. Use a short muted loop with a poster image and a separate file for phones. Use WebGL instead when the scene has to react to the visitor, and CSS for simple gradients and type.
Are these hero sections free?
Lune is free and its full prompt is public. The rest are part of the Orbital membership, and each page shows the film and part of the prompt.
Do these hero sections work with Lovable or Claude?
They are written as prompts for AI builders, in HTML and React versions when both exist. Each template page lists the tools it has actually been tested in.