Camera2D

const compiled = createScene(function* (ctx) {
  const camera = ctx.spawn(Camera2D);
  const rect = { x: 40, y: 80, width: 320, height: 180 };
  const viewport = { width: 1280, height: 720 };

  yield* camera.zoomTo({ zoom: 1.4 }, { duration: 0.4 });
  yield* camera.panTo({ x: 120, y: 80 }, 0.3);
  yield* camera.focus({ rect, viewport, padding: 80 }, { duration: 0.5 });
});

Camera state resolves onto every frame:

const state = compiled.at(frame);
state.camera.zoom;
state.camera.centerX;

focus fits the left panel with 80px of padding — the zoom is computed from the rect. follow then binds the camera centre to the right panel with derived signals, so the camera tracks the panel's own layout.x tween without a second command. The world is drawn once and transformed with the exact string the scene renderer builds from state.camera.

import { Camera2D, rectOf } from "@motionactor/primitives/camera";

The /camera entry depends on @motionactor/core only; the package root also exports the Three-backed geometry helpers.

focus

focus computes the pan and zoom that fit a world-space rect inside a viewport with padding. Preferring it over hand-computed panTo + zoomTo pairs is what keeps a camera move correct when the rect or the viewport changes.

yield* camera.focus(
  { rect: card.worldLayout(), viewport, padding: 80 },
  { duration: 0.5, easing: inOutCubic },
);

Use it for

• Scene-level pan, zoom and rotation.
• Focus and follow behaviour around world-space targets.

Do not use it for

• Moving one actor. That is layout.x / layout.y on the actor itself.
• Parallax between layers — that is layer-level, not camera-level.