All free tools
CSS easing curve and fluid type generator
Good motion is mostly two numbers nobody talks about. Change them and feel the difference.
Drag the curve.
Set the type.
Feel this.
70.9px at this width
font-size: clamp(2rem, 0.143rem + 7.619vw, 7rem);
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);how to use it.
- Drag the curve's two handles and watch the motion change.
- Set the smallest and largest text size, and the screen widths between which type should scale.
- Copy the result as CSS cubic-bezier() and clamp(), or as Tailwind or motion code.
what it tells you.
An easing curve decides how motion speeds up and slows down, which is why the same 300 milliseconds can feel heavy or quick.
Fluid type grows text smoothly between two screen widths with CSS clamp(), instead of jumping at breakpoints.
Interfaces considered down to the motion. UI/UX design →