easeUI

Playground

Tune the motion behind everyday interface moments and copy the code.

Use ease-out for things entering or leaving, ease-in-out for things moving on screen, and ease for hover and color changes.

Curve

Ease out is the right default for most interface motion.

Duration0.25s

Most interface motion lands between 150 and 300ms.

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],
      }}
    />
  );
}