Bézier Kit

Small Bézier utilities for motion and visual systems.

cubicbezier.dev · mosa.sh

Dependency-free cubic Bézier utilities for motion, plus a DOM editor that does not require a framework. Try the reference implementation at cubicbezier.dev.

npm i bezier-kit

import { cubicBezier } from "bezier-kit";

const ease = cubicBezier(0.22, 1, 0.36, 1);
const progress = ease(0.5);

Convert one curve everywhere

import { convert } from "bezier-kit";

const curve = [0.22, 1, 0.36, 1] as const;

convert(curve, "css"); // cubic-bezier(0.22, 1, 0.36, 1)
convert(curve, "motion"); // [0.22, 1, 0.36, 1]
convert(curve, "swiftui"); // .timingCurve(0.22, 1, 0.36, 1)

convert supports CSS, the Web Animations API, Motion, Framer Motion, GSAP CustomEase, SwiftUI, Core Animation, Jetpack Compose, and Android PathInterpolator.

Embed the editor

import { createBezierEditor } from "bezier-kit/editor";

const editor = createBezierEditor("#curve", {
  value: [0.22, 1, 0.36, 1],
  preview: { duration: 1400, loop: true },
  editor: { guides: true, grid: true },
  onChange(value) {
    console.log(value);
  },
});

// editor.destroy() when the host element is removed.

The editor is plain DOM code. It owns the curve editor, graph, optional preview, and controls. The host owns surrounding application UI and calls destroy() when it removes the editor.

Core API

Every helper accepts the canonical [x1, y1, x2, y2] tuple. parse also accepts a controls object or CSS cubic-bezier() string.

| Export | What it does | | --- | --- | | createCubicBezier, cubicBezier | Create a callable timing function. The five-argument cubicBezier overload evaluates one scalar curve point. | | parse, validate, serialize, formatNumber | Read, check, and write curve values. | | pointAt, derivative, parameterAt, valueAt, velocity, sample | Inspect a timing curve at a parameter or elapsed progress. | | convert, conversionTargets | Produce syntax for another animation API. | | solveCoordinate, monotonicity, extrema, inflections | Answer geometry questions about a curve. | | arcLength, sampleByDistance, boundingBox | Measure a curve or produce geometry data. | | split, trim, fitCubic | Edit a curve or fit one to sampled points. |

cubicBezier(t, start, control1, control2, end) is the low-level scalar evaluator. For UI easing, use the four-number overload shown above or createCubicBezier.

Analysis helpers accept CubicBezierAdvancedOptions when you need a different tolerance or iteration limit. The defaults suit UI curves.

Related package

Spring Kit models damped spring motion. Use it when you need position, velocity, overshoot, or settle time instead of a fixed cubic Bézier curve.