Six cinematic website heroes: a chrome sphere, molten gold, a forest canopy, electric filaments, a house on a mirror lake, and a monolith at sunset

Website prompts

Paste one prompt. Get a cinematic website.

Markup, styles, animation, and a background video that is already hosted —

so the page works the moment it is generated, with nothing to download.

Browse the 30 →

How it works

1 · Pick

Open any prompt in the gallery below. Every one has a screenshot, so you know
what you are getting before you spend a token.

2 · Copy

Take the whole fenced block. Not a summary of it, not the interesting half —
the whole thing.

3 · Paste

Into Claude Code, Cursor, v0, Lovable, Bolt — anything that writes code. The
page renders on the first pass.

That is the entire process. Every prompt is self-contained: the fonts, the exact
colours, the easing curves, the z-index order and a working video URL are all
inside it.

The prompts

Halo _{AI Platform}	Strata _Architecture	Aurum _{Precious Metals}
Altus _{Private Aviation}	Tide _{Ocean Research}	Understory _{Land Trust}
Ion _{Grid Infrastructure}	Cinematic Hero _{Movie / Streaming}	Ascent _Alpine
Chalk _Strength	Frost _{Cold Brew}	Prisma _{Creative Collective}
Rove _{Travel AI}	Stillwater _{Deep Work}	Ascend _Mindfulness
Haven _{Wellness AI}	Terra _Wellness	Drift _Travel
Flux _{Creative Studio}	Helio _{Solar Energy}	Strato _{Sneaker Drop}
Koi Garden _Teahouse	Morpho _{Field Journal}	Hourglass _Planetarium
Sub2 _{Race Campaign}	Knead _Bakehouse	Sonor _{Audio Lab}
Verdant _{Overgrown Metro}	Plume _Paperie	Graven _{Blueprint Sheet}

Getting a good result

Do not shorten the prompt. Every one specifies exact colours, easing curves,
blur radii and z-index order. That detail is the difference between a page that
looks designed and one that looks generated. Models will happily fill any gap
you leave — and they fill it with defaults.

Say what to change, not what to build. "Same prompt, but the accent is
#c0603c and the copy is about a bakery" keeps the structure and swaps the skin.
Rewriting from scratch loses the parts that make it work.

Expect one follow-up. The first pass usually lands the layout and misses one
interaction. Point at the specific thing — "the blur overlay should fade out by
45% up the screen, not 70%" — rather than asking it to try again.

The one section people delete, and shouldn't

Several prompts spend a paragraph on the loop. It reads like boilerplate. It
is the most important part.

A plain <video loop> cuts from the last frame straight back to the first. In
real footage those frames differ — often a lot — and that cut lands as a visible
jolt every few seconds. It is the single detail that makes an otherwise
expensive-looking hero feel cheap.

It is also invisible in a screenshot, which is why it survives review and
ships.

The fix is already written into the prompts: two stacked video elements, the
second starting a second before the first ends, dissolving across each other
forever. Nobody ever sees frame one arrive. Keep that section.

Going further

These 30 are the free tier — every one a single, self-contained hero.

This repo — free

30 hero sections
Hosted video included
Commercial use, no credit needed
No signup

uiprompts.app — the full library

110+ builds and growing
Scroll-driven sites, not just heroes
The source video for each, to re-cut or re-colour
Multi-section pages with real page architecture

See the full library →

Star it

If one of these saved you an afternoon, a star costs nothing and is how the next
person finds the repo. That is the whole ask.

_{Free to use, including commercially — CC0-1.0. No credit needed, though it is welcome.}

websiteprompts