Animated website templates for Cursor

How a template gets into Cursor

1. 1

   Add the server to Cursor

   On the MCP page, pick Cursor and click Add to Cursor, which opens Cursor and adds the server. Or add it by hand to ~/.cursor/mcp.json for every project, or to .cursor/mcp.json inside one project.

   mcp.jsonCopy

   {
     "mcpServers": {
       "animatedwebs": {
         "url": "https://mcp.animatedwebs.com"
       }
     }
   }

2. 2

   Sign in once

   A browser window opens. Sign in with your AnimatedWebs account and approve access. Cursor supports OAuth for Streamable HTTP servers, so a free account works and there is no API key to copy.

3. 3

   Ask the agent for a template

   Describe the site you want, or name a template from this page. Cursor asks for approval before using MCP tools by default, so approve the calls as they come up. The arrow next to a tool name shows its arguments.

   describe itCopy

   Search animatedwebs for a slow video-hero template for a restaurant,
   then build it as the landing page of this project.

   or name itCopy

   Fetch the build prompt for "brinewell-buoy-ocean-chapters" from the animatedwebs MCP
   and build it in this repo.

4. 4

   Approve the fetch and the build

   get_template_prompt returns the full build prompt as Markdown, and Cursor then builds the site in your project. A free template needs only your sign-in. For a Pro template, Pro or Lifetime covers it, or the first fetch spends one Prompt Pack credit.

5. 5

   Add the rules file, then compare

   Optional: save animatedwebs.mdc from the tools page into .cursor/rules for a playbook on WebGL and scroll-story sites. Then start your dev server and compare the result with the live demo on the template page.