AnimatedWebs

com.animatedwebs由 animatedwebs.com 發布官方發布者v1.2.2更新於 Nov 3, 2026

Animated website templates, cinematic video backgrounds, UI components and design systems.

已驗證Streamable HTTP可網頁執行開發者工具媒體與設計

概覽

AI 產生的概覽

AnimatedWebs 的遠端 MCP 伺服器，讓助理搜尋 1,400 多個動畫網站範本、背景、UI 元件和設計系統，並建置到專案中。

可以做什麼
  • 搜尋範本、元件、背景、樣式和創作者，並列出分類
  • 取得範本及其建置提示詞，或在建置器中開啟，並可提出範本需求
  • 取得含原始碼的動畫 UI 元件，生成與調整元件
  • 取得電影感影片背景和設計系統樣式參考
  • 讀取帳戶資訊（含 Design Studio 工作區）、價格和創作者資料
適用情境
適合讓助理挑選相符的動畫範本、首屏、影片背景、元件或設計系統並套用到自己的網站，尤其在 Claude Code 或其他 MCP 用戶端中使用。
執行需求
遠端 streamable HTTP 端點 mcp.animatedwebs.com，不需本機套件。首次呼叫工具時透過瀏覽器 OAuth 登入，免費帳戶即可開始。Pro 範本、背景、元件原始碼和商業授權需付費 Pro 方案。
安裝前請注意
登入使用 OAuth，外掛不儲存密碼或 API 金鑰。部分工具會生成或調整元件、在建置器中開啟內容，AI 生成次數依方案每日限額。Pro 內容與商業用途需付費訂閱（每月 19 美元或每年 149 美元）。範本、提示詞和媒體受 AnimatedWebs 條款規範。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 AnimatedWebs，將其新增到工作區。
  2. 連接 所需的 憑證。它們會被私密儲存，絕不會在公開頁面上展示。
  3. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/com.animatedwebs%2Fanimatedwebs/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。 客戶端會在首次連接時完成 OAuth 登入。

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

README

[AnimatedWebs for Claude Code: cinematic websites built by Claude]

[Claude Code plugin] [MCP: 15 tools] [1,400+ templates] [Version 1.3.0] [Status: live]

Turn a one-line brief into a production-ready animated website, without leaving Claude Code.
Cinematic templates, live WebGL scenes, video backgrounds, UI components and design systems, delivered through one plugin.

Website · Template library · Documentation · Pricing · Support


[Four AnimatedWebs templates playing live: Noesis, Orchid, Amethyst and Atlas]

Overview

AnimatedWebs is a library of more than 1,400 animated website templates, each with a live demo and a complete build prompt. This plugin connects Claude Code to that library through the AnimatedWebs MCP server and adds skills and commands that know how to use it.

Describe what you need. Claude finds the closest designs, shows you the live demos, and builds the one you choose into your project with its motion, typography and layout intact.

  • Templates. Full sites and hero sections with scroll storytelling, WebGL, shaders and particle scenes.
  • Cinematic Backgrounds. Seamless video loops for hero sections, ready to drop in.
  • UI Library. Animated components with source code, plus AI generation and refinement.
  • Styles. Design systems as DESIGN.md, Tailwind theme, CSS variables or tokens.
  • Design Studio. A private design workspace with its own MCP server.

Installation

In Claude Code, add the marketplace and install the plugin:

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

The first time a tool runs, Claude Code opens your browser so you can sign in to AnimatedWebs. A free account is enough to get started.

Using another MCP client? Connect the server directly:

bash
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com

Setup guides for Cursor, Codex, VS Code, Windsurf and Antigravity are at animatedwebs.com/mcp.

Quick start

Ask in plain language. The right skill takes over:

Build a premium landing page for my architecture studio, dark and cinematic.

Give this page a hero with a slow video background, something calm and blue.

Find me a particle scene for an AI product and apply it to my Next.js app.

Commands

