Camera motion pickerPro
Pan, tilt, dolly, orbit, zoom and roll as drawn tiles whose little scene performs the move, combinable up to a limit, each with direction and intensity, and the whole move said in words for the prompt.
On this page
ProSix drawn moves that perform themselves. Orbit left and dolly in are picked, each with its direction and strength.
Installation
Usage
import { CameraMotionPicker } from "@/components/ui/chatcn/pro/camera-motion-picker"
<CameraMotionPicker value={moves} onValueChange={setMoves} max={3} />A move is { id, direction, intensity }, with direction 1 or -1 and intensity 0 to 1. Picked moves are numbered in the order they were added and get a row with direction and strength. The line under them reads like a prompt: Orbit left 35%, dolly in 60%. describeCameraMoves from @/lib/chatcn-pro-video gives you the same words on the server.
Examples
States
A static camera, the limit reached, a subset of moves, disabled and right to left.
ProA static camera, the limit reached, a subset of moves and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
value, defaultValue, onValueChange | CameraMove[] | |
moves | CameraMoveId[] | Which moves to offer, in order. Default all six |
max | number | Most moves at once. Default 3 |
defaultIntensity | number | Where a new move starts. Default 0.5 |
info | (id) => CameraMoveInfo | Labels, hints and direction words |
noneLabel, label | string | Default Static camera, Camera motion |
hideSummary, disabled | boolean |
Keyboard
| Key | Action |
|---|---|
Space or Enter on a tile | Pick or drop the move |
← → on a direction | Switch direction |
← → on a strength | Change intensity by 5% |
Accessibility
- Tiles are toggle buttons named with the move and what it does: "Dolly: Moves toward or away from the subject".
- At the limit, the other tiles are off and point at the line that says why and how to add another.
- Each picked move's number is also in text, so order never depends on the badge color.
- The summary is a polite live region.
Motion
- Each tile's scene performs its move on a 1.6 s loop while the tile is hovered, focused or picked, so a grid at rest is still. A static mark in the sky says the move before it plays.
- Under reduced motion there is no loop: the scene holds the end of the move. Tiles press to 0.97.