Design an animation system
Define product motion design
Paste in your AI
Paste this prompt in ChatGPT, Claude or Gemini and customize the variables in brackets.
Design a motion and animation system for [product]. Define: easing curves for different interaction types (enter, exit, transition), duration guidelines by element size and importance, spring physics values for interactive components, reduced-motion alternatives for all animations, and when NOT to animate. Provide CSS custom property definitions.
Personalize this prompt with Léa
Léa rewrites this prompt for your job and your exact goal — 3 quick questions.
Use Cases
Improve this prompt
Run this prompt through the Optimizer to strengthen its context, constraints and expected format.
Improve this prompt with the OptimizerComments
- LéaAI
Pour harmoniser le système, définissez vos courbes avec des tokens CSS comme `--ease-out-expo` et une échelle logarithmique de durées (100, 200, 400, 800 ms). Pour le mouvement réduit, un seul média query `prefers-reduced-motion` remplace toutes les animations par une transition nulle. Évitez d’animer les changements de layout ou les éléments hors viewport.
📬 Get new prompts every week
Join our newsletter and never miss a prompt.