motion-web
Skill0 starsChanged 14 days agoMITView on GitHub
Anime une interface web à partir d'une phrase : boutons, cartes, transitions de pages. Code CSS/JS propre et performant.
1 other project uses a version of this.
Adopted by
Most recently taken up by
- feitangyuan/motion-webtheir own version, first seen Sep 9, 2026
Other versions1 project uses a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 1
- feitangyuan/motion-web★ 851same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository45 other files it gives its agents.
- AGENTS.mdAGENTS.md
- skills/smokekit-ai-workflow-orchestration/templates/CLAUDE.mdCLAUDE.md
- afficheuxSkill
- animateSkill
- motion-designSkill
- review-loopSkill
- claude-motionSkill
- sound-designSkill
- web-simsSkill
- collectSkill
- explainer-storyboardSkill
- explainrooSkill
- fixitSkill
- herdr-teamSkill
- merge-gateSkill
- motion-designSkill
- motion-graphicsSkill
- animated-chartSkill
- apple-launch-filmSkill
- brand-intakeSkill
- launch-videoSkill
- loop-coverSkill
- milestone-revealSkill
- model-showdownSkill
- motion-brief-writerSkill
- motion-effectsSkill
- motion-prompt-writerSkill
- newsletter-promoSkill
- reel-exportSkill
- reference-to-motionSkill
- motion-graphics-skillsSkill
- title-sequence-3dSkill
- vox-explainerSkill
- motion-illustrateSkill
- motion-launchSkill
- motion-principlesSkill
- motion-soundSkill
- prd-table-rondeSkill
- product-launch-motionSkill
- remotion-motion-graphicsSkill
- rush-cutSkill
- secretscanSkill
- smokekit-ai-workflow-orchestrationSkill
- uxfixSkill
- wassupSkill
The file
Files
Motion-Web : une phrase, une interface qui bouge
Concepts issus de la vidéo « 8 outils motion design » de Simon De Lima (oct. 2026). Skill rédigé de zéro, sans reprise de son contenu.
Décrit en langage naturel l'animation voulue, obtient le plan puis le code CSS/JS correspondant.
Procédure
- Comprendre la phrase. Identifier : les éléments concernés (boutons, cartes, menus, transitions de page), le déclencheur (survol, clic, scroll, chargement), l'effet voulu.
- Plan d'animation. Pour chaque élément : propriété animée (transform, opacity — jamais width/height/margin pour la performance), durée (0,2-0,4 s pour les micro-interactions, 0,5-0,8 s pour les transitions de page), easing (ease-out en entrée).
- Accessibilité. Respecter
prefers-reduced-motion: proposer une version sans animation. Ne jamais animer ce qui porte une information critique de façon à la rendre illisible. - Code. Produire le CSS (transitions/animations, keyframes si besoin) et le JS minimal pour les déclencheurs. Préférer les classes CSS aux styles inline, et
transform/opacitypour rester à 60 fps. - Vérifier. La page reste utilisable sans l'animation (progressive enhancement) ; aucun élément ne saute au chargement.
Familles d'effets courants
- Boutons : soulèvement + ombre au survol, ripple au clic.
- Cartes : lift au survol, apparition en cascade au scroll (stagger).
- Transitions de page : fondu + léger déplacement vertical.
- Chargement : skeleton screens plutôt que spinners.
- Feedback : micro-vibration (shake) sur erreur, check animé sur succès.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.