AI builders · Connects through MCP
Animated website templates for Claude Code
AnimatedWebs templates reach Claude Code through the AnimatedWebs plugin or MCP server: install it with one command, sign in once in your browser, then run /animatedwebs:site or ask in plain language. Claude Code fetches the full build prompt itself, so there is nothing to copy or paste.
- How it connects
- The AnimatedWebs plugin or MCP server, added inside Claude Code
- Sign-in
- A browser sign-in, no API key to copy
- Cost to try
- A free account gets MCP access to every free prompt
How a template gets into Claude Code
- 1
Install the plugin or the MCP server
The plugin adds the AnimatedWebs MCP server plus skills and /animatedwebs: commands. If you only want the server, add it from a terminal. The user scope loads it in every project.
in Claude Code/plugin marketplace add iboss21/animatedwebs-claude /plugin install animatedwebs@animatedwebsor: MCP only (terminal)claude mcp add animatedwebs --scope user --transport http https://mcp.animatedwebs.com - 2
Sign in once
The first time a tool runs, Claude Code opens your browser. Sign in with your AnimatedWebs account and approve access. A free account works and there is no API key to copy. If no sign-in starts, run /mcp inside Claude Code and follow the browser steps.
- 3
Run a command or ask in plain language
With the plugin, /animatedwebs:browse lists matching templates with links to their live demos, /animatedwebs:site picks the best match and builds the complete site, and /animatedwebs:hero replaces the current hero. Without the plugin, describe the site and Claude Code calls the MCP tools itself.
browse, then build/animatedwebs:browse dark WebGL hero for an AI SaaS /animatedwebs:site a ceramics studio in Portland, Oregonor name a templateUse the animatedwebs MCP to get the "linden-moor-dom-planes" template and build it in this project. - 4
Let Claude Code fetch the prompt
Claude Code calls search_templates to find a template, get_template for its stack, license and live demo URL, and get_template_prompt for the full build prompt as Markdown. Free templates open on every account. A Pro template opens with Pro or Lifetime, or uses one Prompt Pack credit the first time it is fetched.
- 5
Run it and compare
Start your dev server, open the result next to the live demo on the template page, and ask Claude Code to fix what differs. Fetching a prompt you already unlocked again is free.
Live demos to build with Claude Code
A spread of live WebGL, canvas, video and CSS-motion demos from the whole catalog, with no more than four of any one kind. Every template works through the MCP server, so pick by look.
1,576 of 1,576 templates list Claude Code under Tested with
Scroll-Bent Image Planes
Editorial agency images become WebGL planes that bend and color-split with scroll speed
Sparkling Can Parallax Shop
A tilting can floats through layers of citrus and bubbles with a sticky add-to-cart
Rising Dough Bakery
A neighborhood bakery site where the hero loaf literally rises as the page loads
Liquid Chrome Audio
Raymarched mercury blobs merge, split and chase your cursor above a luxury headphone launch
Command Palette Productivity
A live Cmd+K palette types its own queries and filters results right in the hero
Pocket Projector Beam Chapters
A pocket projector throws each chapter onto the wall inside a moving cone of light
Kibo Flight Club Shiba Pilot Code-Gated Drop
A Shiba in aviator goggles lifts and lowers its head to follow your pointer, guarding a secret drop
Orbit Space Travel Particle Scene
A space travel site: a ringed planet of particles that becomes a galaxy, a star and a word as you scroll
Valkyrie Orbital Hypersonic Flights
A spaceplane glides above the aurora as you scroll through its flight to orbit
Brut Atlas Champagne That Pops and Pours on Scroll
A champagne bottle peels, pops, tips over a flute and fills it with rising bubbles as you scroll
Somna Visor Portrait With Live Sleep Cards
A teal visor portrait with glass cards that chart sleep stages and recovery live as the frame turns
Tandem Shared Budget With a Live Split Slider
Drag the split slider and both shares, the donut and the phone rebalance live, then flip through insight cards
Tips for Claude Code
- Add the server with --scope user once and every project has it. With --scope project it is written to .mcp.json, so your team gets it too. Without --scope, Claude Code uses the local scope, which stays private to the current project.
- The plugin also adds skills, so a plain request such as building a landing page for your studio can trigger the site skill without a command.
- The free build skill on the tools page adds a playbook for WebGL and scroll-story sites.
- Name the template by its slug, the last part of its page address, for the most exact result.
- Running headless or in CI? Add the server with a --header "Authorization: Bearer ..." option using an API key from your dashboard, and keep the key out of prompts.
Limits to know
- The server hands Claude Code a build prompt plus the template's details and live demo URL, not the demo's source code. Results depend on your project and can differ from the demo.
- A free account opens free templates. A Pro template needs Pro, Lifetime or a Prompt Pack credit, and without one the tool answers with a pricing link instead of the prompt.
- The MCP server allows 240 requests per minute per IP address.
- Photos and video in the live demos come from licensed stock and generators and are licensed to AnimatedWebs for display in the demos only, so replace them with media you own or license before you publish.
Questions about Claude Code
How do I connect Claude Code to AnimatedWebs?+
Inside Claude Code, run /plugin marketplace add iboss21/animatedwebs-claude and then /plugin install animatedwebs@animatedwebs. To add only the MCP server, run claude mcp add animatedwebs --scope user --transport http with the server address shown on the AnimatedWebs MCP page.
Do I need an API key?+
No. The first time a tool runs, a browser window opens for a normal AnimatedWebs sign-in, and a free account works. API keys from the dashboard are for headless and CI use, and they go in an Authorization: Bearer header.
What do the /animatedwebs commands do?+
The plugin adds /animatedwebs:site, :browse, :hero, :background, :component, :style and :design. Site picks the best-matching template and builds the complete site, browse lists matching templates with live demo links, and hero replaces the current hero with a cinematic one.
Which scope should I use for the MCP server?+
Without --scope, claude mcp add uses the local scope, which loads in the current project only and is not shared. The user scope loads the server in all your projects, and the project scope stores it in .mcp.json in the project root so a team shares it through version control.
Is it free to try?+
A free AnimatedWebs account gets MCP access to every free prompt, and free templates open on every account. Pro templates open with Pro or Lifetime, or by spending a Prompt Pack credit the first time.
Facts checked on
What this page says about Claude Code comes from its official documentation, linked below, and Claude Code can change its product, so check its docs for the latest. What it says about AnimatedWebs comes from how our own site works.
- claude mcp add --transport http <name> <url> adds a remote HTTP server. The user scope loads it in all your projects, the local scope (the default) loads it in the current project only, and the project scope stores it in .mcp.json, shared through version control. Claude Code docs: MCP ↗
- For OAuth, add the server, run /mcp inside Claude Code and follow the browser login. Tokens are stored securely and refreshed automatically. To send a bearer token, add a --header option. Claude Code docs: MCP ↗
- Plugin marketplaces are added with /plugin marketplace add and plugins are installed with /plugin install name@marketplace. Claude Code docs: MCP ↗
- The AnimatedWebs marketplace on GitHub is named animatedwebs and lists one plugin, animatedwebs. Its README lists the commands /animatedwebs:site, :browse, :hero, :background, :component, :style and :design. iboss21/animatedwebs-claude on GitHub ↗
Lovable, v0, Bolt, Claude Code and Cursor are trademarks of their owners. AnimatedWebs is independent and not affiliated with them.
Pick a look, then hand it to Claude Code
Play the live demos, open the one you like, and start with a free template or unlock the whole library.