This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI fe

Micro interactions (UI Motion) Small, functional motion that makes an interface feel responsive and alive: hover/press/focus feedback, toggles, toasts, drawers, and list/layout animation. The goal is feedback and continuity, not decoration. When to use Hover/press/focus feedback; toggles, checkboxes, like/heart buttons Toasts/snackbars, drawers, modals, tooltips, accordions (enter/exit) List add/remove/reorder; shared element ("magic move") layout transitions Loading → success → error state transitions Principles (apply to all of it) Duration: UI micro interactions live in 100–250ms . Anything over ~400ms feels laggy for a click response. Animate transform and opacity only — they are GPU composited (no layout/paint). Avoid animating width/height/top/left ; use scale or layout animation instead. Give instant press feedback: scale: 0.96 on tap with a fast spring. Asymmetric timing: enter slightly slower (ease out), exit faster (ease in). Things should arrive gracefully and leave promptly. Respect prefers reduced motion : gate non essential motion; keep opacity changes, drop large movement. Easing defaults: ease out for entrances cubic bezier(0.16, 1, 0.3, 1) ; a tasteful overshoot is cubic bezier(0.34, 1.56, 0.64, 1) ; standard move cubic bezier(0.4, 0, 0.2, 1) . Framer Motion (motion/react) essentials As of v11+, the package is imported as motion/react (the framer motion name still works). Gestures and springs Spring intuition: higher stiffness = faster; higher damping = less bounce. stiffness: 400, damping: 30 is a snappy UI default. For visible bounce, lower damping (e.g. damping: 12 ). Enter / exit with AnimatePresence Exit animations require AnimatePresence wrapping conditionally rendered children, each with a stable key . For toasts/lists, use mode="popLayout" so removed items don't hold space while exiting. Layout animation (the superpower) layout automatically animates any layout change (position/size) using transforms — perfect for reordering, expanding cards, and grid< list. Shared element transition across components: give two elements the same layoutId and Framer Motion animates between them as one mounts and the other unmounts. Gotcha: a plain layout element distorts border radius and text during scale. Add layout to direct children that should counter scale, and prefer borderRadius / boxShadow as motion values, or use layout="position" to animate position only. Pure CSS path (no JS, including discrete properties) Modern CSS can animate enter/exit and even display toggles without a library. @starting style defines the "before open" values so an element animates in on first appearance; transition behavior: allow discrete lets display (and overlay for popovers/dialogs) participate so exit animations run before the element is removed. Baseline in Chrome/Edge/Safari; provide a no animation fallback for older browsers. Always include a reduced motion guard: State, not just decoration Loading → success → error should be one continuous motion (e.g. a button morphs spinner → checkmark), not a jump cut. Keep the element mounted and animate between states so the eye tracks the same object. Deliver & verify (standalone HTML) Packaged helper ( scripts/ ): scripts/seek shot.sh anim.html 0 1.5 3 freezes the ?t=N harness and screenshots each moment; scripts/contact sheet.sh sheet.png frame .png tiles them for one glance review. See scripts/README.md . For a self contained interaction demo (toggle, like button, toast, drawer) the deliverable is one HTML file that opens directly in a browser . Pure CSS interactions ship as is; for a Framer Motion demo, load React + motion from CDN ( esm.sh ) into one inline module — no build step. One file is the right tier; don't reach for a bundler. Output contract: One .html file: your markup plus either CSS transitions/ @starting style or an inline <script type="module" importing motion from CDN. A way to land on the resolved end state for a screenshot — interactions are state driven, not time driven, so freeze the state rather than a clock. Seek harness — pin a deterministic state. A micro interaction's "frames" are its states (idle / hover / pressed / open). ?state=open applies the target state on load so a screenshot captures it settled: Verify loop — render → set state → screenshot → check: open each meaningful state ( ?state=idle , ?state=hover , ?state=open ), screenshot, and check fidelity (press feedback reads instant, exit runs before unmount) plus artifacts ( layout distorting border radius /text, toast holding space after exit, FOUC, jank). Any headless tool works: Before you finish: 1. Opens standalone — no console errors, CDN React/ motion (if used) resolves. 2. The ?state= (or controlled prop) freeze lands a deterministic, settled state. 3. Screenshotted across states — idle / active / open — matches the brief, no artifacts. 4. prefers reduced motion honored — large movement dropped, opacity/feedback kept. 5. Easing is intentional — enter ease out, exit ease in, durations in the 100–250ms band. Quick reference Need Approach Press feedback whileTap={{ scale: 0.96 }} spring 400/30 Enter/exit AnimatePresence + initial/animate/exit Reorder / resize layout prop (spring) Magic move shared layoutId Toast stack AnimatePresence mode="popLayout" No JS enter @starting style + transition Animate to display:none transition behavior: allow discrete Accessibility prefers reduced motion guard always Reference files references/framer motion recipes.md — variants + stagger, AnimatePresence modes, layout / layoutId magic move, Reorder drag to sort, drag constraints, gesture composition, and useReducedMotion . references/css recipes.md — @starting style , transition behavior: allow discrete , popover/dialog exit animation, keyframe spinners/toggles, @property for animatable custom properties, and prefers reduced motion patterns.

micro-interaction