CineCode Documentation

CineCode turns source code into cinematic programming documentaries. You describe a scene in a tiny scripting language, and the engine renders a pixel-identical MP4 — code that types itself out, simulations that come alive, and a camera that glides between them.

Every video on this site is real, unedited CineCode output, rendered straight from the rivers-project example.

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

Open Files that made this video under any clip. It shows the manifest, scene script, source files, shaders, and assets behind that exact render, so you can learn from the finished result without hunting through reference pages first.

What makes CineCode different

How it works — three ingredients

Every CineCode project is just three things working together. Once this clicks, everything else is detail:

• Your code (src/main.rs, or any file) is the subject. CineCode never rewrites it — it films it.
• The script (*.ccs) is the storyboard. It read(...)s your code and says how to type, spotlight, and move the camera over it.
• The manifest (codescene.toml) picks the theme, size, and which scenes play.

The key idea: the script never contains your code. It points at it.

// the .ccs script reads your real file...
let code = s.code(read("src/main.rs"), "rust", 96, 150);
// ...then says how to animate it
code.typewriter(6, 70).spotlight(2, 0.6, 90, 18);

When a page shows a video, read it in this order:

1. Watch the clip once to see the result.
2. Expand Files that made this video and find the .ccs scene script.
3. Look for read("...") in that script; that tells you which source file is being filmed.
4. Change one value, render again, and compare the result.

Find your way around

This documentation follows the Diátaxis framework. The four sections answer four different needs:

In a nutshell

A CineCode project is a folder:

my-video/
├── codescene.toml      # the manifest: scenes, theme, output size
├── scenes/
│   └── intro.ccs       # a scene script (Rhai)
└── src/
    └── main.rs         # the real code you want to show

First, the code you want to show — an ordinary source file:

fn main() {
    let greeting = "Hello, CineCode!";
    println!("{greeting}");
}

A scene script then reads it like a storyboard (notice read("src/main.rs")):

let s = scene("Introduction", 180);

s.text("Hello, CineCode", 96, 48).font_size(56).glow(0.6).fade_in(0, 20);

let code = s.code(read("src/main.rs"), "rust", 96, 160);
code.font_size(40).shadow(0.5).fade_in(0, 18).typewriter(8, 70);
code.spotlight(2, 0.6, 96, 18);

let cam = s.camera();
cam.focus_on(code, 96, 24, 1.7, 2);
cam.move_to(640, 360, 150, 30);
cam.zoom_to(1, 150, 30);

And one command renders it:

cinecode render my-video -o my-video.mp4