網頁動畫工具箱
網頁動畫工具箱：CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。
사용해야 할까요
품질 및 안전성
발견 사항 (5)
- LOWTool 'generate_easing' description lacks action verbgenerate_easing에서
- LOWTool 'spring_to_css_linear' description lacks action verbspring_to_css_linear에서
- LOWTool 'web_video_ffmpeg' description lacks action verbweb_video_ffmpeg에서
- LOWTool 'animation_a11y_checklist' description lacks action verbanimation_a11y_checklist에서
- LOWTool 'compare_animation_libraries' description lacks action verbcompare_animation_libraries에서
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`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": {}
}커뮤니티
증거