Hero section examples with prompts

Free only

The hero section examples

A huge circular LED sun screen on concert scaffolding glowing over a wheat field at dusk — Solstice FestivalHeroFree

A leopard tortoise with a white cycling helmet strapped on top of its shell stands on a yellow turntable against a yellow paper backdrop, head out, looking towards the camera — Pit LaneHeroWith a plan

A firebrick kiln door with an iron latch hanging open on a soot black wall, three glazed vases inside glowing orange to white heat with glaze drips running down them — Kiln DoorHeroWith a plan

A black headset on a faceted chrome pedestal on a dark arena stage, violet beams cutting through low haze — Corsair Season ZeroHeroWith a plan

A vintage studio microphone lit in near darkness with a green frequency readout and dial — Vantablack RadioHeroWith a plan

A climber in a red helmet on a sheer golden granite wall at dawn beside the headline One mile, straight up — Vertical MileHeroWith a plan

A lone figure standing on a mirror salt flat under a vast violet nebula, the sky reflected at their feet — Aetheris VoyageHeroFree

Heroes inside whole pages

These landing pages open on a hero of their own, then carry on into the rest of the site.

A white cliff hotel with a glowing turquoise infinity pool on black basalt above the sea at blue hour — Casa SalLandingWith a plan

TidecallerLanding

Green aurora ribbons over a mirror-still frozen fjord at night, snow mountains in silhouette — Nordlys FintechLandingFree

A vintage typewriter and brass lamp on a wooden desk, moonlight falling through a rippled window with the moon beyond — Noctua PressLandingWith a plan

Rows of grey lead type sorts on a concrete bench in raking window light, one sort enamelled red — GlyphhouseLandingWith a plan

How these heroes move

Footage scrubbed by scroll. A camera move is filmed once, then the scrollbar plays it, so the hero moves exactly as far as you scroll.
The cursor as a tool. Some heroes answer the pointer: a torch that follows it through a dark studio, or a kiln that heats while you press and hold anywhere on the page.
Type that arrives. Headline letters flare in one by one, player handles decode themselves and a countdown runs to zero as you scroll.
Slow light behind the words. A nebula turns slowly or a sun rises behind the hills, and the headline stays readable over it.

Where a hero is built on footage, its prompt tells you which shots to generate and how to encode them for smooth scrolling.

From demo to your own site

Scroll the demo. Every prompt has a live page that shows what it builds.
Copy the prompt for your tool. Each one comes in 5 variants: Lovable, Bolt, Cursor, Claude and Codex.
Paste it as your first message, then adjust in plain words: “slow the sun down”, “use my brand colours”.

Questions about hero section examples

What is a hero section?

The first screen a visitor sees before they scroll: the headline, a line under it and the main button. These examples add motion to that screen without hiding the words.

Is there a free hero section prompt?

Yes. Solstice Festival is free: a festival hero with a huge sun rising behind layered hills. Copy it without an account.

Will it work in Lovable or Bolt?

Yes. Each prompt has a Lovable tab and a Bolt tab written for that tool, plus Cursor, Claude and Codex. The Claude version is a plain prompt that also works in v0, Replit or any other coding model.

Do the heroes work on phones?

Every demo is checked at desktop and phone width. Open any demo on your phone to see how it behaves before you copy the prompt.