A complete documentary

You can animate code and simulations. The final step is direction: stringing scenes together with transitions, guiding the eye with the camera, and adding audio. By the end you'll understand how the example documentary you rendered in lesson 1 is built.

Step 1 — Order your scenes

The manifest plays scenes in array order. The example lists all seventeen:

scenes = [
  "intro", "terrain", "pathfind", "particles", "graph", "life", "boids",
  "tweens", "inserts", "edit", "edit_source", "editor_theme", "font_set",
  "remove_styles", "morph", "shapes", "effects",
]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

Step 2 — Add transitions between scenes

A transition smooths the cut between scenes. Set a default for the whole project:

[transition]
kind = "crossfade"
frames = 18

Or call it inside a scene for a one-off:

s.transition("fade_color", 24, 0.03, 0.04, 0.08); // dip to a dark navy

The available kinds — cut, crossfade, fade_color, wipe_*, slide_* — are listed in Transitions reference.

Step 3 — Direct with the camera

The camera turns a static layout into a shot. Every scene can request one:

let cam = s.camera();

// Push in on the code element for the first 2 seconds
cam.focus_on(code, 96, 24, 1.7, 2);

// Then glide back out to a wide shot
cam.move_to(640, 360, 150, 30);
cam.zoom_to(1.0, 150, 30);

• focus_on(node, x, y, zoom, line) — frame an element (optionally a line)
• move_to(x, y, start, dur) — pan to a point
• zoom_to(zoom, start, dur) — change magnification

Step 4 — Add audio

Drop a soundtrack in the manifest:

[audio]
track = "assets/music.mp3"
volume = 0.6

CineCode muxes it into the final MP4 alongside the video.

Step 5 — Render the whole thing

Render everything in order, with quality settings for the final cut:

./target/release/cinecode render my-video -o documentary.mp4 --crf 18 --preset slow

• --crf (18–28) trades file size for quality; lower is better.
• --preset trades encode speed for compression efficiency.

Here is the example documentary, rendered exactly this way:

scenes = ["scenes/intro.ccs", "scenes/terrain.ccs", "scenes/pathfind.ccs", "scenes/particles.ccs", "scenes/graph.ccs", "scenes/life.ccs", "scenes/boids.ccs", "scenes/tweens.ccs", "scenes/inserts.ccs", "scenes/edit.ccs", "scenes/edit_source.ccs", "scenes/editor_theme.ccs", "scenes/font_set.ccs", "scenes/remove_styles.ccs", "scenes/morph.ccs", "scenes/shapes.ccs", "scenes/effects.ccs"]
theme = "dark_documentary"

[episode]
title = "How Rivers Form"

[output]
fps = 30
width = 1280
height = 720

[shaders]
aurora = "shaders/aurora.wgsl"
glitch = "shaders/glitch.wgsl"
scanlines = "shaders/scanlines.wgsl"

[transition]
kind = "crossfade"
frames = 18

Expand Files that made this video under the player to see the complete file set. Start with codescene.toml to understand the order, then open one scene at a time. The read("...") calls inside each scene show which source files are being filmed.

Where to go next

You've built a complete documentary. From here, dive into specific techniques: