🎬 Transform Mode

How do I zoom and pan across one big canvas instead of cutting between slides?

2 min readView as markdown

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

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>;
PropTypeDefault
subSlidesTransformSubSlide[]required
durationnumber (ms)800
easingeasing name—
perspectivebooleanfalse

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

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.

IntroductionWhat is Narro, and should I be writing markdown or React?
InstallationWhat do I install, and what does the project look like afterwards?
First DeckWhat does a working React deck look like, end to end?
Markdown ModeHow do I split a slide, style one word, or reveal a line — without leaving the markdown file?
Writing AI PromptsWhat do I tell an AI so the deck it writes actually builds?
Rules for AI AgentsWhat do I paste into my repo so an agent stops writing decks that build wrong?
React APIWhich component or hook do I import, and what does it take?
CLIWhich command do I run, and what are its flags?
Markdown APIHow do I read, edit, or validate a deck file from my own code instead of by hand?
Component ReferenceWhat props does this component take, and which package do I import it from?
Verifying a deckHow do I know my deck is actually correct?
AnimationHow do I reveal a list one line at a time, or move between slides with something other than a cut?
NavigationHow does the audience move through the deck, and how do I present it?
Canvas & PositioningHow do I put something at an exact position instead of in the flow?
Images & MediaHow do I use an image as a background, tint it, or embed a video?
ArchitectureWhich package owns what, and why is the seam where it is?
Transform ModeHow do I zoom and pan across one big canvas instead of cutting between slides?
Import & ExportHow do I get this deck out as PPTX, PDF, or one file I can email?
AI IntegrationHow do I wire an AI assistant up to Narro so it can write and build decks?
ThemingHow do I change the colours, fonts, and overall look of a deck?
Deck TemplatesHow do I define one house style with named layouts my slides can reference, like a PowerPoint master?
TroubleshootingSomething is wrong with my deck. What is it, and how do I fix it?
LimitationsWhat can't Narro do, and what do I do instead?