Agent skill

Motion Web

by feitangyuan in feitangyuan/motion-web

Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

CC-BY-NC-4.0Auto-check passedGame Development

Install Motion Web

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .claude/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .agents/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .cursor/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .gemini/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .github/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add feitangyuan/motion-web --skill motion-web -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install feitangyuan/motion-web motion-web --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "motion-web" agent skill from https://github.com/feitangyuan/motion-web/tree/main into .opencode/skills/motion-web/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-web", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: motion-web
GitHub stars: 668
Token cost: ~18k tokens
SKILL.md length: 9,654 words
Files: 96 (incl. scripts, references, assets)
Skills in repo: 1
Repo updated: Sep 15, 2026
First seen: Oct 7, 2026
Licence: CC-BY-NC-4.0

At a glance

Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

Works in 5 steps: Motion concept and interaction… → Page design — structure, type scale,… → The page as a built artifact — sections… → …
Animated landing pages
SKILL.md covers Agentic Intent Detection…, Video Reference Protocol (硬规则…, Replicate Mode (复刻模式) and Freeform Build Mode (When User…, plus 10 more sections
Calls python3; reaches a-reference.com

What it does

Motion Web is an agent skill from feitangyuan/motion-web. Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via Three.js/R3F. Use for animated landing pages, creative portfolios, product showcases, WebGL-lite scenes, and motion audits. Also use when tuning interaction handfeel (手感差/太生硬/不跟手), replicating motion from a video or URL reference (复刻), building 3D depth from flat image assets (伪3D/抠图), diagnosing dead scroll-timeline…

Its SKILL.md is about 18k tokens, which your agent loads only when the skill is triggered. The skill folder holds 97 other files, including scripts, reference files and assets (for example `README.md`).

It sits in Game Development, covering 3D graphics and WebGL, Web animation and motion and Landing pages. It works with GSAP, Motion and Three.js. The repository describes itself as: Build motion-first, high-touch creative websites on vanilla Three.js / Canvas 2D / WebGL / CSS. A Claude Agent Skill with real physics and automated verification.

When your agent uses it

Animated landing pages
Creative portfolios
Product showcases
WebGL-lite scenes

Example prompts

“/motion-web”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

Motion concept and interaction choreography
Page design — structure, type scale, palette, spacing rhythm, the thing it looks like before anything moves
The page as a built artifact — sections and their copy, the component vocabulary, the token layer,
Light 3D or canvas only when it strengthens the page
Performance, accessibility, reduced-motion fallbacks

What it can do on your machine

Read from SKILL.md and the folder at commit 5f4e40f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/, which the agent can run.
Shell commands in SKILL.md call:
- python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- a-reference.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Motion Web loads about 18k tokens when it runs, and up to ~110k if it reads all its reference files. Until then it costs about 236 tokens; SKILL.md has 9,654 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~236
When it runs · the whole SKILL.md, loaded when a task matches: ~18k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~110k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

Its licence (CC-BY-NC-4.0) doesn't allow us to republish the file, so here is its outline and opening line. It has 9,654 words (~18,128 tokens).

“Motion-first creative web. The skill handles all phases: reference → concept → spec → build → audit.”

— opening of SKILL.md by feitangyuan, CC-BY-NC-4.0

name: motion-web

Outline of SKILL.md

motion-web
Agentic Intent Detection (CRITICAL — Read This First)
Signal → Intent Map
Video Reference Protocol (硬规则 — 不许猜)
Replicate Mode (复刻模式)
Replicate Execution Path
Replicate ≠ Copy
Freeform Build Mode (When User Gives Zero Direction)
Freeform Action Path (Runtime Creative Loop — 创造发生在执行中，不在文档里)
Document / Article Drop
Modes (for explicit user direction)
Build Order (Always Follow This)
Load Only What You Need
Core Rules
Data
Cases
Reference Files
Scripts
Output Contracts

Read the full SKILL.md on GitHub

Files

SKILL.md and 95 other files (scripts, references, assets) in the repository root of feitangyuan/motion-web.

SKILL.md
.gitignore
LICENSE
README.md
assets/cases/char-curtain.gif
assets/cases/char-curtain.png
assets/cases/char-curtain.webp
assets/cases/ink-crowd.gif
assets/cases/ink-crowd.png
assets/cases/ink-crowd.webp
assets/cases/lyre-crows.gif
assets/cases/lyre-crows.png
assets/cases/lyre-crows.webp
assets/cases/press-stack.gif
assets/cases/press-stack.png
assets/cases/press-stack.webp
assets/cases/string-clock.gif
assets/cases/string-clock.png
assets/cases/string-clock.webp
… and 77 more

Open the folder on GitHubat commit 5f4e40f

Compare with similar skills

Motion Web next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Motion Web compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Motion Web this skillfeitangyuan/motion-web	668	—	~18k	Automated safety check: Pass	CC-BY-NC-4.0	23 days ago
Inspira UIsecondsky/claude-skills	227	—	~2.6k	Automated safety check: Pass	MIT	10 days ago
Auteuragiwhitelist/auteur	1k	—	~5k	Automated safety check: Pass	MIT	2 mo ago
Oma Designfirst-fluke/oh-my-agent	1.3k	—	~2.9k	Automated safety check: Pass	MIT	today
Build Awwwards Quality Sitesnirholas/three.ws	227	1 repos	~1.8k	Automated safety check: Pass	Apache-2.0	today
Business Motion Filmechris6/motion-video-kit	1.1k	—	~1.8k	Automated safety check: Pass	MIT	10 days ago

Similar skills

Inspira UI
secondsky/claude-skills
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.
227 GitHub stars~2.6k tokensUpdated 10 days ago
Frontend & DesignAuto-check passed
Auteur
agiwhitelist/auteur
Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…
1k GitHub stars~5k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
1.3k GitHub stars~2.9k tokensUpdated today
Frontend & DesignAuto-check passed
Build Awwwards Quality Sites
nirholas/three.ws
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one…
227 GitHub starsUsed in 1 repo~1.8k tokens
Game DevelopmentAuto-check passed
Business Motion Film
echris6/motion-video-kit
Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective…
1.1k GitHub stars~1.8k tokensUpdated 10 days ago
Game DevelopmentAuto-check passed
Scroll World Storytelling
nirholas/three.ws
Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js…
227 GitHub starsUsed in 1 repo~3k tokens
Frontend & DesignAuto-check passed

Works with

Questions about Motion Web

What does Motion Web do?

Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…. Motion Web is an agent skill from feitangyuan/motion-web.js/R3F.

When should I use Motion Web?

Motion Web fits situations like: animated landing pages; creative portfolios; product showcases; webGL-lite scenes.

How do I install Motion Web in Claude Code?

Run `npx skills add feitangyuan/motion-web --skill motion-web -a claude-code`. Or copy the skill folder (the feitangyuan/motion-web repository) into .claude/skills/motion-web in your project. Claude Code loads it when a task matches its description.

How do I install Motion Web in Codex?

Run `npx skills add feitangyuan/motion-web --skill motion-web -a codex`. Or copy the skill folder (the feitangyuan/motion-web repository) into .agents/skills/motion-web in your project. Codex loads it when a task matches its description.

Can I use Motion Web in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add feitangyuan/motion-web --skill motion-web -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-web, .gemini/skills/motion-web, .github/skills/motion-web and .opencode/skills/motion-web in your project.

What does Motion Web need to run?

Going by SKILL.md and its folder, Motion Web needs the command-line tools its instructions call (python3).

Does Motion Web access the network?

SKILL.md names 1 domain. In commands or code: a-reference.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Motion Web safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Motion Web use?

Motion Web is published under the CC-BY-NC-4.0 licence (from the LICENSE file in the skill folder).

How many tokens does Motion Web use?

About 18k tokens (SKILL.md is roughly 73k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 91k tokens, read only when the agent opens those files.

What are the alternatives to Motion Web?

Skills that share tags, products or a category with Motion Web: Inspira UI (secondsky/claude-skills, 227 stars), Auteur (agiwhitelist/auteur, 1k stars), Oma Design (first-fluke/oh-my-agent, 1.3k stars) and Build Awwwards Quality Sites (nirholas/three.ws, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Motion Web?

feitangyuan (a GitHub user) maintains it in feitangyuan/motion-web, which has 668 GitHub stars. The repository was last updated on September 15, 2026.

Source: feitangyuan/motion-web on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Motion Web

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Files

Compare with similar skills

Similar skills

Inspira UI

Auteur

Oma Design

Build Awwwards Quality Sites

Business Motion Film

Scroll World Storytelling

Related

Questions about Motion Web