Camera angle gizmoPro

Ask for the same scene from another camera angle: drag a camera around a wireframe orbit to rotate and tilt it, pick a distance or a preset, see what it frames, and get the request in plain words for multi-angle models.

Markdown

On this page

ProDrag the camera around the orbit, pick a distance or a preset, and send the angle as a plain request.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/camera-angle-gizmo

Usage

tsx

import { CameraAngleGizmo, describeCamera } from "@/components/ui/chatcn/pro/camera-angle-gizmo"

<CameraAngleGizmo
  src={image.url}
  alt={image.alt}
  aspectRatio={image.width / image.height}
  value={angle}
  onValueChange={setAngle}
/>

generate({ image, prompt: describeCamera(angle) })

The value is { azimuth, elevation, distance }: degrees around the subject (negative to its left), degrees above its eye line from -30 to 80, and close, medium or wide. describeCamera writes it as the sentence multi-angle editing models take, for example "Rotate the camera 45° left, tilt 20° down, close up". The gizmo is SVG with an orthographic view, so the subject card keeps the image with a plain affine transform; the camera view inset uses CSS 3D. No 3D library.

Examples

States

ProFrom behind and wide, top down and close, small and low, rendering and disabled.

Props

Prop	Type	Notes
`src`, `alt`, `aspectRatio`	`string`, `number`	The subject. Default ratio 4 / 5
`value`, `defaultValue`	`{ azimuth, elevation, distance: "close" \| "medium" \| "wide" }`	Default front, eye level, medium
`onValueChange`	`(value) => void`	Every change, each frame of a drag
`onValueCommit`	`(value) => void`	When a drag, preset, key or distance change ends
`size`	`number`	Gizmo height in px. Default 260
`presets`, `request`	`boolean`	The preset row, and the request in words with Copy. Default true
`generating`, `generatingLabel`	`boolean`, `string`	Locks the controls with a "Rendering this angle" chip
`disabled`	`boolean`	Locks and dims

Keyboard

Key	Action
`Tab`	Focuses Orbit, then Tilt, then the distance and presets
`←` `→`	Orbit the camera by 5°; with `Shift`, 15°
`↑` `↓`	Tilt the camera up or down
`+`, `-`	Closer or wider
`Home`	Back to the front at eye level

Accessibility

The gizmo is driven by two range inputs, "Orbit" and "Tilt", that read their values in words. The stage shows a focus ring while either has focus.
The request sentence is a polite live region, so every change is read once in plain words.
The drawing and the camera view are hidden from screen readers; distance and presets are toggle groups.

Motion

Dragging orbits the camera with the pointer, no easing.
A preset or distance picked with the pointer glides the camera there in 220 ms on the kit ease. Keys and reduced motion jump.
The camera view inset follows the same values in the same frame.