CommandDescription
/animatedwebs:site <business>Selects the best-matching template and builds the complete site
/animatedwebs:browse <style>Lists matching templates with links to their live demos
/animatedwebs:hero <idea>Replaces the current hero with a cinematic one
/animatedwebs:background <mood>Adds a cinematic video background to the hero
/animatedwebs:component <idea>Adds an animated UI component from the library, or generates one
/animatedwebs:style <mood>Applies a design system as tokens, theme and variables
/animatedwebs:designConnects your AnimatedWebs Design Studio workspace

Skills

SkillUsed when you ask to
animatedwebs-sitebuild a full website or landing page
animatedwebs-herocreate or upgrade a hero section
animatedwebs-backgroundsadd a video or motion background
animatedwebs-componentsadd animated UI components
animatedwebs-styleapply a visual style or design system
animatedwebs-designwork in Design Studio

MCP tools

The server at https://mcp.animatedwebs.com exposes 15 tools. Every tool carries MCP annotations (read-only, destructive, open-world) and an icon.

AreaTools
Searchsearch (templates, components, backgrounds, styles, creators; kind, filters, empty query browses, cursor pages) · list_categories
Templatesget_template · get_template_prompt · open_in_builder · request_template
UI Libraryget_component · get_component_source · generate_component · refine_component
Cinematic Backgroundsget_background
Stylesget_style_reference
Account and communityget_account (includes the Design workspace) · get_pricing · get_creator

Earlier versions listed search_templates, search_components, search_everything, search_backgrounds, search_styles, search_creators, list_component_categories and get_design_workspace. Those names still work when called but are no longer listed; see docs/MCP-TOOLS.md in the AnimatedWebs repository.

Featured templates

[Noesis AI Research Brain]
Noesis
WebGL constellation brain · AI / SaaS		[Orchid AI Creative Studio]
Orchid
Cinematic video hero · AI studio		[Amethyst Expeditions]
Amethyst
Cinematic video hero · Travel
[Chrome Capital Fintech]
Chrome Capital
Liquid chrome film · Fintech		[Aurora Lagoon Retreat]
Aurora Lagoon
Cinematic video hero · Wellness		[Atlas AI Agents Particle Scene]
Atlas
Morphing particle scene · AI agents

Browse all 1,400+ templates →

Plans

FreePro
Free templates and promptsUnlimitedUnlimited
Pro templates, backgrounds and component sourceUnlimited
AI component generations5 a day100 a day
Design Studio AI requests40 a day600 a day
Commercial licence for client workIncluded

Pro is $19 a month or $149 a year. One-time Prompt Packs and Lifetime access are also available. See animatedwebs.com/pricing.

Security and privacy

  • Sign-in uses OAuth in your browser. The plugin stores no passwords or API keys.
  • Tools that only read data are marked read-only, so your client can run them without extra prompts.
  • Your code stays in your environment. The server returns templates and references; it never reads your project files.

Details are in the Privacy Policy.

Support

Questions and account help: animatedwebs.com/contact. Bugs and template requests: open an issue. Security reports: see SECURITY.md. You can also request a template from inside Claude with the request_template tool.

Legal

AnimatedWebs templates, prompts, demos and media are licensed under the AnimatedWebs Terms. The plugin manifest and skills in this repository are provided for use with the AnimatedWebs service.

Release notes are in CHANGELOG.md and the repository licence is in LICENSE.md.

Claude and Claude Code are trademarks of Anthropic, PBC. Other names mentioned belong to their respective owners.

© 2026 AnimatedWebs

來源：README.md，提交 640eed7

工具

0
該伺服器需要登入，因此 SourceWeft 無法在沒有帳號的情況下讀取其工具，也未收錄。已連接帳號所能看到的內容可能因帳號及其權限而異。

版本歷史

2
  1. v1.2.2最新Nov 3, 2026
  2. v1.2.1Oct 12, 2026

評分

已滿足適用檢查項的 75%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具15 分

    請讓伺服器在無憑證時回應 tools/list，或發布可在沙箱中無憑證啟動的軟體包。

  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。