components/visualisation

Cubic Bezier Visualiser

Interactive

Design, inspect, and fine-tune custom animation curves in real-time. Drag the bezier handles or select presets to preview the easing dynamics on moving circles.

CSS:cubic-bezier(0.4, 0, 0.2, 1)
Curve Handles
P1: (0.4, 0)P2: (0.2, 1)
0,0Time →Progress ↑
P1 Handle (X, Y)0.4, 0
X:
Y:
P2 Handle (X, Y)0.2, 1
X:
Y:
Circle Motion Demo
Custom Bezier Circle0.4, 0, 0.2, 1
Linear Benchmark (Comparison)linear (0, 0, 1, 1)
Scale & Elevation Responsescale 0.5 → 1.25
Scale Pulse
Y-Translation
Duration:1.6s
Preset Easing CurvesClick to test instant curves
Implementation Snippets
Framer Motion / Motion
<motion.div
  animate={{ x: 100 }}
  transition={{
    duration: 1.6,
    ease: [0.4, 0, 0.2, 1],
  }}
/>
Vanilla CSS / Tailwind
/* CSS Transition */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 1.6s;

/* Or with Tailwind arbitrary value */
className="transition-all duration-700 ease-[cubic-bezier(0.4, 0, 0.2, 1)]"