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

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 50 are the free tier — every one a single, self-contained hero.

This repo — free 50 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

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.