網頁動畫工具箱

Connect Remote server

claude mcp add --transport http web-motion https://tw-web-motion.panda198271.workers.dev/mcp

{
  "mcpServers": {
    "web-motion": {
      "url": "https://tw-web-motion.panda198271.workers.dev/mcp"
    }
  }
}

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

Settings > Connectors > Add custom connector
URL: https://tw-web-motion.panda198271.workers.dev/mcp

Tools 8 found in our last check

• generate_easing

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

• spring_to_css_linear

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

• generate_keyframes

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

• generate_gradient

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

• web_video_ffmpeg

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

• 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 的授權與適用情境。

Details

More browser automation servers See all

• Border

  Debug CORS: send the real preflight, get Chrome's exact error and the headers that fix it.

• Oya Browser

  Oya, the HIPAA-compliant agentic browser, over MCP: browse, run playbooks, hand a tab to a person.

• obscura

  Stealth headless fetch (obscura.openmcp.logicsrc.com)

• Browser Compat Mcp Server

  Browser compatibility and Baseline status for any web feature — offline, from bundled MDN data.

• Wield

  Websites as tools for AI: hosted for public reads, local in your own browser for logins.

• LabelQueue — Avery Label Dimensions, Margin & Bleed Layout Engine

  Look up exact Avery & standard sheet label dimensions, pitch, margins & print layout specs.