網頁動畫工具箱
CSS 漸層、動畫與網頁互動效果產生器。
Sollte ich dies verwenden
Qualität und Sicherheit
Befunde (5)
- LOWTool 'generate_easing' description lacks action verbin generate_easing
- LOWTool 'spring_to_css_linear' description lacks action verbin spring_to_css_linear
- LOWTool 'web_video_ffmpeg' description lacks action verbin web_video_ffmpeg
- LOWTool 'animation_a11y_checklist' description lacks action verbin animation_a11y_checklist
- LOWTool 'compare_animation_libraries' description lacks action verbin compare_animation_libraries
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"web-motion": {
"url": "https://tw-web-motion.panda198271.workers.dev/mcp"
}
}
}Remote-Endpunkte
https://tw-web-motion.panda198271.workers.dev/mcpstreamable-httpWas es kann
Tool-Inventar
Tools (8)
⚪generate_easing(name, x1, y1, x2, y2)
產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
Eingabe-Schema
{
"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() 緩動函式與建議時間。
Eingabe-Schema
{
"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
Eingabe-Schema
{
"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。
Eingabe-Schema
{
"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 語法。
Eingabe-Schema
{
"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。
Eingabe-Schema
{
"type": "object",
"properties": {}
}⚪animation_a11y_checklist
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
Eingabe-Schema
{
"type": "object",
"properties": {}
}⚪compare_animation_libraries
比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
Eingabe-Schema
{
"type": "object",
"properties": {}
}Community
Nachweis