Playground
Shape the motion behind everyday interface moments, then copy it as Motion, CSS, Tailwind or GSAP, or share the exact settings as a link.
Drag the handles to shape your own curve. Use ease-out for things entering or leaving, ease-in-out for things moving on screen, and ease for hover and color changes.
import { motion } from "motion/react";
export function Demo() {
return (
<motion.div
animate={{ x: 120 }}
transition={{
duration: 0.25,
ease: [0.23, 1, 0.32, 1],
}}
/>
);
}Curvecubic-bezier(0.23, 1, 0.32, 1)
Drag a handle, click to pull the nearest one over, or nudge a focused handle with the arrow keys.
Duration0.25s
Most interface motion lands between 150 and 300ms.
Compare with
Race your curve against a known one at the same duration.