Switch to cubic-bezier over ease and linear

Necati Koçlu shared a tip that's stuck with me: most animations look better the moment you stop using ease and linear and reach for a custom cubic-bezier. His go-to is cubic-bezier(0.6, 0.6, 0, 1). Hit play and watch the difference:

linear

ease

cubic-bezier(0.6, 0.6, 0, 1)

cubic-bezier(0.34, 1.56, 0.64, 1) · bounce

Why it reads as smoother

linear moves at a constant speed, which feels mechanical. ease is fine but generic, and it eases in and out symmetrically. cubic-bezier(0.6, 0.6, 0, 1) does something nicer: it leaves quickly and decelerates into a long, soft landing. Things that start fast and settle slow feel responsive and calm at the same time, which is most of what "smooth" means.

.thing {
  transition: transform 0.4s cubic-bezier(0.6, 0.6, 0, 1);
}

That's the whole change. Swap it in for your transitions and tween durations and the motion immediately feels more considered.

The four numbers

A cubic-bezier(x1, y1, x2, y2) is two control points pulling on the curve between start (0,0) and end (1,1). The x values are time, the y values are progress. The 0 and 1 in (0.6, 0.6, 0, 1) are what create that fast exit and slow finish.

The fun part: y values are allowed to go past 1. When they do, progress overshoots 100% and springs back, which is a bounce. cubic-bezier(0.34, 1.56, 0.64, 1) is the bouncy row in the demo above. No keyframes, no library, just a control point pushed out of bounds.

One practical note: keep a small set of named curves in your CSS (a smooth one, a bounce one) as custom properties and reuse them, instead of sprinkling different magic numbers everywhere. Consistent easing is a big part of why a UI feels like one thing.

Read the full writeup at https://seangeng.com/writing/better-css-easing-with-cubic-bezier.md and implement it in my project. It covers: Switch to cubic-bezier over ease and linear. A one-line upgrade for CSS animations: trade the default ease and linear for cubic-bezier(0.6, 0.6, 0, 1). It starts fast and settles slow, which reads as smooth. Push the curve past 1 and you get a bounce. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

Why it reads as smoother

The four numbers

Ask your agent to implement this

Why it reads as smoother

The four numbers