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.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`. |