Scene anatomy — canvas, elements, timeline, script

A scene is a single screen the learner sees. It has four coordinated parts:

1. Canvas — the visual: elements (text, images, shapes, charts, SmartArt) positioned in a 16:9 frame.
2. Timeline — when each element appears and disappears, in milliseconds.
3. Script — the spoken narration. Each phrase can carry inline cues that trigger animations on the timeline.
4. Quizzes (optional) — assessment blocks that gate progress.

Elements

Twelve element types: text, image, video, shape, button, chart, SmartArt, icon, connector, quiz blocks, container (columns/tabs), and embeds (HeyGen avatar, dynamic content). Each carries:

• Frame — x, y, width, height, rotation, opacity, z-index.
• Style — fonts, colours, fills, strokes, shadows. Inheritable from the course theme.
• Timeline window — startAt + endAt in ms. "Show until end" pins endAt to scene length.
• Animation — entrance, emphasis, exit. Triggered by either the timeline or a script cue.
• Lock / hide — operator flags so you can iterate on one element without bumping others.

The script ↔ canvas link

The script editor recognises cue chips: [show:element-id], [hide:element-id], [emphasise:element-id], [chart:type=bar,data=...]. At runtime the cue fires the moment the narrator's voice hits that word — alignment is computed by WhisperX so the visual lands on the beat.

When you regenerate a scene's script we re-annotate the cues to match. When you add a new element, the auto-layout pass inserts a corresponding [show:] cue at the most relevant sentence.

Snap, guides, alignment

Drag elements with the mouse; the canvas surfaces smart guides when you approach another element's edge, centre, or equal spacing. Hold Alt to bypass the snap. Resize handles snap to canvas edges + sibling sizes. The alignment toolbar (top of the inspector) aligns multi- selections relative to the canvas or to the bounding box of the selection.

See keyboard shortcuts for the full keymap.