Code & node animations

Builders like s.text(...), s.code(...), and the shape constructors return a node. You configure a node by chaining the methods below. Methods that take start, dur accept raw frames or time helpers (ms(500), sec(2), s(2)); line numbers are 1-based.

Entrance animations

Method	Description
`fade_in(start, dur)`	Fade from transparent to opaque.
`dissolve(start, dur)`	Dissolve into view.
`typewriter(start, dur)`	Type text out character by character.
`slide_up(start, dur)`	Rise into position.
`slide_in(dir, dist, start, dur)`	Slide in from a direction over a distance.
`appear(start, dur)`	Pop into existence.
`grow_in(start, dur)`	Scale up from nothing.
`blur_in(start, dur)`	Resolve from a blur.

Exit animations

Method	Description
`fade_clip(start, dur)`	Fade out a clipped region.
`wipe_out(start, dur)`	Wipe the node away.
`shrink_out(start, dur)`	Scale down to nothing.
`blur_out(start, dur)`	Dissolve into a blur.
`morph_out(start, dur)`	Morph the node away.

Movement & transforms

Method	Description
`shift(start, dur)`	Nudge the node.
`pulse(start, dur)`	A brief scale pulse for emphasis.
`scale_to(factor, start, dur)`	Scale to a target factor.
`fade_to(opacity, start, dur)`	Fade to a target opacity.
`color_to(r, g, b, start, dur)`	Tween to a target color.
`rotate(deg)`	Set a static rotation (degrees, clockwise) about the node's origin.
`rotate_to(deg, start, dur)`	Animate rotation to `deg`; chain `.ease(SPRING)` for a springy snap.
`spin(turns, start, dur)`	Rotate `turns` full revolutions at constant speed, relative to the current angle.
`shake(amp, start, dur)`	Wobble this element only by up to `amp` px, decaying to 0.

Rotation

rotate sets a fixed angle; rotate_to and spin animate it. Angles are in degrees, clockwise, pivoting about the node's transform origin. Retarget rotate_to with any easing — SPRING gives a lively overshoot-and-settle.

let card = s.square(600, 360, 120).rotate(45);   // start tilted
card.rotate_to(0, sec(1), sec(1.4)).ease(SPRING); // snap upright, springy
badge.spin(2, sec(0), sec(2.4));                  // two full turns, constant speed

Shake

shake jitters a single node's position by up to amp pixels at start, settling back to zero by start + dur. Only that element moves — everything else stays put. It's deterministic per frame, so renders are reproducible. (To rattle the whole frame instead, use the camera's shake.)

card.shake(20, sec(5.4), sec(0.8)); // an impact wobble on just this card

Live code editing

Method	Description
`backspace(start, dur)`	Delete characters from the end.
`backspace_to(keep, start, dur)`	Delete back to a kept prefix.
`type_to(chars, start, dur)`	Reveal up to an explicit character count.
`retype(text, start, dur)`	Type replacement text.

See Edit code live.

Timing modifiers

Method	Description
`ease(equation, mode)`	Retarget the previous animation with an easing curve.
`delay(frames)`	Offset the previous animation in time.

code.slide_up(0, ms(800)).ease(CUBIC, EASE_OUT).delay(ms(333));

See Easing.

Style

Method	Description
`font_size(px)`	Set the font size.
`font(name)`	Select a loaded font.
`opacity(a)` / `alpha(a)`	Static base opacity (`0`–`1`). Multiplies the animated track, so it composes with `fade_in`/`dissolve`.
`glow(amount)`	Add a glow.
`shadow(amount)`	Add a drop shadow.
`blur(amount)`	Apply a blur.

s.text("Subtle watermark", 60, 60).opacity(0.35);
code.opacity(0.8).fade_in(0, 16);   // dimmed code that fades in to 0.8

opacity(a) is a constant base level; fade_to(a, start, dur) animates toward a target. The on-screen alpha is opacity × (animated track), so .opacity(0.5).fade_in(0, 18) fades from 0 up to 0.5.

Shape styling

Method	Description
`fill(r, g, b)` / `no_fill()`	Set or clear the fill.
`stroke(r, g, b)`	Set the stroke color.
`stroke_width(px)`	Set the stroke width.
`radius(px)`	Corner radius (rects/panels).
`dashed()` / `dotted()` / `solid()`	Stroke style.
`defocus()` / `refocus()`	Blur/unblur the shape for depth.

Focus (code/text)

Method	Description
`highlight(line, start, dur)`	Raise a styleable accent bar behind a line. Returns a chainable `Highlight` builder.
`highlight_line(line, start, dur)`	Plain accent bar behind a line (no builder).
`dim_others(line, dim, start, dur)`	Focus a line and dim every other line.
`spotlight(line, dim, start, dur)`	Focus a line and dim the rest — no accent bar.
`execution_cursor(line, start, dur)`	A "program counter": accent bar plus dimming, marking the line currently running.
`execution_flow(lines, start, step)`	Step the cursor through an ordered list of lines (`[1, 2, 5, 2, 6]`) — watch control flow move. Holds at the end.
`unfocus(start, dur)`	Release all focus effects.

code.spotlight(3, 0.6, 80, 24);   // dim others, no bar
code.spotlight(7, 0.6, 120, 24);  // focus glides to line 7
code.highlight(3, 80, 24);        // accent bar behind line 3
code.unfocus(170, 12);

`Highlight` builder

Chain setters off highlight(...) to style the bar (Tailwind/GPUI-style). Each returns the builder; colors are 0–1 RGBA.

Method	Description
`bg(r,g,b[,a])` / `color(...)`	Bar fill color.
`opacity(a)` / `alpha(a)`	Bar fill alpha only (leaves `bg` rgb untouched).
`rounded(r)` / `rounded()`	Corner radius (no-arg `= 8`). Alias `radius(r)`.
`pad(x,y)` / `pad(v)`	Padding around the line (px).
`border(w)` / `border()`	All four edges (width `= 2`).
`border_top/right/bottom/left()`	Single edge.
`border_x()` / `border_y()`	Left+right / top+bottom.
`border_color(r,g,b[,a])`	Border color (defaults to fill).
`border_width(w)`	Stroke width.
`border_solid/dashed/dotted()`	Border line style.
`no_border()`	Clear all borders.

code.highlight(3, 80, 24)
    .bg(0.20, 0.55, 1.0, 0.25)
    .rounded(8)
    .pad(8, 4)
    .border_left()
    .border_color(0.20, 0.55, 1.0)
    .border_dashed();

In action

Entrance animations and easing presets.

Files that made this video

A gallery scene showing easing curves and tween presets.

codescene.toml

Project manifest: output size, theme, scene order, transitions, and shader names.

Open full file

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

Code & node animations

On this page