網頁動畫工具箱
網頁動畫工具箱：CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。
我該用這個嗎
品質與安全性
發現項目（5）
- LOWTool 'generate_easing' description lacks action verb在 generate_easing 中
- LOWTool 'spring_to_css_linear' description lacks action verb在 spring_to_css_linear 中
- LOWTool 'web_video_ffmpeg' description lacks action verb在 web_video_ffmpeg 中
- LOWTool 'animation_a11y_checklist' description lacks action verb在 animation_a11y_checklist 中
- LOWTool 'compare_animation_libraries' description lacks action verb在 compare_animation_libraries 中
根據工具定義與協定合規性的自動化分析。
上下文成本
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"motion": {
"url": "https://motion.penguindriver.com/mcp"
}
}
}遠端端點
https://motion.penguindriver.com/mcpstreamable-http它能做什麼
工具清單
工具（8）
⚪generate_easing(name, x1, y1, x2, y2)
產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
輸入結構描述
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"x1": {
"type": "number"
},
"y1": {
"type": "number"
},
"x2": {
"type": "number"
},
"y2": {
"type": "number"
}
}
}⚪spring_to_css_linear(stiffness, damping, mass)
把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。
輸入結構描述
{
"type": "object",
"properties": {
"stiffness": {
"type": "number"
},
"damping": {
"type": "number"
},
"mass": {
"type": "number"
}
}
}⚪generate_keyframes(preset, duration, delay, iterations, easing)
產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing
輸入結構描述
{
"type": "object",
"properties": {
"preset": {
"type": "string"
},
"duration": {
"type": "number"
},
"delay": {
"type": "number"
},
"iterations": {
"type": "string"
},
"easing": {
"type": "string"
}
},
"required": [
"preset"
]
}⚪generate_gradient(colors, type, angle, animate, speed)
產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。
輸入結構描述
{
"type": "object",
"properties": {
"colors": {
"type": "string"
},
"type": {
"type": "string"
},
"angle": {
"type": "number"
},
"animate": {
"type": "boolean"
},
"speed": {
"type": "number"
}
},
"required": [
"colors"
]
}⚪web_video_ffmpeg(width, fps, quality, audio, input, ...)
產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。
輸入結構描述
{
"type": "object",
"properties": {
"width": {
"type": "number"
},
"fps": {
"type": "number"
},
"quality": {
"type": "string",
"enum": [
"high",
"balanced",
"small"
]
},
"audio": {
"type": "boolean"
},
"input": {
"type": "string"
},
"output": {
"type": "string"
}
}
}⚪animation_browser_support
網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。
輸入結構描述
{
"type": "object",
"properties": {}
}⚪animation_a11y_checklist
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
輸入結構描述
{
"type": "object",
"properties": {}
}⚪compare_animation_libraries
比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
輸入結構描述
{
"type": "object",
"properties": {}
}社群
證據