Camera

Each scene may have one camera, obtained with s.camera(). All positions are in the scene's pixel space (the output resolution), before the camera transform. Timing accepts raw frames or helpers such as ms(500) and sec(2).

let cam = s.camera();

focus_on(node, x, y, zoom, line)

Frame a node — optionally a specific line of code — at a given zoom level.

cam.focus_on(code, 96, 24, 1.7, 2); // push in on line 2 of `code` at 1.7×

move_to(x, y, start, dur)

Pan the camera center to a point.

cam.move_to(640, 360, sec(5), sec(1)); // glide to center over one second

zoom_to(zoom, start, dur)

Change magnification.

cam.zoom_to(1.0, sec(5), sec(1)); // ease back to 1×

dolly_to(x, y, zoom, start, dur)

A combined truck and push-in: pan the focal point to (x, y) and change the zoom together over one interval, so the two read as a single continuous move. Chained dollies each continue from the previous framing.

cam.dolly_to(640, 430, 1.5, sec(4), sec(1.2)); // push in on the action
cam.dolly_to(640, 360, 1.0, sec(6), sec(1));   // pull back out

shake(amp, start, dur)

A decaying handheld/impact shake of the whole scene. The focal point jitters by up to amp scene units at start and settles back to zero by start + dur. It's deterministic per frame, so renders are reproducible.

cam.shake(12, sec(5.4), sec(0.7)); // rattle the entire frame with a jolt

To wobble a single element instead of the whole frame, call shake on a node — see shake in Code animations.

The clip above comes from the motion-showcase example and also demonstrates node rotation, the SPRING ease, and relative sequencing.

Combining moves

Pan and zoom in the same frame window so they read as a single motion, and add easing for cinematic accel/decel:

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

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

See also: Add camera moves.