Set up in under a minute.

What makes AnimatedWebs different

• A large catalog

  1,624 items: 889 full websites, 404 page sections, 171 backgrounds and 160 UI components, 365 of them free.

• Playable live demos

  477 templates open as a working live demo in the browser, so you try the motion before you build it.

• An MCP server for coding agents

  15 MCP tools for Claude Code, Cursor, Codex, VS Code and other MCP clients, plus a Claude Code plugin. Free accounts can use it for every free template.

• A design system per template

  Templates come with their design system as DESIGN.md, Tailwind tokens and CSS variables, plus 43 style references and a style extractor for any public website.

• Film, scroll and live WebGL together

  98 live demos are built around cinematic video (hero films and scroll-scrubbed footage) and 332 run live WebGL, including drivable 3D simulators.

1. 1

   Pick your AI tool

   We'll give you the exact command to run.

   Reges CodeFreeClaude CodeCursor◐CodexVS CodeClaude DesktopWindsurfAntigravityGemini CLICopilot cloud agentZedClineContinueKirogooseOpenCodeWarpAmpLM Studio•••Other
2. 2

   Register AnimatedWebs in Reges Code

   Reges Code is the free, local-first AI code editor for Windows from RegesCore, and AnimatedWebs comes pre-installed. Paste your API key once: open ~/.reges-code/mcp.json (Windows: %USERPROFILE%\.reges-code\mcp.json) and add the Authorization header below.

   Download Reges Code for Windows →regescode.com

   Reges Code MCP config: ~/.reges-code/mcp.jsonCopy

   {
     "mcpServers": {
       "animatedwebs": {
         "url": "https://mcp.animatedwebs.com",
         "headers": {
           "Authorization": "Bearer aw_your_key"
         }
       }
     }
   }

3. 3

   Add your API key

   Reges Code authenticates with a key. Every account, free included, has one on the developer page of your dashboard. Replace aw_your_key above with it.

4. 4

   You're set

   Ask your agent for a design and it pulls real AnimatedWebs prompts. Free accounts open every free prompt, Pro unlocks the whole vault.

Then just ask

Find a dark AI SaaS hero with a WebGL orb on animatedwebs
and build it as the homepage of this Next.js app.

Headless or CI? Use an API key from your dashboard instead of the browser sign-in.

Setup guides: Reges Code · Claude Code · Cursor · Codex · VS Code · Claude Desktop · Windsurf · Antigravity · Gemini CLI · Copilot cloud agent · Zed · Cline · Continue · Kiro · goose · OpenCode · Warp · Amp · LM Studio

Install in one line

Open source helpers for Claude Code, free on GitHub: the official plugin and a set of motion skills.

/plugin marketplace add iboss21/animatedwebs-claude
/plugin install animatedwebs@animatedwebs

/plugin marketplace add iboss21/regescore-motioncraft-skills
/plugin install motioncraft@regescore-motioncraft

15 tools · 5 prompts · 2 resources

Search

search_catalog

One search across templates, UI components, cinematic backgrounds, style references and creators. Pick a kind or search all of them, browse with an empty query, page with a cursor.

list_categories

Valid category values for search_catalog, with counts: template categories and kinds, UI library categories, or both.

Templates

get_template

Template details: stack, tags, demo URL, preview and licence. Add include_prompt for the full build prompt; Pro templates use a Prompt Pack credit or come with Pro and Lifetime.

open_builder

Opens a template straight in Lovable, v0 or Bolt with the prompt filled in.

request_template

Asks the AnimatedWebs team for a template or component we don't have yet.

manage_request

List, check or cancel your own template requests.

UI Library

get_component

One component's details, variants and live preview URL. Add include_source for production-ready code (Pro).

generate_component

Describe a component and AnimatedWebs AI writes it for you.

refine_component

Iterate on a generated component: "make it glassier", "add a hover tilt".

Cinematic Backgrounds

get_background

The clean video link plus a ready hero-video snippet (Pro). Find loops with search_catalog, kind backgrounds.

Styles

get_style_reference

A site's full DESIGN.md (colours, type scale, radius, buttons, build prompt) plus Tailwind theme and CSS variables.

Account & community

get_account

Your plan, credits and today's usage, plus your private Design workspace and a one-paste setup for the Design MCP below.

get_pricing

Plans and prices, and how many founding Lifetime spots are left.

get_creator

A creator's public profile and their live templates.

save_item

Save, unsave or list your favorite templates, components and backgrounds.

Prompts

Ready workflows your editor lists as slash commands.

Resources