Guides · 6 min read · Updated
How do you build an animated website with AI?
Pick a template whose live demo is the site you want, take its full build prompt into an AI builder or coding agent, and ask for the template first before you change anything. Then review the result against the demo on a phone, with reduced motion on, and fix what drifted one change at a time.
Why start from a template prompt
AI builders are good at pages, and weak at taste and at motion that has to be tuned. A request like "make an animated site for my agency" gets you a generic layout and a fade-in. A template prompt works differently: it describes a specific design, its sections, its motion and its constraints in enough detail that a model can reproduce it.
The live demo is your target. You can play it, scroll it and open it on your phone, then judge the AI's build against something real rather than against an idea in your head.
A prompt also gives you something to compare between tools. If one builder skips the hero motion and another keeps it, you learn which one to trust with the next template, and you can say exactly what is missing instead of describing a feeling.
Step 1: pick the template
- Choose by the feel you want: a scroll film, a WebGL hero, a quiet editorial page. Play the demo and scroll all of it.
- Check the stack on the template page. A template that lists Next.js and Tailwind fits v0 well. One that lists plain HTML and Three.js suits Bolt or an agent writing static files.
- Look at the page weight on the card. Lighter demos are easier for an AI to reproduce faithfully and faster on phones.
- Start with a free template when you are learning the workflow, then move to a Pro one.
Browse the template library and filter by what you need. The AI builders pages list which templates were tested with each tool.
Step 2: take the prompt to your tool
| Tool | How the prompt gets there | Best for |
|---|---|---|
| Lovable | A button on the template page opens Lovable with the prompt filled in. You press send. | Marketing sites and landing pages you want hosted fast |
| v0 | A button on the template page opens v0 with the prompt filled in. | Next.js and Tailwind projects you will deploy on Vercel |
| Bolt | A button on the template page opens Bolt with the prompt filled in. | Smaller, lighter pages built in the browser |
| Claude Code | Connect the AnimatedWebs MCP server and ask for a template by name. | Working in your own repository with full control |
| Cursor | Add the MCP server in Cursor and ask the agent for a template. | Editing an existing project with an agent |
| ChatGPT | Copy the prompt from the template page and paste it into a chat. | Trying a design quickly, then saving the files |
| Claude | Copy the prompt from the template page and paste it into a chat on claude.ai. | Iterating on a design in an artifact |
For the three button-based tools, each has its own page with the steps and limits: Lovable, v0 and Bolt. For the two agents, see Claude Code and Cursor. The MCP page explains how the server hands an agent the prompt directly.
# Claude Code: add the AnimatedWebs MCP server once
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com
# then ask, inside Claude Code
# "Fetch the template iridescent-voice-orb and build it as a Next.js site."ChatGPT and Claude on the web have no button. Copy the prompt from the template page, paste it into a new chat, and ask for the complete code. Whether you get a preview depends on the tool and the plan, so be ready to save the files and run them yourself. The ChatGPT page and the Claude page have example prompts for twelve kinds of business.
Step 3: what to ask for
The template prompt is long on purpose. Add a short layer of your own on top, in this order: what to build first, what to keep, and what to change.
Build the template exactly as described first. Do not change copy or styling yet.
Use the same stack the prompt names.
Keep: layout, motion, section order, reduced-motion support.
After it works, change: brand name, headline, colors, and replace all images and video with placeholders I will supply.
Keep the page fast on phones: cap the WebGL pixel ratio at 2 and pause rendering when the tab is hidden.
Tell me which files you created and how to run the project.- Ask for the template as written before you ask for changes. Changing five things at once hides which one broke the motion.
- Name the stack. If you want a Next.js project, say so, so the tool does not pick something else.
- Say what to leave alone. Models like to simplify animation and replace custom shaders with a plain gradient.
- Ask it to explain how to run the result. A build you cannot run is not finished.
Step 4: review the result
Open the AI's build next to the live demo and go through the same checks every time.
- 1Does the first screen match? Layout, type, color and the hero motion.
- 2Scroll the whole page. Does every section appear and animate, or did the model skip some?
- 3Open it on a phone. Is there horizontal scroll, tiny text, or a hero that stutters?
- 4Turn on reduced motion in your system settings. The page should still be complete and readable.
- 5Check the console for errors, and the network panel for files that failed to load.
- 6Check the licenses of what it added. Images and video in the live demos are licensed for the demos only, so replace them with media you own or license before publishing.
Common failures and the fix
| What went wrong | Why it happens | What to say |
|---|---|---|
| The animation is a plain fade | The model simplified the motion | "Restore the original scroll-driven animation from the prompt. Do not simplify it." |
| The WebGL scene is blank | A missing import, wrong version or no resize handling | "Open the console, fix every error, and make the canvas resize with the window." |
| It runs but janks on a phone | No pixel ratio cap, or the loop never pauses | "Cap the pixel ratio at 2 and stop rendering when the tab is hidden." |
| Content is invisible without JavaScript | Hidden states set in CSS with no fallback | "Content must be visible if scripts fail. Hide it only after JavaScript adds a class." |
| It used a different stack | The prompt did not name one | "Rebuild it in Next.js with Tailwind, as the prompt specifies." |
| It invented sections or copy | Prompt text was too loose in your layer | "Use only the sections in the prompt. Do not add testimonials or numbers." |
When a fix makes things worse, go back one step and ask for a smaller change. Builders that keep a history let you roll back, and with an agent you can use version control to compare.
A worked example of the layer you add
Suppose you picked a scroll-driven template and use Claude Code. The first message after connecting the server is short on purpose. It names the template, the stack and the rule of building it as written before any change. The second message changes the brand. The third swaps the media. Three small messages beat one large one, because when something breaks you know which message did it.
1. Fetch the template iridescent-voice-orb and build it in a new Next.js app with Tailwind. Do not change anything yet.
2. It runs. Now change the brand to "Harbor Street Coffee", keep every section, and update the headline and buttons.
3. Replace all images and video with the files in /public/media. Keep the same aspect ratios.
4. Check the page at 390 pixels wide and with prefers-reduced-motion on. List anything that breaks.The same order works in Lovable, v0 and Bolt. The only difference is that the first message is the prompt itself, which the button fills in for you, so your layer starts at the second message.
When AI is the wrong tool for part of the job
AI builders are quick at structure and slow at fine tuning. If a shader needs a different feel, an easing curve needs to be right, or a layout needs a hand-drawn touch, edit that part yourself and use the AI for the surrounding work. Treat the generated project as a starting point you own: read the code for the animation, understand where the motion lives, and keep your edits small.
Also decide early who maintains the site. A project built by an agent in your repository is easy to hand to a developer later. A project that only lives in a hosted builder is quick to start and may need exporting before it can move.
After the first build
Once the template works as shown, change it in small steps: the copy, the colors, then the media. Keep reduced motion and the phone check on every step. Then read the guide to making animated sites fast on phones before you publish, and the scroll animation guide if you want to add your own effects.
