🎬 Transform Mode

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

3 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={1} easing="backInOut" />
</Slide>;
PropTypeDefault
subSlidesTransformSubSlide[]required
durationnumber (seconds)1
easingeasing nameeaseInOut
perspectivebooleanfalse
perspectiveValuenumber (px)1000
initialSubSlidenumber0

duration is seconds, not milliseconds. Every duration in @getnarro/core is; @getnarro/shared-ui uses milliseconds, and that split is the sharpest edge in the library — see Limitations. duration={1000} is not a one-second flight, it is a sixteen-minute one, and it renders as a camera that never appears to move. A duration above 30 warns in development for exactly this reason.

perspective is off unless you ask for it. It only matters if your positions use z, and turning it on promotes the whole camera subtree to a GPU texture — which is what makes scaled text blurry.

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. ← walks back the same way, Home and End jump to the first and last position, and Ctrl/Cmd with an arrow skips the whole slide. The presenter does not have to think about the distinction.

Only the active slide listens, so a transform slide three slides away never steals a keypress.

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?
Zooming canvasHow do I zoom and pan across one big canvas instead of cutting between slides?
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?
VideoHow do I turn a story into a video, and keep it right when the words, the product or the source changes?
Recording a web appHow do I put a demo of my product in a deck or on a landing page without shipping a video of it?
Embedding a replayHow do I embed a recorded demo of my app in my React app, my Astro site, or any other page?
TerminalHow do I put a terminal demo in a deck, a README or a video, and find out when the tool it demonstrates stops saying what the demo says?
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?