網頁動畫工具箱
網頁動畫工具箱：CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。
¿Debería usar esto?
Calidad y seguridad
Hallazgos (5)
- LOWTool 'generate_easing' description lacks action verben generate_easing
- LOWTool 'spring_to_css_linear' description lacks action verben spring_to_css_linear
- LOWTool 'web_video_ffmpeg' description lacks action verben web_video_ffmpeg
- LOWTool 'animation_a11y_checklist' description lacks action verben animation_a11y_checklist
- LOWTool 'compare_animation_libraries' description lacks action verben compare_animation_libraries
Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.
Costo de contexto
Este es el número aproximado de tokens que se consumen cada vez que las herramientas del servidor se cargan en el contexto de un modelo. Los recuentos más altos reducen la atención disponible para otras tareas.
Instalar
Instalación con un clic
Agrega esto a tu archivo `claude_desktop_config.json`:
{
"mcpServers": {
"motion": {
"url": "https://motion.penguindriver.com/mcp"
}
}
}Puntos de conexión remotos
https://motion.penguindriver.com/mcpstreamable-httpQué puede hacer
Inventario de herramientas
Herramientas (8)
⚪generate_easing(name, x1, y1, x2, y2)
產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
Esquema de entrada
{
"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() 緩動函式與建議時間。
Esquema de entrada
{
"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
Esquema de entrada
{
"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。
Esquema de entrada
{
"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 語法。
Esquema de entrada
{
"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。
Esquema de entrada
{
"type": "object",
"properties": {}
}⚪animation_a11y_checklist
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
Esquema de entrada
{
"type": "object",
"properties": {}
}⚪compare_animation_libraries
比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
Esquema de entrada
{
"type": "object",
"properties": {}
}Comunidad
Evidencia