Motion Web skill
motion-web
Sites with motion first on pure Three.js, Canvas 2D, WebGL and CSS: damping physics, tokens, 7 examples. CC BY-NC 4.0 license
- 714 ★ on the repository
- Last commit
Minimal access
Why this level
- CC BY-NC 4.0 license, commerce by agreement
- Heavy graphics load weak devices
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/motion-webDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- CC BY-NC 4.0 license, commerce by agreement
- Heavy graphics load weak devices
This is third-party code. Review the repository files before installing.
What it does
Motion Web teaches an agent to make sites where motion comes first: pure Three.js, Canvas 2D, WebGL and CSS, damping physics, motion tokens and seven examples. Installation by cloning: `git clone https://github.com/feitangyuan/motion-web.git ~/.claude/skills/motion-web` or into `~/.agents/skills/motion-web`. The CC BY-NC 4.0 license, non-commercial, with GitHub showing NOASSERTION: commercial work needs an agreement with the author. The same author as OneTake.
Who it is for. For developers and designers of personal projects who need sites with live motion on pure graphics without heavy libraries.
Good fit when
- You need a site where motion matters more than text
- You need damping physics and motion tokens
- You need examples in Three.js, Canvas and CSS
Not a fit when
- You need commercial work: the license is non-commercial
- You need ready React components: here is pure graphics
Example request
Make a landing page where the logo smoothly follows the cursor with damping on pure Canvas 2D with no librariesLimitations
The CC BY-NC 4.0 license forbids commercial use without the author's consent and requires attribution. Sites with heavy graphics load weak devices, so check smoothness and battery drain. Access is minimal.
How to disable. Remove the skill from the agent's folder or the plugin through the plugin manager.
FAQ
What does Motion Web do?
It teaches an agent to make sites with motion on pure Three.js, Canvas 2D, WebGL and CSS.
What license is it?
CC BY-NC 4.0: commercial use only by agreement with the author.
How do I install it?
git clone https://github.com/feitangyuan/motion-web.git ~/.claude/skills/motion-web.
Discussion
No questions or reviews yet.
Related
SkillsMotion.dev Animations Skill
motion-dev-animations-skill
A Claude Code skill for Motion.dev, the successor of Framer Motion: 120 fps web animation, spring physics, scroll animation
Ten reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
Three.js Architecture Effects
threejs-architecture-effects
A skill building an orbitable Three.js building that assembles itself: brick, frame, procedural materials. The result is a working Vite and React site
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Motion Web (this entry) | no | 714 | |
| OneTake | no | 2,285 | video from a description, non-commercial license only |
| Motion Anything | no | 862 | a local animation chat engine from a described feeling |
README in short
The README describes a skill for motion-first sites on Three.js, Canvas 2D, WebGL and CSS with the CC BY-NC 4.0 license.