Micro‑interactions are tiny moments that make interfaces feel alive: a button press ripple, a field that guides you to fix an error, a list item that settles into place after drag‑sort. For developers, the challenge is to make them useful, fast, and accessible—not merely decorative.
This guide turns UX theory into code patterns for React. You’ll get motion rules, durations/easing, and copy‑paste Framer Motion / React Spring snippets you can drop into Next.js components without hurting performance or accessibility.
Mental model (Dan Saffer): Trigger → Rules → Feedback → Loops & Modes. For each pattern below, define these four pieces explicitly.
Table of Contents
- Principles of micro‑interactions
- Durations, easing, and spring configs
- Core patterns with code
- Gestures & drag
- Scroll‑linked and progress
- A11y & reduced motion
- Testing & measurement
- Anti‑patterns to avoid
- FAQ
Principles of micro‑interactions
- Purpose first: Motion should clarify feedback (success/error), spatial change (expand/collapse), or affordance (this is clickable).
- Small and snappy: Most UI actions land between 150–250ms; large context shifts may use 250–400ms.
- One focal motion per surface; avoid competing animations.
- Prefer
transform/opacityover layout‑changing properties. - Composable: Encapsulate behavior at component boundaries and expose props to tweak timing and easing.
Durations, easing, and spring configs
Framer Motion (spring)
const springFast = { type: "spring", stiffness: 420, damping: 32 };
const springBase = { type: "spring", stiffness: 360, damping: 36 };
const springSnappy = { type: "spring", stiffness: 520, damping: 28 };React Spring
const cfgBase = { tension: 280, friction: 24 };
const cfgSnappy = { tension: 360, friction: 20 };CSS easing (fallbacks): ease-out for reveals, ease-in for exits, ease-in-out for loops.
Core patterns with code
1) Button press & affordance
// Framer Motion
import { motion } from "framer-motion";
export function PressableButton({ children }: { children: React.ReactNode }) {
return (
<motion.button
whileTap={{ scale: 0.98 }}
whileHover={{ y: -1 }}
transition={{ type: "spring", stiffness: 520, damping: 32 }}
className="rounded-md bg-black px-4 py-2 text-white"
>
{children}
</motion.button>
);
}// React Spring
import { useSpring, animated } from "@react-spring/web";
export function PressableButton({ children }: { children: React.ReactNode }) {
const [styles, api] = useSpring(() => ({ scale: 1 }));
return (
<animated.button
onMouseDown={() =>
api.start({ scale: 0.98, config: { tension: 360, friction: 20 } })
}
onMouseUp={() =>
api.start({ scale: 1, config: { tension: 300, friction: 22 } })
}
style={{ transform: styles.scale.to((v) => `scale(${v})`) }}
className="rounded-md bg-black px-4 py-2 text-white"
>
{children}
</animated.button>
);
}2) Field validation & inline feedback
// Shake on error + helper text
import { motion } from "framer-motion";
export function TextField({
error,
...props
}: React.InputHTMLAttributes<HTMLInputElement> & { error?: string }) {
return (
<div>
<motion.input
{...props}
aria-invalid={!!error}
className="w-full rounded-md border px-3 py-2"
animate={error ? { x: [0, -6, 6, -4, 4, 0] } : { x: 0 }}
transition={{ duration: 0.28 }}
/>
<div id={`${props.id}-hint`} className="mt-1 text-xs text-neutral-600">
{error ? error : " "}
</div>
</div>
);
}3) Toasts & system status
import { motion, AnimatePresence } from "framer-motion";
export function Toast({ open, text }: { open: boolean; text: string }) {
return (
<AnimatePresence>
{open && (
<motion.div
initial={{ y: 24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 24, opacity: 0 }}
transition={{ type: "spring", stiffness: 420, damping: 34 }}
className="fixed bottom-4 left-1/2 -translate-x-1/2 rounded-md bg-black px-4 py-2 text-white shadow-lg"
role="status"
aria-live="polite"
>
{text}
</motion.div>
)}
</AnimatePresence>
);
}4) Expand/collapse (disclosure)
import { motion, AnimatePresence } from "framer-motion";
export function Disclosure({
title,
open,
children,
}: {
title: string;
open: boolean;
children: React.ReactNode;
}) {
return (
<div className="rounded-md border">
<button className="flex w-full items-center justify-between px-3 py-2">
{title}
<span>▾</span>
</button>
<AnimatePresence initial={false}>
{open && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
>
<div className="px-3 py-2">{children}</div>
</motion.div>
)}
</AnimatePresence>
</div>
);
}5) List item insert/remove
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
export function List() {
const [items, setItems] = useState([1, 2, 3]);
return (
<ul className="space-y-2">
<AnimatePresence initial={false}>
{items.map((i) => (
<motion.li
key={i}
initial={{ y: 8, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -8, opacity: 0 }}
className="rounded-md border p-3"
>
Item {i}
</motion.li>
))}
</AnimatePresence>
</ul>
);
}Gestures & drag
Use Framer Motion for built‑in drag or pair React Spring with @use-gesture/react for physics.
// Framer Motion draggable card
<motion.div
drag
dragConstraints={{ left: -80, right: 80 }}
dragElastic={0.12}
className="h-24 w-40 rounded-xl bg-indigo-500"
/>// React Spring + use-gesture
import { useSpring, animated } from "@react-spring/web";
import { useGesture } from "@use-gesture/react";
const [{ x, y }, api] = useSpring(() => ({ x: 0, y: 0 }));
const bind = useGesture({
onDrag: ({ offset: [dx, dy] }) => api.start({ x: dx, y: dy }),
});
<animated.div
{...bind()}
style={{ x, y }}
className="h-24 w-40 rounded-xl bg-indigo-500"
/>;Scroll‑linked and progress
import { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";
export function ReadingProgress() {
const ref = useRef<HTMLDivElement>(null);
const { scrollYProgress } = useScroll({
target: ref,
offset: ["start start", "end end"],
});
const scaleX = useTransform(scrollYProgress, [0, 1], [0, 1]);
return (
<div ref={ref} className="prose mx-auto">
<motion.div
style={{ scaleX }}
className="fixed left-0 top-0 h-1 w-full origin-left bg-black"
/>
{/* article content */}
</div>
);
}A11y & reduced motion
- Respect
prefers-reduced-motion(no big parallax; faster or 0ms transitions). - Keep focus visible during motion; don’t move focus targets mid‑animation.
- Announce async states with
role="status"oraria-live="polite". - Provide non‑animated affordances (e.g., hover color change + subtle motion).
import { useReducedMotion } from "framer-motion";
const prefersReduced = useReducedMotion();
const transition = prefersReduced
? { duration: 0 }
: { type: "spring", stiffness: 420, damping: 32 };Testing & measurement
- Playwright/Cypress: set reduced motion, assert visibility/position after animation settles.
- Performance: record Interaction to Next Paint (INP); micro‑interactions should not block input.
- Product metrics: track conversion uplift where micro‑interactions are introduced (e.g., button hover affordance → CTR).
await page.emulateMedia({ reducedMotion: "reduce" });
await page.getByRole("button", { name: "Open" }).click();
await expect(page.getByRole("dialog")).toBeVisible();Anti‑patterns to avoid
- Decorative noise without feedback value.
- Animating layout (height/width) repeatedly; prefer transforms or FM
layoutprop. - Multiple focal motions competing on the same surface.
- Ignoring a11y (focus, reduced motion, color‑only signals).
- Long intros that delay LCP/INP.
FAQ
Can I mix Framer Motion and React Spring?
Yes—at feature boundaries. Avoid animating the same element with both.
Do I need a design system first?
Not to start. Encapsulate each micro‑interaction as a component with props for timing and easing. Migrate to tokens later.
Will micro‑interactions slow my app?
Not if you keep them transform/opacity‑based, short, and focused on single elements.
Next steps
- Identify 3 moments to improve (e.g., press, validate, list change).
- Implement with Framer Motion variants; add reduced‑motion fallbacks.
- Measure with product analytics, and iterate on timing/easing.
