Blog · November 7, 2026 · 3 min read

Play it, then build it: a prompt workflow for cinematic websites

The fastest way we know to get a cinematic website out of an AI builder is to decide with your hands first. Play a live demo until one feels right, pull its full build prompt into the tool you already use, and only then change the words, photos and prices. This post gives you the exact prompts for each step, ready to paste into Claude Code, Cursor or any other MCP client, plus the version for Lovable, v0 and Bolt.

By the AnimatedWebs team

Why play first

A screenshot cannot tell you how a page moves. Motion is the part AI builders get wrong most often, because a text description of "a smooth scroll reveal" can mean a hundred different things. When you start from a page you have already scrolled, dragged and clicked, the build prompt describes something you know you want, and you can check the result against the real thing.

On November 7, 2026 the AnimatedWebs catalog lists 1,611 templates, and 464 of them have a hosted live demo you can play in the browser. The six in the strip below are the ones we keep showing people: a sneaker that spins inside a ring of words, a record store you scrub like a film, a cone you drop flavors onto, a diamond that is ray traced live, a perfume bottle that decants as you peel the notes, and a robot dog you can drive.

The workflow, step by step

1. 1Play. Open the catalog or the 3D hub and play demos until one makes you stop scrolling. Note the one interaction you want to keep (a drag, a spin, a scroll-scrubbed film).
2. 2Pull the prompt. Connect the MCP server to your agent, or press Copy prompt on the template page. Free templates include their full prompt with a free account. Pro templates need Pro or a Prompt Pack credit.
3. 3Build it as written. Let the agent build the page exactly as the prompt says before you change anything. This gives you a working baseline to compare against the live demo.
4. 4Make it yours. Change the brand, copy, photos and prices in one pass, and keep the signature interaction untouched.

The prompts (copy these)

Paste these one at a time into Claude Code, Cursor, Codex or another MCP client after you connect AnimatedWebs. Replace the parts in angle brackets. The agent will ask you to sign in through your browser the first time, and a free account works for free templates.

Use the animatedwebs MCP to search the catalog for <your business type, for example "coffee roaster" or "law firm">.
Show me up to 8 results that have a live demo. For each one, give the title, the one interaction it is built around, and the demo link.
Do not build anything yet.

I played the demo for "<template slug>" and want to start from it.
Use the animatedwebs MCP to get that template with its full build prompt.
Summarize in 5 bullets what the page does, which interaction is the signature one, and which assets I will need to replace.

Build the page exactly as the build prompt describes, in this project.
Do not rename the brand or change copy yet.
When it runs, list anything you could not match from the prompt, and how the motion respects prefers-reduced-motion.

Now rebrand the page for:
- Business: <name>, <city, state>
- What we sell: <one sentence>
- Prices: <list in USD>
- Photos: <folder or URLs>
Keep the signature interaction, the layout rhythm and the timing exactly as they are.
Change only words, images, colors from our brand (<hex codes>) and links.
Then show me a checklist of every text change you made.

Using Lovable, v0 or Bolt instead

Browser builders do not need the MCP. Copy the build prompt from the template page, paste it as your first message, and let it finish. Then send Step 4 as your second message. Most template pages also have an Open in Lovable, v0 or Bolt link that starts the project for you.

Three things that keep the motion intact

• One change per message. Asking for a rebrand and a new section at the same time is where agents tend to flatten the animation.
• Keep the demo open next to your build. Compare the two at the same scroll position. If they drift, paste the relevant part of the build prompt back to the agent.
• Swap photos at the same size and crop. The motion in these pages is timed to the frame. A tall photo in a wide slot changes how a reveal reads.

What it costs

Free templates are free with their full prompt. Pro is $19 a month or $149 a year, a 10-template Prompt Pack is $29, and Lifetime is listed on the pricing page. Every plan allows client sites.