EasingCurve

A static visualisation of a cubic-bézier easing curve, drawn as an SVG bézier inside a unit box — time runs left→right, progress runs bottom→top. The solid stroke inherits currentColor (set the SVG's text colour via className); the optional dotted diagonal is the linear baseline the curve bends away from. Sizing is entirely className-driven, so the same primitive serves a tiny preview and a full row. The DS home for easing SVGs — the app never draws raw <svg>.

Usage

import { EasingCurve, EasingCurvePoints, EasingCurveProps } from "@desk/ui/components/easing-curve";

Best practices

Render easing previews through EasingCurve, never a hand-rolled <svg> — it's the design-system home for curve visualisations (consistent unit box, baseline, stroke).
Colour the curve with a text-* class (it strokes currentColor) and size it purely via className — the same primitive scales from a tiny preview to a full row.
Always pass a meaningful title — it becomes the SVG <title>, the curve's only accessible name.

Props

Prop	Type	Default	Description
points(required)	`EasingCurvePoints`		The easing's four cubic-bézier control coordinates, `[x1, y1, x2, y2]`. Drawn as the solid curve.
title(required)	`string`		Accessible label for the curve, rendered as the SVG `<title>`.
showReference	`boolean`	`true`	Draw the dotted diagonal (linear `y = x`) reference behind the curve, so its acceleration reads against a straight baseline.

Also exports

typeEasingCurvePoints
interfaceEasingCurveProps