How to use one

1. Pick a site below and open its folder.
2. Open prompt.md and press Copy raw file (the copy icon at the top right of the file).
3. Paste it into Claude Code, Cursor or Codex in an empty folder and let it build.

You don't need to generate anything. The videos and images each site uses are already hosted, and the prompt links to them. Many build a single index.html with no build step. The React ones say so in their first line.

New: Blockhaus is free

Blockhaus Landing Page · Interactive 3D Studio A 3D studio site that opens on a live physics pile of 62 glossy toy blocks. Your cursor shoves them, a click bursts them apart, a paper ribbon draws across the page, a showreel grows to full window, and the toys stack into a little house that floods orange into the footer. Three renderers, a hand-written physics solver, and nothing to install: one HTML file. Live demo · prompt.md

Landing pages

Whole pages: loader, hero, sections, footer.

Orrery · Observatory HTML · WebGL2 · Particles	Brand New Day · Scroll Film React · Three.js · Scroll Film
Graven · Blueprint Sheet React · Tailwind · Scroll	Ascent · Alpine HTML · CSS · Scroll-Scrub
Chalk · Strength HTML · CSS · Scroll-Scrub	Prisma · Creative Collective HTML · CSS · Scroll

Hero sections

One full screen that you can ship alone or put on top of a page you already have.

Deepfield · Creative Studio HTML · CSS · One Screen	Solstice · Light Therapy Lamp HTML · WebGL2 · Halo Optics	Koi Garden · Teahouse React · Tailwind
Hourglass · Planetarium React · Tailwind	Plume · Paperie React · Tailwind	Sonor · Audio Lab React · Tailwind
Verdant · Overgrown Metro React · Tailwind	Sub2 · Race Campaign React · Tailwind	Knead · Bakehouse React · Tailwind
Cinematic Hero · Movie / Streaming React · Tailwind · Lucide	Frost · Cold Brew HTML · CSS	Stillwater · Deep Work React · Tailwind
Rove · Travel AI React · Tailwind	Ascend · Mindfulness React · Tailwind	Haven · Wellness AI React · Tailwind
Terra · Wellness React · Tailwind	Drift · Travel React · Tailwind	Flux · Creative Studio React · Tailwind
Helio · Solar Energy React · Tailwind

3D and interactive

Single pieces driven by the cursor, plus drop-in WebGL backgrounds.

Strato · Sneaker Drop React · Tailwind · Cursor	Morpho · Field Journal React · Tailwind · Cursor	Lattice · Perspective Grid HTML · WebGL2 · Shader
Halftone · Print Screen HTML · WebGL2 · Shader

Want the rest?

More free stuff

• Free components: single UI and 3D pieces with code you can paste.
• Free backgrounds: Lavender Lake, Chrome Flux, Glass Wave, as 1080p loops.
• vividui: WebGL backgrounds, three.js scenes and elements, each one a self-contained HTML file.
• vividsites MCP: search the whole library and pull prompts from inside Claude.

Every prompt

There is a machine-readable index in catalog.json.

Tips

• Paste the whole prompt. It is long on purpose, because the exact fonts, timings and easing are what make a site look designed.
• Use a strong model. They work best with a frontier model such as Claude Opus. Smaller models skip details.
• Change the brand, keep the structure. Ask your agent to swap the name, copy and colours once the site is built.
• Check it on a phone. If something looks wrong at 390px wide, tell your agent what you see.

License

You can use these prompts to build sites for yourself or for clients, commercial work included. Please don't repackage or resell the prompts themselves. See LICENSE.