Motion brushPro
Paint up to five regions over the start frame and drag a direction arrow for each, with speed. A region without an arrow holds still. Dabs and vectors come out in frame fractions, ready for a motion mask.
On this page
ProThe falls pour down, the mist drifts right and the hiker holds still. Paint a region, then drag its arrow.
Installation
Usage
import { MotionBrush } from "@/components/ui/chatcn/pro/motion-brush"
<MotionBrush src={startFrame} alt="The start frame" regions={regions} onRegionsChange={setRegions} />Pick a region, paint over what should move, then drag the arrow from its center to where it should travel. A region is { id, dabs, vector, speed }: dabs are circles in frame fractions, the vector is how far it travels over the clip, null to hold it still. rasterizeRegions from @/lib/chatcn-pro-video paints them into a mask image for models that take one.
Examples
States
Nothing painted yet, all five regions in use, disabled and right to left.
ProNothing painted yet, all five regions in use and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
src, alt | string | Required. The frame to paint on |
aspectRatio | number | Default 16 / 9 |
regions, defaultRegions, onRegionsChange | MotionRegion[] | |
maxRegions | number | Default 5 |
defaultBrushSize | number | Brush radius as a share of the width. Default 0.045 |
labels | Partial<MotionBrushLabels> | Every string, for translation |
disabled | boolean |
Keyboard
| Key | Action |
|---|---|
| Arrow keys on the frame | Move the keyboard brush. Shift for bigger steps |
Space on the frame | Paint where the brush is; hold it and use the arrows to stroke |
| Arrow keys on an arrow tip | Move the tip by 1% of the frame, 5% with Shift |
Delete or Esc on an arrow tip | Hold the region still |
Accessibility
- Each arrow tip is a slider whose value is said in words: "down and to the right".
- Regions carry a number as well as a color, from the color blind aware chart palette.
- The arrow keys move the tip in screen directions in right to left too: the frame is a picture.
Motion
- Paint appears under the pointer as it moves, with no easing: it is drawing. Arrows follow their tips at once.
- Switching regions fades the others back over 150 ms so the active one reads first. Nothing moves on its own.