Skip to content

網頁動畫工具箱

by penguindriver.com · remote · no sign-in to list tools · v1.0.0 · published by com.penguindriver

網頁動畫工具箱：CSS 動畫、easing、影片壓縮與互動設計。台灣繁體中文 MCP 工具。

Changes · 6
CompareRegistry entry

8 tools: 6 change things and 2 only read.

Scanned Oct 21, 2026

No check matched anything in the tool definitions. No finding is not a safety guarantee. How the checks work.

claude mcp add --transport http motion https://motion.penguindriver.com/mcp

Tools

Open a tool for its reasons and full description. Descriptions are the publisher's own words, shown as they are.

8 tools

Changes things 6Claude Code: ask
  • animation_a11y_checklist網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。No findings

    Why it is in this group

    • Nothing in its name or description says what it does, so it is counted as a write.
    Description, as the server wrote it
    網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
  • generate_easing產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。No findings

    Why it is in this group

    • The name "generate_easing" says "generate": a word for a change.
    Description, as the server wrote it
    產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
  • generate_gradient產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。No findings

    Why it is in this group

    • The name "generate_gradient" says "generate": a word for a change.
    Description, as the server wrote it
    產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。
  • generate_keyframes產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typingNo findings

    Why it is in this group

    • The name "generate_keyframes" says "generate": a word for a change.
    Description, as the server wrote it
    產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing
  • spring_to_css_linear把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。No findings

    Why it is in this group

    • Nothing in its name or description says what it does, so it is counted as a write.
    Description, as the server wrote it
    把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。
  • web_video_ffmpeg產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。No findings

    Why it is in this group

    • Nothing in its name or description says what it does, so it is counted as a write.
    Description, as the server wrote it
    產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。
Only reads 2Claude Code: allow
  • animation_browser_support網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。No findings

    Why it is in this group

    • The description's first verb is "view": a word for reading.
    Description, as the server wrote it
    網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。
  • compare_animation_libraries比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。No findings

    Why it is in this group

    • The name "compare_animation_libraries" says "compare": a word for reading.
    Description, as the server wrote it
    比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。

This is not a safety rating, and no finding is not a safety guarantee. The groups and findings come from fixed checks of the tool definitions the server returned on the date shown, not from its code or what it does when called. How the checks work.

Install

Pinned to version 1.0.0. Values in angle brackets are yours to fill in.

claude mcp add --transport http motion https://motion.penguindriver.com/mcp

Run in a terminal.

Claude Code permissions

Allow the reads, ask before a change, deny the deletes. Paste into .claude/settings.json.

.claude/settings.json
{
  "permissions": {
    "allow": [
      "mcp__motion__animation_browser_support",
      "mcp__motion__compare_animation_libraries"
    ],
    "ask": [
      "mcp__motion__generate_easing",
      "mcp__motion__spring_to_css_linear",
      "mcp__motion__generate_keyframes",
      "mcp__motion__generate_gradient",
      "mcp__motion__web_video_ffmpeg",
      "mcp__motion__animation_a11y_checklist"
    ],
    "deny": []
  }
}

Tools that only read are allowed, tools that change things ask first, tools that delete or cancel are denied. It assumes the server is installed as motion. Review it before you use it.