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 stretches, mixing scene audio, auditing discoverability (点不开/没人会发现), building headless ver
Install
npx skills add feitangyuan/motion-web --skill motion-webgit clone --depth 1 https://github.com/feitangyuan/motion-web.git /tmp/motion-web
mkdir -p ~/.claude/skills
cp -r /tmp/motion-web/. ~/.claude/skills/motion-webPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# motion-web Motion-first creative web. The skill handles all phases: reference → concept → spec → build → audit. **This skill builds whole web pages.** Motion is what makes them good; it is not the whole job. A request with no motion in it at all — "做个落地页", "帮我把这个官网做出来" — is still this skill, and the deliverable is a finished site: stack, tokens, sections, copy, components, states, meta, deploy. **Priority order — 1 and 2 are co-equal:** 1. Motion concept and interaction choreography 2. **Page design** — structure, type scale, palette, spacing rhythm, the thing it looks like before anything moves 3. **The page as a built artifact** — sections and their copy, the component vocabulary, the token layer, the states off the happy path (`page-blueprints.md`, `components.md`, `project-setup.md`, `production-polish.md`) 4. Light 3D or canvas only when it strengthens the page 5. Performance, accessibility, reduced-motion fallbacks **A great mechanic on a default-looking page is a failed page.** Motion is the *advantage*, not the excuse. The most common failure of this skill is shipping one clever interaction glued onto a layout nobody designed — if the page would embarrass you with the motion switched off, it is not done, and no amount of spring tuning fixes it. Design is not step 2 in time; it is a second thing that must also be true at the end. → `references/page-design.md`, `references/design-slop.md`
Details
- Skill name
motion-web- Repository
- feitangyuan/motion-web
- Repo updated
- 15 September 2026
FAQ
What does the Motion Web skill 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 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 stretches, mixing scene audio, auditing discoverability (点不开/没人会发现), building headless ver
How do I install the Motion Web skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add feitangyuan/motion-web --skill motion-web. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Motion Web popular?
It lives in feitangyuan/motion-web, which has 819 GitHub stars and 62 forks.
Related skills
YouTube Transcript
568michalparkola/tapestry-skills
Fetch transcripts from YouTube videos. Extract and work with video captions and transcripts.
Guizang Product Video Skill
890op7418/guizang-product-video-skill
制作代码驱动的软件产品宣传片和版本更新片（product promo、release notes video、changelog promo）。从真实功能和产品设计出发定方向，用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片，每支片子的视觉手法都从产品本身推导，不套模板。
Soul
702aeonfun/soul.md
Embody this digital identity. Read SOUL.md first, then STYLE.md, then examples/. Become the person—opinions, voice, worldview.
Higgsfield
829OSideMedia/higgsfield-ai-prompt-skill
Writes and refines prompts for Higgsfield AI's video and image models, and picks the model, camera controls and motion presets for each shot. Use whenever the user asks anything about Higgsfield AI — writing or refining video/image prompts, choosing a model (Kling, Veo, Wan, Seedance, Minimax Hailuo, DoP, Soul, Nano Banana, Seedream, Flux, GPT Image, etc.), camera controls, named motion presets, Soul ID character consistency, Cinema Studio 2.5/3.0, Vibe Motion, troubleshooting failed generations, credit optimization, Photodump, or any mention of higgsfield.ai. Also trigger on generic "write me
Elevenlabs
448sanjay3290/ai-skills
Convert documents and text to audio using ElevenLabs text-to-speech. Use this skill when the user wants to create a podcast, narrate a document, read aloud text, generate audio from a file, or convert text to speech.
Yuwen Publish Precheck
798yuwen-cool/yuwen-publish-precheck
国内自媒体发布前风险自审与保意修复：审口播稿、文章、图文笔记、字幕、封面文字能不能发抖音/小红书/微信视频号，给出具体位置、依据和可直接替换的改稿；被限流/删除/处罚后帮你复盘归因；你的行业敏感词、误报白名单和踩坑案例会沉淀成个人规则库，越用越准。Use when 用户说"能不能发""审一下稿子""查违禁词/敏感词""会不会限流/被限流了""帮我改成能发的版本""发布前检查""被平台处罚/删除了""帮我盯着这个词""导入违禁词表"。Not for 海外平台(X/YouTube)内容审核、起号涨粉策略、写稿创作本身。
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.