網頁動畫工具箱

com.penguindriverPublished by penguindriver.comOfficial publisherv1.0.0Updated Oct 24, 2026

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

The publisher's own server: 台灣 AI 工具價格

VerifiedStreamable HTTPWeb executableDeveloper Tools Media & Design

Server details

Identifier: com.penguindriver/motion
Transport: Streamable HTTP
Runtime: Web executable
Trust: Verified
Published: Sep 28, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified that this server's namespace belongs to penguindriver.com, which also runs its endpoint. That identifies the publisher; it does not make the server's tools safe.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/com.penguindriver%2Fmotion.svg)](https://sourceweft.com/mcp/com.penguindriver%2Fmotion?utm_source=readme&utm_medium=badge)

Overview

AI-generated overview

A remote MCP server that generates CSS animation code — easings, keyframes, gradients and spring-to-linear conversions — and offers web animation reference and,

What you can do: Generate CSS easing curves from named presets or four control points, with Web Animations API examples and sample points, and convert spring physics parameters into CSS linear() easing with suggested timing. Produce CSS @keyframes animations from presets such as fadeIn, slideInLeft, pulse or typing, including reduced-motion variants. Build linear, radial and conic CSS gradients, optionally with flowing animation and gradient text. Emit ffmpeg commands and HTML video markup for compressing web background videos. Look up browser support for animation features, run an accessibility and performance checklist, and compare animation libraries.
When to use it: Useful when building or reviewing web animation: picking easing curves, writing keyframes or gradients, preparing background video, checking browser support and reduced-motion accessibility, or choosing between CSS, GSAP, Motion and similar libraries.
Requirements: A remote streamable HTTP endpoint; no package installation, environment variables or headers are declared. No authentication is declared.

Before you install

The tools return generated code and guidance rather than changing anything, so review output before using it. No credentials, payments or data writes are indicated.

Installation

In SourceWeft

Open 網頁動畫工具箱 in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/com.penguindriver%2Fmotion/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "com-penguindriver-motion-7qwp": {
      "type": "http",
      "url": "https://motion.penguindriver.com/mcp"
    }
  }
}

Tools

generate_easing

產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。

Parametersx1x2y1y2name

spring_to_css_linear

把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。

Parametersmassdampingstiffness

generate_keyframes

產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing

Parametersdelayeasingpresetrequireddurationiterations

generate_gradient

產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。

Parameterstypeanglespeedcolorsrequiredanimate

web_video_ffmpeg

產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。

Parametersfpsaudioinputwidthoutputquality

animation_browser_support

網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。

Takes no parameters.

compare_animation_libraries

比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。

Takes no parameters.

Version history

v1.0.0LatestSep 28, 2026

Score

83% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 daysRequired25 pts
Auth declaredRequired10 pts
Tools listedRequired15 pts
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
Declare a GitHub repository with a README, or serve resource_documentation in the OAuth protected-resource metadata.
LicenseNot applicable
A hosted service is used under its provider's terms, so no license is expected here. This check is left out of the percentage.