CameraMovePicker
StablePick a camera move such as push in, pan or orbit by name, with a small diagram for each.
Also known as camera motion, camera control
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Pick one move
<CameraMovePicker value={value} onChange={setValue} />Every move with its name. Hover or Tab onto a tile to see the subject move once.
When to use it
Lets people direct the camera without learning prompt jargon like "dolly" or "truck".
Made of: Label and what is chosen · Move tiles (diagram, name, check when chosen) · Limit note · Unavailable reason · Strength
Use it for
- Camera control inside ShotSettings.
- A camera edit on an existing clip, with only the moves that edit supports.
- Combining two moves, such as push in then pan right.
Not for
- Choosing between a few plain words: use SegmentedControl.
- Any single choice that has no picture: use RadioGroup.
Do and avoid
Do
- Write the name of every move. The diagram helps but never stands alone.
- Show unsupported moves with a reason instead of hiding them.
- Keep combinations small. Two or three moves at most.
Avoid
- Do not loop the diagrams or play them while a take is generating.
- Do not colour chosen moves lime. They are the person's choice, not the AI's work.
- Do not make people type camera commands into the prompt.
On a phone
- Three tiles per row on a phone, four from 640px wide.
- Each tile has a 44px touch area.
- There is no hover on touch, so diagrams stay still; the arrow shows the move.
Seen in products
- Hailuo makes people pick pan, zoom, orbit, tracking or crane before generating, and accepts camera commands in brackets in the prompt.
- Google Flow suggests writing plain words like "tracking shot" or "aerial view", and offers a camera edit mode for existing clips.
- Kling offers motion control for camera paths.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | CameraMove[] | none | Chosen moves, in the order picked. |
| onChangerequired | (value: CameraMove[]) => void | none | Called with the new moves. Clearing the last one gives ["static"]. |
| label | string | "Camera move" | Visible name of the group. |
| moves | CameraMove[] | all 13 | Moves to offer: static, pushIn, pullOut, panLeft, panRight, tiltUp, tiltDown, truckLeft, truckRight, orbit, crane, tracking, handheld. |
| max | number | 1 | How many moves can be combined. 1 is a single choice. |
| supported | CameraMove[] | none | Moves the model can make. Others are shown but cannot be picked. |
| unsupportedReason | string | "Not available with this model" | Why the other moves cannot be picked. |
| strength | "subtle" | "strong" | none | How strong the move is. |
| onStrengthChange | (s: "subtle" | "strong") => void | none | Shows the strength control while a moving choice is made. |
| disabled | boolean | false | Turns the whole picker off. |
| className | string | none | Extra classes. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one CameraMovePicker switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Disabled | disabled | On or off |
Tokens
Change one of these and every part that uses it follows.
--surface--border--fg--fg-muted--radius-control--dur-slow--dur-fast--ease-out
Built in
- A group named by its label. Each move is a toggle button with aria-pressed, and the chosen ones also show a check mark.
- One tab stop for the group: arrow keys move between tiles, Home and End jump, Space or Enter picks.
- Moves that cannot be picked keep focus with aria-disabled, say "not available" and point to the written reason.
- When the limit is reached, a note says so in words and points to the group.
- Diagrams are hidden from screen readers; the name is the label. The preview moves once on hover or focus, within 400ms, and never under reduced motion.
What you need to do
- Pass supported and a reason whenever a model cannot make some moves, so no option fails later.
- Turn the chosen moves into the model's own instructions in your code. Do not show bracket syntax to people.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide