Cubic-bezier
Also called cubic-bezier(), custom easing curve, or bezier curve easing
A CSS function that defines a custom easing curve with four numbers: the positions of two control points that bend the curve.
import { useState } from 'react';
import { motion } from 'motion/react';
// cubic-bezier(x1, y1, x2, y2): the first control point shapes the start,
// the second shapes the end. A y value above 1 runs past the target.
const OVERSHOOT = [0.34, 1.56, 0.64, 1] as const;
export function LikeButton({ likes }: { likes: number }) {
const [liked, setLiked] = useState(false);
return (
<button
type='button'
aria-pressed={liked}
onClick={() => setLiked(!liked)}
// The same four numbers work in CSS, here as a Tailwind arbitrary value.
className='inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium transition-colors duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-muted aria-pressed:text-red-500'
>
<motion.span
initial={false}
// Pops up from half size each time the post is liked.
animate={{ scale: liked ? [0.5, 1] : 1 }}
transition={{ duration: 0.3, ease: OVERSHOOT }}
aria-hidden
>
♥
</motion.span>
{likes + (liked ? 1 : 0)} likes
</button>
);
}Replace the built-in easing keywords in the app with three custom curves stored as CSS variables: --ease-out: cubic-bezier(0.23, 1, 0.32, 1) for entrances, --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1) for moves on screen, and --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1) for playful pop-ins.
Paste into Layerwise or any AI coding tool.
What is Cubic-bezier?
cubic-bezier(x1, y1, x2, y2) describes an easing curve that always runs from (0, 0) to (1, 1). The four numbers place two control points that pull the curve into shape: the first shapes the start of the motion and the second shapes the end. The x values must stay between 0 and 1, while the y values can go outside that range.
The CSS keywords ease, ease-in, ease-out, and ease-in-out are all cubic-bezier curves underneath: ease is cubic-bezier(0.25, 0.1, 0.25, 1) and ease-out is cubic-bezier(0, 0, 0.58, 1). Writing your own lets you make motion snappier or softer than the keywords allow, and y values above 1 or below 0 make the motion overshoot or pull back first.
You rarely need to guess the numbers. Chrome and Firefox dev tools open a curve editor when you click the curve icon next to a timing function, and Motion and most other animation libraries accept the same four numbers as an array, such as ease: [0.23, 1, 0.32, 1].
Related terms
All termsEasing
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
Ease-out
An easing curve that starts fast and slows down at the end, so motion feels quick and lands softly.
Overshoot easing
An easing curve that runs slightly past its end point and then settles back, giving motion a small, springy kick.
Asymmetric easing
An easing curve whose start and end are shaped differently, such as a quick start with a long, gentle landing.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.