網頁動畫工具箱：CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
This tool takes no arguments.
This tool isn't marked read-only, so it may change something on the server or in an account you connected.
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
No arguments.
{
"type": "object",
"properties": {}
}網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。
No arguments.
{
"type": "object",
"properties": {}
}比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
No arguments.
{
"type": "object",
"properties": {}
}產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
| Argument | Type | Description |
|---|---|---|
| x1 | number | |
| x2 | number | |
| y1 | number | |
| y2 | number | |
| name | string |
{
"type": "object",
"properties": {
"x1": {
"type": "number"
},
"x2": {
"type": "number"
},
"y1": {
"type": "number"
},
"y2": {
"type": "number"
},
"name": {
"type": "string"
}
}
}產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。
| Argument | Type | Description |
|---|---|---|
| type | string | |
| angle | number | |
| speed | number | |
| colors* | string | |
| animate | boolean |
{
"type": "object",
"required": [
"colors"
],
"properties": {
"type": {
"type": "string"
},
"angle": {
"type": "number"
},
"speed": {
"type": "number"
},
"colors": {
"type": "string"
},
"animate": {
"type": "boolean"
}
}
}產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing
| Argument | Type | Description |
|---|---|---|
| delay | number | |
| easing | string | |
| preset* | string | |
| duration | number | |
| iterations | string |
{
"type": "object",
"required": [
"preset"
],
"properties": {
"delay": {
"type": "number"
},
"easing": {
"type": "string"
},
"preset": {
"type": "string"
},
"duration": {
"type": "number"
},
"iterations": {
"type": "string"
}
}
}把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。
| Argument | Type | Description |
|---|---|---|
| mass | number | |
| damping | number | |
| stiffness | number |
{
"type": "object",
"properties": {
"mass": {
"type": "number"
},
"damping": {
"type": "number"
},
"stiffness": {
"type": "number"
}
}
}產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。
| Argument | Type | Description |
|---|---|---|
| fps | number | |
| audio | boolean | |
| input | string | |
| width | number | |
| output | string | |
| quality | string |
{
"type": "object",
"properties": {
"fps": {
"type": "number"
},
"audio": {
"type": "boolean"
},
"input": {
"type": "string"
},
"width": {
"type": "number"
},
"output": {
"type": "string"
},
"quality": {
"enum": [
"high",
"balanced",
"small"
],
"type": "string"
}
}
}