KL-02 · EASING/BENCH

Easing Bench

Curves are velocity in disguise.

CONTROL RAIL

Easing

Duration0.60sBoth racers share it — only the curve differs.

READING

peak velocity: ×4.5
starts at: ×4.5
arrives at: ×0.0

×1.0 is linear pace. The endpoint velocities are what the eye reads as snappiness.

KL-02 · BENCH

BEZIER EDITOR · DRAG THE HANDLES

THE RACE · SAME DURATION, SAME DISTANCE

YOURS

LINEAR

LIVE CODE · MIRRORS THE STAGE

import { motion } from "motion/react";
import { easings } from "@/registry/lib/motion";

<motion.div
  animate={{ x: 240 }}
  transition={{ duration: 0.60, ease: easings.enter }}
/>

// easings.enter = [0.22, 1, 0.36, 1]
// peak ×4.5 · arrives at ×0.0