| 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,\npick suitable recipes from the library, and produce the page with restrained, accessible motion.\n"} |
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 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.
- 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.
- 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). 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
(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 (official GreenSock, MIT) for real high-perf GSAP codegen.
- Reproduce a live WebGL / shader / gaussian-splatting effect ("复刻这个 WebGL 效果" / "高斯泼溅")
→ [on-demand]
skills/web-shader-extractor. See WEBGL.md.
- Extract a site's design tokens →
design.md ("扒这个网站的配色/字体") → [on-demand]
skills/web-to-design-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 smallest set that satisfies the request. Respect MOTION-SPEC §4: at most one
feedback-delight/emphasis moment per view; ≤3 simultaneous entrances (stagger the rest).
- Check each candidate's
avoid_when against the actual context. If it applies, drop it.
- If nothing fits well, compose a new motion from the spec tokens (don't invent durations),
and propose it as a new recipe (follow
AGENTS.md golden path) so the library grows.
3. Produce
- Apply the chosen recipe implementations into the user's artifact (HTML/CSS/JS, or framework
equivalent). Pull the recipe's
implementations.files.
- Keep durations/easings from the recipe (already spec-aligned). Wire the markup hooks
(e.g.
data-like-burst, scroll observers) as documented in each recipe's SKILL.md.
- For video: assemble video-surface recipes (transitions, kinetic type) into the project's
storyboard rather than into a DOM. Keep transitions in the
cinematic band; avoid PPT-like
density (few words, large type, one idea per shot).
4. Verify against the definition of done
Run MOTION-SPEC §9 as a checklist before declaring done:
- Motion serves feedback / continuity / attention.
- Timing + easing from tokens; within the restraint budget.
- Transforms/opacity only; cleans up after itself.
- Working
prefers-reduced-motion fallback.
5. Teach, briefly
Tell the user why you chose what you chose, and call out anything you deliberately left out for
restraint. This is part of the product — you are also raising their motion literacy.
Output expectations
- A working artifact (open
preview.html-style result or the edited project files).
- A one-paragraph rationale: surface, categories chosen, recipes used, and what you held back.
- If you created a new motion, offer to save it as a recipe.
Notes
- This skill is tool-agnostic. The user may have installed it via
motion add motion-anything
into any agent (Claude Code, Cursor, Codex, …). Behave identically everywhere.
- Never auto-play celebratory motion. Delight is earned by user action.
