# Transform Mode

> Prezi-style spatial navigation with TransformSlide

`TransformSlide` puts content on a plane and moves a camera between positions
instead of cutting between slides. One canvas, many framings.

```tsx
import { TransformSlide, type TransformSubSlide } from "@getnarro/core";

const steps: TransformSubSlide[] = [
  {
    content: <Heading level={1}>The whole system</Heading>,
    position: { x: 0, y: 0, scale: 1 },
  },
  {
    content: <Text>Zoom into ingestion</Text>,
    position: { x: 100, y: 0, scale: 0.8, rotate: -5 },
  },
  {
    content: <Text>And into storage</Text>,
    position: { x: 50, y: 80, scale: 1.2, rotate: 5 },
  },
];

<Slide id="tour">
  <TransformSlide subSlides={steps} duration={1000} easing="backInOut" perspective />
</Slide>;
```

| Prop | Type | Default |
| --- | --- | --- |
| `subSlides` | `TransformSubSlide[]` | required |
| `duration` | `number` (ms) | `800` |
| `easing` | easing name | — |
| `perspective` | `boolean` | `false` |

Each `position` is `{ x, y, scale, rotate? }`, where `x` and `y` are offsets
from the canvas origin and `scale` is the camera's zoom.

## Navigation

Sub-slides are navigation steps, like fragments: `→` moves to the next position
and only advances past the last one to the next slide. The presenter does not
have to think about the distinction.

## When it earns its keep

Transform mode is the right call when the spatial relationship *is* the content
— a system diagram you tour, a map, a timeline that reads as one long line, a
zoom from summary into detail and back out.

It is the wrong call for a normal talk. Constant camera movement is tiring to
watch and disorienting on a large screen, and audiences lose the thread when
they cannot tell where they are. If the connection between two slides is
logical rather than spatial, a cut says it better than a swoop.

A good compromise: normal slides for most of the deck, one transform slide for
the part that genuinely benefits.

## Motion sickness

Large scale changes and rotation are the parts that make people uncomfortable.
Keep `scale` within roughly 0.5–2, use `rotate` sparingly, and keep `duration`
under about 1200ms — a slow swoop is worse than a quick one.