Build Prezi

0%0 of 17 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A zooming canvas presentation tool where the interesting engineering is a smooth camera path across a large canvas and the governing constraint is that the motion must be optional without the presentation becoming incoherent.

estimated effort multi-daythe files for this build are in the project pack

CanvasA single large scene with content placed spatiallyCameraNamed viewpoints with an ordered path between themMotionInterpolation with capped rate and rotation, honouring reduced motionRenderingVector where possible so zooming stays sharpRuntimeTypeScript with local documents

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Runs the editor and the presenter.
Get it nodejs.org, or nvm install 22. open ↗
Verify node --version prints v22 or higher
decidefree
Why They are constants in the transition path, and deciding them after building a presentation means fitting them to the presentation rather than to the audience.
Get it Set a maximum zoom rate and rotation, erring conservative, and write down the reasoning.
Verify Both are written down and appear as constants in the motion module
have readyfree if you have one
Why Presenter view and aspect ratio cropping are both only testable with a real second screen, and cropping is discovered in front of an audience otherwise.
Get it Any second display, ideally one whose aspect ratio differs from your authoring machine.
Verify The presentation runs across two displays and previews correctly at another aspect ratio
have readyfree
Why Motion tolerance varies enormously and the author is the worst judge, since they know where the camera is going next.
Get it Show a full run to two or three people and ask specifically about discomfort rather than about the content.
Verify At least three people have watched a full run and been asked directly
have readyfree
Why The reduced-motion and static export checks are about whether the argument survives, and a demonstration deck of shapes has no argument to lose.
Get it Use a talk you have actually given or will give.
Verify A presentation exists with at least fifteen viewpoints and a conclusion

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- presentations(id, title, canvas_width, canvas_height, reduced_motion_checked)
- elements(id, presentation_id, kind, x, y, width, height, rotation, z, content_json, is_vector)
- viewpoints(id, presentation_id, ordinal, x, y, width, height, rotation, dwell_note)
- transitions(from_viewpoint_id, to_viewpoint_id, duration_ms, easing, computed_rate, exceeds_cap)
- speaker_notes(viewpoint_id, body)
- exports(id, presentation_id, kind, path, motion_mode, at) · kind is document, video or static deck
- A transition stores its computed motion rate, so a path that would exceed the cap is detectable at authoring time rather than during a presentation.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`DOCUMENTS_DIR`	required	`~/Documents/presentations`	Presentation files. A presentation is a document.
`MAX_ZOOM_RATE`	required	`2.0`	A constant in the transition path. Not adjustable at runtime.
`MAX_ROTATION_DEGREES`	required	`15`	Rotation is the worst offender for nausea. Keep it small.
`RESPECT_REDUCED_MOTION`	required	`always`	Present as a constant. The person affected cannot leave the room.
`TARGET_ASPECT_RATIOS`	required	`16:9,16:10,4:3`	Previewed at authoring, because cropping is found in front of an audience.
`OFFLINE_ONLY`	required	`always`	Present as a constant. A presentation must not depend on the room's network.

The build, in order

1
A canvas and a path across it
Content sits in space and a sequence of viewpoints moves through it.
1. Recorded motion cannot be reordered, and reordering is constant.
  Files src/viewpoints.ts
2. Restructuring a presentation is the normal case.
  Files src/path.ts
3. Going back should return to the same framing, not an approximation.
  Files src/navigate.ts
done when · tick each as it passes
watch out
- Recording camera movement as the author drags produces a path that cannot be reordered or adjusted without redoing everything, and presentations get restructured constantly. Store named viewpoints and derive the motion, so reordering is moving a list item.
next phase
2
Motion with a ceiling
No transition can move fast enough to make people ill.
1. Not settings. The person affected is not the one adjusting them.
  Files src/motion.tssrc/motion.test.ts
2. So a bad path is a flag rather than a surprise during a talk.
  Files src/transitions.ts
3. Rather than accelerating to cover distance in the same time.
  Files src/motion.ts
done when · tick each as it passes
watch out
- Leaving motion intensity as a setting means it gets increased for effect, and the person who suffers is in the audience rather than at the keyboard. Cap the rate and rotation as constants, and flag an authored transition that would exceed them so the author fixes the path rather than the limit.
next phase
3
A version with no motion at all
The presentation works as cuts and still makes sense.
1. Not shorter transitions. Cuts.
  Files src/reduced.ts
2. A checked output, with the check recorded.
  Files src/review.ts
3. If it only reads during the zoom, it does not survive the export either.
  Files src/analysis.ts
done when · tick each as it passes
watch out
- Treating reduced motion as a degraded mode nobody tests produces a version where three points revealed by a zoom all appear at once and contradict each other, which is worse than the motion for the person who needed it off. Check the reduced-motion version explicitly and flag viewpoints whose content depends on the movement.
next phase
4
Presenting without surprises
The presentation runs on the machine and screen it will actually be given on.
1. A missing font on the day changes every layout.
  Files src/present.ts
2. Cropping is discovered in front of the audience otherwise.
  Files src/aspect.ts
3. It happens, and it should not lose your place.
  Files src/present.ts
done when · tick each as it passes
watch out
- A presentation that reflows or reframes for a different aspect ratio will crop content out of a viewpoint on the room's projector, and it is discovered in front of the audience. Compute framing for the target aspect ratio and let the author preview it before the day.
5
Exports that still make the argumentproduct builder
The presentation survives being read rather than watched.
1. Most of a presentation's life is being read, not watched.
  Files src/export.ts
2. So it is searchable, selectable and readable by assistive tools.
  Files src/export.ts
3. If the argument needed the zoom, it needed rewriting.
  Files src/review.ts
done when · tick each as it passes
watch out
- An export that only produces a video preserves the motion and loses everything else, and most of a presentation's life is spent being read afterwards by people who were not there. Export viewpoints as a readable sequence with the notes, and check that the argument survives the loss of the motion.

what this build does not replace

Real-time collaborative editing.
Template and asset libraries.
Video recording with presenter overlay.
Viewing analytics.
presentation and enterprise controls
production codecs, rendering speed, and media templates
multiplayer cursors and comments
large template libraries
high-fidelity import and export

after v1, if you want it

An outline view that edits the path as a list, which is how most restructuring happens
Automatic viewpoint framing from element selection, which removes most of the fiddling
A rehearsal timer against dwell notes, once the path is stable

Need the files? The project pack on the verdict page hands your agent the whole brief · more presentations.