How long a change takes, when it starts, and the shape of it, in one row instead of three that drift apart. The editor runs the real transition on a loop rather than drawing its curve, since what a reader needs to know is whether 300ms feels slow.
The import and the props worth knowing about, in one place.
import {
InspectorTransition,
transitionToCss,
} from "@/components/beste/component/inspector-transition";
<InspectorTransition
label="Transition"
defaultValue={{ duration: 300, delay: 0, easing: "cubic-bezier(0.4, 0, 0.2, 1)" }}
/>
<InspectorTransition
label="Hover"
value={motion} // { duration, delay, easing }
onValueChange={setMotion}
onOpenChange={(open) => console.log("editor open:", open)}
easings={["linear", { value: "ease-out", label: "Ease out" }]}
maxDuration={1000} // ceiling for both times, 2000 by default
step={50} // step for both times, 10 by default
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
/>
// The shorthand, in the order that gets written backwards by hand
<div style={{ transition: transitionToCss(motion, "opacity") }} />
// For drawing a curve rather than picking one, reach for inspector-easing.Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorTransition } from "@/components/beste/component/inspector-transition";
<InspectorTransition
label="Transition"
className="w-72"
defaultValue={{"duration":300,"delay":0,"easing":"cubic-bezier(0.4, 0, 0.2, 1)"}}
/>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.
| Enter / Space | Open the editor from the row |
|---|---|
| Left / Right | Step a focused time slider |
| Escape | Close the editor, leaving the value alone |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | TransitionValue | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | TransitionValue | — | Initial value in uncontrolled mode. |
onValueChange | (value: TransitionValue) => void | — | |
onOpenChange | (open: boolean) => void | — | Fires when the editor opens or closes. |
easings | (string | EasingOption)[] | — | The timing functions on offer. For drawing a curve by hand, reach for inspector-easing — this row is for picking one and timing it. |
maxDuration | number | 2000 | Ceiling for both times, in milliseconds. |
step | number | 10 | Step for both times, in milliseconds. |
disabled | boolean | — | 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. |
className | string | — | |
aria-label | string | — | Accessible name. Falls back to `label`. |
Settings row for a date, a time, or both: the row reads the value the way anyone would write it down and opens a real month calendar, while a time on its own keeps the platform's own field inline, since a time has no month to show.
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.
Width and height on one row, with the lock between them: while it is closed, editing one scales the other by the ratio the pair had when the lock closed. Both fields are as wide as the largest number they can hold, so typing never shifts the row.
Settings row for a border: the row draws one exactly as described beside a summary of it, and opens an editor with the sides as icon toggles and the width, style and colour under them, each one a row of the family.