How-to Guides

How-to guides are recipes. Each one assumes you already know the basics and shows you how to accomplish a single, concrete goal. If you're learning for the first time, start with the tutorials instead.

Getting set up

Install and build

Clone, build a release binary, and put cinecode on your PATH.

Create a project

Scaffold a new project and understand its layout.

Render videos

Render whole projects, single scenes, ranges, or PNG frames.

Working with code

Highlight & focus code

Spotlight lines, underline, surround, and point at code.

Edit code live

Insert, delete, and refactor code on screen, mid-scene.

Bind code to simulations

Link a line of code to a running diagram with s.link().

Motion & polish

Add camera moves

Pan, zoom, and rack-focus between elements.

Use easing & tweens

Retarget any animation with an easing curve.

Morph between elements

Dissolve and morph one element into another.

Draw shapes & images

Add panels, rectangles, circles, paths, and images.

Apply GPU shaders

Add WGSL effects and a bloom post-process.

Customize themes & fonts

Switch project themes, code themes, and fonts.