Skip to content

Add motion, with restraint

Small transitions where they help: hover, press and one entrance, nothing that repeats

Add motion to this page, with restraint. The page should feel alive, not animated. What to add: - Interactive states: hover and pressed on links, buttons and cards. A color or opacity change on hover, a scale of 0.96 on press. 150 ms, ease-out, and name the properties (never transition all). - One entrance for the top of the page: the headline, the text under it and the buttons fade in and rise a few pixels, one after another, about 80 ms apart. It runs once. - Cards that link somewhere can lift a pixel or two on hover. What not to add: - Nothing that loops, nothing that follows the scroll, no parallax. - No animation on anything the visitor does repeatedly. - No entrance on every section. Everything respects prefers-reduced-motion: with it on, states still change, and nothing moves. Use CSS only (Tailwind classes and, if you need keyframes, one small block in the stylesheet). No animation library unless the project already has one. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. List each animation you added, where, and how long it runs.

Other prompts