Cinema mode

Cinema mode turns the slide deck into a Prezi-style camera tour over one virtual world canvas. Place all your elements anywhere on a 4000×2400 (or bigger) world, then animate the camera between viewports — pan, zoom, roll, plus depth-based parallax. Perfect for kinetic typography reels, brand intros, and any deck where the motion should feel cinematic instead of slide-by-slide.

Enabling Cinema mode

1. Open a project in the editor
2. Toolbar → mode toggle → click Cinema (Pro)
3. A help overlay opens the first time you enter cinema mode (and on every re-enable until you tick "don't show again"). Re-open it anytime via the ? button next to the view toggle.

Cinema mode works with any canvas size; the slide canvas dims become the camera viewport size in /present and exports.

The two views

Cinema editing introduces a second view mode in the editor:

Toggle with the icon pair next to the project mode picker in the toolbar.

Editing cameras (World view)

In World view each slide's camera viewport is rendered as a rectangle on the world. The active slide's rect is solid cyan and editable; other slides' rects are dashed gray ghosts.

• Drag the active rect's border (or its label) to move
• Drag any of the 8 corner / edge handles to resize
• Click a dashed ghost rect to jump to that slide and make its camera active
• Cyan dashed line connects every consecutive camera's center — that's the camera path the deck takes from slide to slide

The active rect's interior is click-through — so a full-world camera doesn't block your access to ghost rects underneath. Drag from the border edge or label to move it.

Modifier keys (during a camera drag)

Parallax depth

Each element has a depth value from −1 to +1 that controls how it parallaxes against the camera:

• +1 = closest to camera (moves the most)
• 0 = neutral, tracks the camera 1:1 (default)
• −1 = farthest (moves the least, drifts behind)

Set per-element in the Animate tab → Parallax Depth slider (only visible in cinema mode). Color-coded badges on every element in the canvas tell you the layer at a glance:

• F+0.7 — foreground
• — — neutral
• B−0.4 — background

Auto-frame: one-click camera tour

Already placed elements all over the world? Click ✨ Suggest cameras for all slides in the Slide panel (Cinema Camera section). The algorithm:

1. Collects every unique element across the project (de-duped by id)
2. Drops world-spanning background fills (so they don't pull every cluster toward world center)
3. Greedily clusters elements by spatial proximity
4. Generates one 16:9 camera per cluster with ~120px padding
5. Sorts row-major (top-to-bottom, left-to-right) for a natural reading order
6. Replaces every slide's camera with the result (extends the slide list if there are more clusters than slides)

Confirms via a Svelte modal before applying. Ctrl+Z reverts everything if the result isn't what you want.

Live mini-preview

In World view, a small thumbnail anchored to the bottom-right of the editor shows what the active camera will frame in /present, live as you drag. Collapse it with − if you want more workspace.

Cinema-mode JSON

Project file changes when you enable cinema mode:

{
  "mode": "cinema",
  "settings": {
    "worldWidth": 4000,
    "worldHeight": 2400,
    "defaultTransition": { "type": "none", "duration": 1500, "easing": "ease-in-out" }
  },
  "slides": [
    {
      "camera": { "x": 0, "y": 0, "width": 1920, "height": 1080, "rotation": 0 },
      "canvas": {
        "elements": [
          { "id": "title", "type": "text", "depth": 0.2, "position": { "x": 200, "y": 300 }, ... }
        ]
      }
    },
    { "camera": { "x": 1800, "y": 600, "width": 1280, "height": 720, "rotation": 5 }, ... }
  ]
}

See the full schema at JSON reference.

Best-practice rules

• Cameras must match slide aspect ratio — 1920×1080 slide → all cameras 16:9 (1920×1080, 2400×1350, 3200×1800, etc.). Mismatched ratios letterbox.
• Same elements on every slide. The cinema "magic" is the camera glide; if elements ALSO move between slides the motion fights the camera. One static world, moving camera.
• Slide transition must be "none". The CSS-driven camera transition handles motion. "fade" or other transitions interrupt it.
• Slide duration 4000–4500ms, transition 1200–1800ms. Camera glides need time to land cinematically. Snappier values make it feel like a slide deck again.
• Don't pack 4+ headlines into one scene rect. Cinema rewards minimalism — 1 hero line + 1 supporting line per scene.
• Camera rotation ±2-4° for typography pieces. Heavier rotations make text unreadable mid-glide.

Generate cinema decks with the AI skill

The Animot Generator skill ships two cinema reference projects (cinema-space-demo.json and cinema-kinetic-text.json) and full cinema-mode patterns in its prompt. Ask Claude to "make a kinetic typography manifesto in cinema mode" and you'll get an importable JSON in under a minute.

Exports

Cinema decks export the same way as any other project — MP4 / GIF via the toolbar's Export menu. Each slide's hold duration becomes a section of the export; the camera glide between slides is captured frame-by-frame so the motion is smooth and deterministic.