網頁動畫工具箱
Server Details
CSS 漸層、動畫與網頁互動效果產生器。
- Status
- Healthy
- Uptime
- 100.0% over the last 24 hours
- Last Tested
- Transport
- Streamable HTTP · MCP 2025-11-25
- URL
- ChatGPT
- –
- Claude
- –
TDQS
Scored across 8 tools
Most tools have clearly distinct purposes (a11y checklist, browser support, library comparison, generators for easing/gradient/keyframes, spring conversion, video encoding). The only mild overlap is between generate_easing and spring_to_css_linear, both producing easing functions, but descriptions make the distinction clear (cubic-bezier vs. spring physics to linear()).
Names are all snake_case and readable, but conventions are mixed: three use a verb_noun pattern (generate_easing, generate_gradient, generate_keyframes), while others are noun phrases (animation_a11y_checklist, animation_browser_support) or descriptive (spring_to_css_linear, web_video_ffmpeg). This is not a consistent verb_noun pattern throughout.
Eight tools is well-scoped for a web animation toolbox, covering generation, checks, comparisons, and conversion without redundancy. Each tool earns its place, and the count sits comfortably in the ideal 3–15 range.
The surface covers core web animation tasks: accessibility, browser support, library selection, CSS keyframes/easing/gradient generation, spring conversion, and video compression. Minor gaps exist, such as no dedicated generator for scroll-driven animations or View Transitions code (only mentioned in browser support), but agents can work around these.
Available Tools
8 toolsanimation_a11y_checklistAInspect
網頁動畫無障礙與效能檢查清單(WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP),附全站減少動態 CSS。
Inputs: no named parameters.
animation_browser_supportBInspect
網頁動畫功能瀏覽器支援版本:View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。
Inputs: no named parameters.
compare_animation_librariesAInspect
比較網頁動畫工具:CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
Inputs: no named parameters.
generate_easingBInspect
產生 CSS cubic-bezier 緩動曲線:用名稱(easeOutCubic、easeInOutBack、materialStandard 等 32 種)或四個控制點,回傳 CSS、Web Animations API 範例與取樣點。
Inputs: x1, x2, y1, y2, +1 more.
generate_gradientCInspect
產生 CSS 漸層(linear、radial、conic),可選流動動畫與漸層文字。colors 用逗號分隔 HEX。
Inputs: colors (required), type, angle, speed, +1 more.
generate_keyframesCInspect
產生 CSS @keyframes 動畫(含減少動態模式)。preset:fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing
Inputs: preset (required), delay, easing, duration, +1 more.
spring_to_css_linearBInspect
把彈簧物理參數(stiffness、damping、mass)模擬後轉成 CSS linear() 緩動函式與建議時間。
Inputs: mass, damping, stiffness.
web_video_ffmpegCInspect
產生網頁背景影片壓縮的 ffmpeg 指令(H.264、VP9、AV1、poster)與 HTML video 語法。
Inputs: fps, audio, input, width, +2 more.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Related MCP Connectors
網頁動畫工具箱:CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。
台灣勞保、健保、勞退、職災與二代健保補充保費試算,含薪資扣繳、破月與勞保老年給付。資料取自主管機關公告,對官方範例逐位元驗證。
台灣國定假日、補班日、發票對獎、彩券開獎對獎與油價查詢。
597 motion/3D UI patterns as ready HTML/CSS/JS, served over MCP. The entire library is free.
Related MCP Servers
- AlicenseAqualityDmaintenanceA static code generation server for GSAP animations. It provides 18 tools to generate tween, timeline, easing, plugin effects (ScrollTrigger, SplitText, MorphSVG, etc.), and developer utilities without any GSAP runtime dependency.18MIT
- AlicenseNot gradedqualityDmaintenance745+ CSS3 animations and 9,000+ real SVG icons (Lucide, Heroicons, Tabler, Bootstrap) for AI coding agents. Zero-clone setup via npx animotion-mcp. 10 MCP tools including search_animations, get_icon, suggest_animation, compose_animation, and more.13MIT
- AlicenseNot gradedqualityDmaintenanceMCP server for CSS spring animations, bounce easing, cubic-bezier visualizations, and Motion code search.MIT
- AlicenseBqualityDmaintenanceEnables comprehensive color manipulation, conversion between 22+ formats (HEX, RGB, HSL, CMYK, LAB, etc.), palette generation, gradient creation, and accessibility compliance checking. Supports framework-specific outputs for CSS, Swift, Android, Flutter, and Tailwind with high-precision conversions and visualization capabilities.25MIT
Glama MCP Gateway
Add one secure layer between your agents and this server.