What is a micro-animation?+
A micro-animation (or micro-interaction) is a small, purposeful piece of motion - a card lifting on hover, a button compressing on press, a chip scattering on focus - that communicates state or meaning in well under a second. Good micro-animations animate only transform, opacity and filter, respond to input with ease-out curves, and stay around 200-500ms so the interface feels faster, not slower.
How do I create a card hover animation with CSS?+
Give the card a transition on transform and box-shadow (200-500ms with a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1)), then shift it in :hover - translate it up a few pixels and deepen the shadow. Animate only transform, opacity and filter so the browser can composite on the GPU; never animate width, height or margin. Motioned generates this for you: describe what the card should convey and export the result as Tailwind classes or a CSS Module.
Tailwind CSS or CSS Modules for animations - which should I use?+
Use Tailwind when you want the animation to live inline with your markup and share your design tokens; use CSS Modules when you want named keyframes, scoped classes and animation logic separated from JSX. There is no wrong answer - which is why Motioned exports every animation in both formats from the same source, so the choice follows your codebase instead of your tool.
Native CSS, Motion or GSAP - when should I use which engine?+
Reach for native CSS first: hover, press and toggle states need no JavaScript and run off the main thread. Choose Motion (motion/react) when you need spring physics, interruptible gestures or enter/exit animations tied to the React lifecycle. Choose GSAP for orchestrated multi-step timelines and scroll-driven sequences. Motioned lets you pick the engine before generating, and its presets follow the same rule - native CSS where possible, Motion where it earns it.
Is Motioned free?+
Yes. The preset library is free to copy and use anywhere. The AI generator is also free - it runs on your own OpenAI or Anthropic API key, which stays in your browser's local storage, or encrypted with AES-256-GCM if you save it to an account. There is no subscription.
How does the AI micro-animation generator work?+
You describe the message a card should convey - the engine wraps your brief in design-engineering rules (ease-out curves, sub-500ms responses, transform-and-opacity-only motion), sends it to the OpenAI or Anthropic model you picked, and streams the result into a live in-frame preview. You can refine the result with follow-up instructions, compare two models on the same brief side by side, and share every generation at its own URL.