# Build camera flows — Dnalogel

Sequence a viewpoint transition and camera rotation with explicit completion handling.

Canonical: https://developer.realsee.ai/docs/dnalogel/camera-flows
Source: https://developer.realsee.ai/docs/dnalogel/camera-flows.md
Language: en

[Download examples](https://developer.realsee.ai/starters/react-five/1.3.0/starter.zip)

Use `CameraMovementPlugin` when a user action should guide the visitor to a panorama and look toward a feature. For narration and a timed script, use [Vreo](https://developer.realsee.ai/docs/vreo) instead.

## Sequence a move and a rotation

This function uses the ready Five instance and camera controller from the [quickstart](https://developer.realsee.ai/docs/dnalogel/quickstart). Supply an existing panorama index from the current Work.

```ts title="examples/sdk-guides/src/dnalogel/camera.ts"
import { Five } from '@realsee/five'
import type { CameraMovementPlugin } from '@realsee/dnalogel'

type CameraController = ReturnType<typeof CameraMovementPlugin>

export async function moveAndLook(five: Five, camera: CameraController, panoIndex: number) {
  const moved = await camera.move({ mode: Five.Mode.Panorama, panoIndex }, 1200, { preload: true })
  if (!moved) return false
  return camera.rotate({ panoIndex, longitude: Math.PI / 2, latitude: 0, fov: five.state.fov }, 1000)
}
```

Durations are milliseconds. Longitude and latitude are radians. The example preserves the current field of view explicitly because the published rotation implementation interpolates that value along with the angles.

Await the result before starting the next camera command. The published plugin may resolve `false` when an animation is interrupted and may reject when a panorama move is cancelled. Handle both outcomes in your calling button or flow and restore the controls in `finally`.

## Avoid competing controllers

Disable repeated activation while your sequence runs. A user gesture, another camera command, or a scene replacement can interrupt a transition. Do not assume that invoking the method means the camera arrived. For a product with a cancel control, define whether cancellation should keep the current view or restore the starting view.

## Verify

Run the sequence from two different starting viewpoints. Check the final panorama and orientation, then interrupt it with a gesture and confirm the UI becomes usable again. Re-run after scene replacement using an index from the new Work.

[Published movement contract](https://unpkg.com/@realsee/dnalogel@3.81.10/libs/CameraMovementPlugin/typing.d.ts) · [Published implementation](https://unpkg.com/@realsee/dnalogel@3.81.10/libs/CameraMovementPlugin/CameraMovementPlugin.js)