Motion pathPro

Draw the path an object follows over the clip, shape the timing on a cubic bezier graph with draggable handles or presets, and play it along the path at the clip's length.

Markdown

On this page

ProThe husky follows a curve over 5 s and eases out at the end. Press Play to feel the timing.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/motion-path

Usage

tsx

import { MotionPath } from "@/components/ui/chatcn/pro/motion-path"

<MotionPath
  src={startFrame}
  alt="The start frame"
  duration={5}
  points={points}
  onPointsChange={setPoints}
  easing={curve}
  onEasingChange={setCurve}
/>

Click the frame to add points and drag them to shape a smooth curve; the first point is where the object starts. The easing is a CSS cubic bezier [x1, y1, x2, y2], so it can overshoot. Points are frame fractions. samplePath and cubicBezier from @/lib/chatcn-pro-video give the object's position at any moment, the same way the preview does.

Examples

States

No path yet, a custom curve that overshoots, disabled and right to left.

ProNo path yet, a custom curve that overshoots and disabled.

Props

Prop	Type	Notes
`src`, `alt`	`string`	Required. The start frame
`aspectRatio`	`number`	Default 16 / 9
`points`, `defaultPoints`, `onPointsChange`	`VideoPoint[]`
`easing`, `defaultEasing`, `onEasingChange`	`EasingCurve`	Default ease in out
`duration`	`number`	Preview length in seconds. Default 5
`maxPoints`	`number`	Default 12
`labels`	`Partial<MotionPathLabels>`	Every string, for translation
`disabled`, `locale`

Keyboard

Key	Action
Add point	Adds a point past the last one and focuses it
Arrow keys on a point or handle	Move it by 1%, 5% with `Shift`
`Delete` on a point	Remove it
`←` `→` on the preview time	Scrub

Accessibility

Points are buttons named with their place: "Start: Object", "Point 3 of 4".
The easing graph is named with its curve, and each handle with its coordinates.
Arrow keys move points in screen directions in right to left too; the readouts keep their order.

Motion

Play runs the object along the path over the clip with the chosen easing, and a dot rides the easing graph at the same moment, so the curve is felt as well as drawn.
Points move with the pointer at once. Under reduced motion Play is off and the scrubber shows any moment instead.