Inspector Easing

About this component

Inspector Easing

Settings row for a cubic-bezier: the row names the preset and draws the curve small, and opens an editor with the two control points draggable, room above and below the run for an overshoot, and a strip that runs the motion so the choice can be watched rather than read.

Usage

The import and the props worth knowing about, in one place.

import { InspectorEasing } from "@/components/beste/component/inspector-easing";

// Uncontrolled. The value is the four numbers cubic-bezier() takes, in its order.
<InspectorEasing label="Easing" defaultValue={[0.34, 1.56, 0.64, 1]} />

// Controlled. The value is a four-tuple, so say so on the state: a plain
// `useState([0.25, 0.1, 0.25, 1])` widens to number[] and will not fit.
const [easing, setEasing] = React.useState<[number, number, number, number]>([0.25, 0.1, 0.25, 1]);

<InspectorEasing
  label="Easing"
  value={easing}
  onValueChange={setEasing}
  onValueCommit={(value) => save(value)}
/>

<InspectorEasing
  label="Curve"
  icon={ActivityIcon}   // optional leading icon
  tone="outline"        // "muted" (default) | "outline" | "ghost"
  size="sm"             // "sm" | "default" | "lg"
  hidePreview           // drop the strip that runs the motion
  presets={[            // pass an empty list to leave only the curve
    { label: "Snap", value: [0.2, 0, 0, 1] },
    { label: "Glide", value: [0.16, 1, 0.3, 1] },
  ]}
  value={easing}
  onValueChange={setEasing}
/>

// What the value turns into
<div style={{ transitionTimingFunction: `cubic-bezier(${easing.join(", ")})` }} />

// The same four numbers reach a Web Animations call
element.animate(frames, { duration: 400, easing: `cubic-bezier(${easing.join(", ")})` });

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

TabMove between the two control points; each is its own button.
Arrow keysNudge the focused point. Left and Right move it in time, Up and Down in value.
Shift + ArrowTen times the step, for crossing the curve quickly.

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
label*string—Label rendered on the left, inside the row.
iconLucideIcon—Optional leading icon shown before the label.
value[number, number, number, number]—Controlled value. Pair it with `onValueChange`.
defaultValue[number, number, number, number]—Initial value in uncontrolled mode.
onValueChange(value: EasingValue) => void—Fires on every frame of a drag, and on every key press.
onValueCommit(value: EasingValue) => void—Fires once a change is finished — a handle released, a preset chosen. Use it for work too expensive to run per frame.
onOpenChange(open: boolean) => void—Fires when the editor opens or closes.
presetsEasingPreset[]the five CSS keywords plus two overshooting shapesWhich presets to offer. Pass an empty list to drop the menu and leave only the curve.
hidePreviewboolean—Drop the strip that runs the motion under the curve.
disabledboolean—Block interaction and dim the row.
tone"muted" | "outline" | "ghost""muted"Surface treatment: filled (default), hairline outline, or bare until hover.
size"sm" | "default" | "lg""default"Row height preset.
classNamestring—
aria-labelstring—Accessible name. Falls back to `label`.

More Inspector components

View all Inspector