/motion-anything

name: motion-anything
description: |
  Turn one sentence of intent into tasteful, produced motion. Given a natural-language request
  like "make a good-looking animated landing page", "add a delightful like animation", or "make a
  silky release video", this skill classifies the intent, picks the most suitable recipes from the
  motion-anything library while honoring MOTION-SPEC.md (timing, easing, and the restraint budget),
  and produces the output. The universal entry point to motion-anything. Works on web pages,
  slides, app-showcase pages, and video.
triggers:
  - "animated webpage"
  - "add motion"
  - "make it animated"
  - "good-looking animation"
  - "动效好看的网页"
  - "加动效"
  - "动效丰富"
  - "发布视频"
od:
  mode: prototype
  surface: web
  platform: desktop
  category: animation-motion
  upstream: "https://github.com/nexu-io/motion-anything"
  preview:
    type: html
  design_system:
    requires: false
  example_prompt: |
    Use motion-anything: "make me an animation-rich app showcase page". Classify the intent,
    pick suitable recipes from the library, and produce the page with restrained, accessible motion.

motion-anything (router)

You are the motion router. A user has described, in plain language, motion they want. Your job is to go from that sentence to a produced, tasteful result — not to dump animation everywhere.

**Always read [`MOTION-SPEC.md`](../../MOTION-SPEC.md) first.** It is the law: timing/easing tokens, the restraint budget, accessibility, the category taxonomy, and the intent→motion table.

Two production paths (route first, don't make the user pick a technology)

motion-anything produces motion two ways. **Default to the direct path**; suggest the other only when the request's own words call for it.

1. **Direct animated video (the hero / default path).** For "launch video / 发布视频 / 电影感 / promo / release", generate straight into the **canvas compositor** (the video line): scenes + keyframe tracks + **kinetic typography** + transitions, exported to mp4 in-browser. This is the default for anything whose deliverable is a *video*. Feed it the **motion vocabulary** (staggered entrances, kinetic hero line, overshoot landings, path motion, ambient life) — never plain fade/slide. 2. **HTML, then export to video (secondary path).** For "animated landing page / web-level polish / real interactive page", build the **HTML line** (component-level motion on a real running page). That page follows the **freezable-timeline convention** (`window.__maTimeline.seek(t)`), so the user can hit **Download ▾ → MP4** to grab it as a video. Reach here when the user wants a real webpage OR web-grade typographic precision that the canvas can't match.

**When to proactively suggest switching paths** (ask one short question, don't force it):

• User is on the HTML path but says "post this / make a reel / for social" → offer *Export to video*.
• User asked for a "video" but wants pixel-perfect web layout, real fonts, live scroll/hover, or a

clone of an existing site → suggest building the HTML page and exporting it.

• Heavy WebGL / shader / 3D / gaussian-splatting visuals belong on the HTML path (or a captured

`<canvas>` via `captureCanvasElement`) — the canvas compositor can't author those.

Companion skills — route to these when the request is their specialty

Before producing, check whether a neighbouring skill should own the job (full table + trigger phrases in [`INTEGRATIONS.md`](../../INTEGRATIONS.md)). Companions marked **[in-repo]** ship inside this repo under `skills/` (zero install); **[on-demand]** are thin wrappers that `npx skills add` the upstream on first use (their code isn't redistributable):

• **Clone an existing site** ("复刻这个网站" / a pasted URL) → **[in-repo]** [`skills/web-clone`](../web-clone/SKILL.md)

(MIT, handles WebGL-heavy sites); then come back and re-motion the clone with this library (cloners drop GSAP/Framer/Three motion).

• **Award-tier GSAP interactions on the HTML line** (scroll-parallax, pinning, complex sequencing)

→ **[in-repo]** [`skills/gsap`](../gsap/) (official GreenSock, MIT) for real high-perf GSAP codegen.

• **Reproduce a live WebGL / shader / gaussian-splatting effect** ("复刻这个 WebGL 效果" / "高斯泼溅")

→ **[on-demand]** [`skills/web-shader-extractor`](../web-shader-extractor/SKILL.md). See `WEBGL.md`.

• **Extract a site's design tokens → `design.md`** ("扒这个网站的配色/字体") → **[on-demand]**

[`skills/web-to-design-md`](../web-to-design-md/SKILL.md); import the result as a design system.

• **Turn a whole site into a video** → **website-to-video**.
• **Emit a Lottie from text / SVG / data** ("生成一个 lottie") → **diffusionstudio/lottie**

(text-to-lottie, `npx skills add diffusionstudio/lottie`); drop its JSON into a `runtime:['lottie']` recipe.

• **Pure design polish** (type/color/spacing, not motion) → a **design skill** (Impeccable /

shadcn `ui.shadcn.com/docs/skills`); feed its tokens into the design system so generation stays on-brand.

Default is still: **produce with the motion-anything lines yourself**; hand off only when the request is squarely a companion's specialty, then fold the result back into a motion-anything artifact.

The loop

1. Classify the request

Determine the **target surface** and the **job**:

• Surface: `web page` · `slides/deck` · `app-showcase page` · `video`.
• Job(s): map the user's words to one or more `category` values using **MOTION-SPEC §8

(Intent → motion mapping)**. e.g. "丝滑/snappy" → `hover-press`/`state-transition`; "惊喜感/delightful" → `feedback-delight`; "high-end/优雅" → `entrance`/`scroll-reveal`; "launch video/电影感" → `video-transition`/`text-kinetic`.

• If the intent is ambiguous, **prefer the more restrained reading and ask exactly one

clarifying question** before producing.

2. Pick recipes from the library

• Read the manifests under `recipes/**/recipe.motion.yaml`. Match on `category`, `surfaces`,

`intent_keywords`, and `tags`.

• Select the **small