網頁動畫工具箱

dev.workers.panda198271.tw-web-motion由 tw-web-motion.panda198271.workers.dev 發布官方發布者v1.0.0更新於 Oct 24, 2026

CSS 漸層、動畫與網頁互動效果產生器。

已驗證Streamable HTTP可網頁執行

概覽

網頁動畫工具箱 的託管 MCP 服務（tw-web-motion.panda198271.workers.dev），由 tw-web-motion.panda198271.workers.dev 發布；無需登入；Streamable HTTP；8 個工具。

暫無 AI 概覽：以下資訊來自註冊中心條目和服務本身。

發布者
tw-web-motion.panda198271.workers.dev
端點
tw-web-motion.panda198271.workers.dev
最近檢查

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 網頁動畫工具箱，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

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

交給代理程式安裝

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

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

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

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "dev-workers-panda198271-tw-web-moti-j1t4": {
      "type": "http",
      "url": "https://tw-web-motion.panda198271.workers.dev/mcp"
    }
  }
}

工具

8

generate_easing

產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。

輸入參數x1x2y1y2name

spring_to_css_linear

把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。

輸入參數massdampingstiffness

generate_keyframes

產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing

輸入參數delayeasingpreset必填durationiterations

generate_gradient

產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。

輸入參數typeanglespeedcolors必填animate

web_video_ffmpeg

產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。

輸入參數fpsaudioinputwidthoutputquality

animation_browser_support

網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。

無需輸入參數。

animation_a11y_checklist

網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。

無需輸入參數。

compare_animation_libraries

比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。

無需輸入參數。

版本歷史

1
  1. v1.0.0最新Sep 27, 2026

評分

已滿足適用檢查項的 67%

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

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

    請在註冊中心條目中填寫至少 40 個字元的描述。

  • 圖示10 分
  • 文件15 分

    請宣告包含 README 的 GitHub 儲存庫，或在 OAuth 受保護資源後設資料中提供 resource_documentation。

  • 授權條款不適用

    託管服務按其提供方的條款使用，因此這裡不要求授權條款。此檢查項不計入百分比。