Agent Skills
› nexu-io/motion-anything
› motion-anything
motion-anything
GitHub将自然语言意图转化为精美动效的调度中心。依据MOTION-SPEC规范，自动选择直接视频合成或HTML导出路径，处理着陆页、幻灯片及视频需求，并智能路由至克隆或GSAP等专属技能，确保动效克制且高质量。
Trigger Scenarios
用户请求生成动画效果（如落地页、视频）
需要判断使用视频合成还是HTML路径
请求涉及网站复刻或复杂交互
Install
npx skills add nexu-io/motion-anything --skill motion-anything -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/github.com\/nexu-io\/motion-anything",
"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."
},
"name": "motion-anything",
"triggers": [
"animated webpage",
"add motion",
"make it animated",
"good-looking animation",
"动效好看的网页",
"加动效",
"动效丰富",
"发布视频"
],
"description": "Turn one sentence of intent into tasteful, produced motion. Given a natural-language request\nlike \"make a good-looking animated landing page\", \"add a delightful like animation\", or \"make a\nsilky release video\", this skill classifies the intent, picks the most suitable recipes from the\nmotion-anything library while honoring MOTION-SPEC.md (timing, easing, and the restraint budget),\nand produces the output. The universal entry point to motion-anything. Works on web pages,\nslides, app-showcase pages, and video.\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>viacaptureCanvasElement) — 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. SeeWEBGL.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 aruntime:['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
categoryvalues 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 oncategory,surfaces,intent_keywords, andtags. - Select the smallest set that satisfies the request. Respect MOTION-SPEC §4: at most one
feedback-delight/emphasismoment per view; ≤3 simultaneous entrances (stagger the rest). - Check each candidate's
avoid_whenagainst 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.mdgolden 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'sSKILL.md. - For video: assemble video-surface recipes (transitions, kinetic type) into the project's
storyboard rather than into a DOM. Keep transitions in the
cinematicband; 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-motionfallback.
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-anythinginto any agent (Claude Code, Cursor, Codex, …). Behave identically everywhere. - Never auto-play celebratory motion. Delight is earned by user action.
Version History
- b016900 Current 2026-07-11 17:12
Dependencies
-
suggested
diffusionstudio/lottie
