Motion system

Motion Lab

Tune the spring, inspect the source, and copy a recipe that respects interruption, keyboard focus, and reduced motion. These are small interaction contracts—not motion for motion's sake.

Full motion preview

Recipes

Live preview

Pressed surface

A tactile press that gives the pointer a reliable down/up response without moving layout.

Physics

Stiffness320Damping24

Mass1.0

LayoutStable

Tune the response, not a duration. Transform and opacity stay on the compositor; no layout properties are animated.

Copy-ready source

<>pressed-surface.tsx

import { motion } from "framer-motion";

<motion.button
  className="motion-pressed"
  whileHover={{ scale: 1.01, y: -1 }}
  whileTap={{ scale: 0.98, y: 1 }}
  transition={{ type: "spring", stiffness: 320, damping: 24, mass: 1 }}
>
  Deploy build
</motion.button>

Reduced motion: The CSS branch removes transform motion. Framer Motion's user setting resolves to an instant state change while focus remains visible.

Feedback

Every transition explains a state or a target.

Interruption

Springs settle naturally when the user changes direction.

Respect

Reduced motion, focus, and semantics survive the visual layer.