Animation

#How time works

A scene owns a timeline, and step markers (=== in the narrative) carve it into steps. Everything animated anchors to that clock through a cue anchor: a step index (2), an absolute scene time (1500ms), or a step with an offset (2 + 500ms). The scene's own duration, autoplay and loop attributes govern playback.

#The cue family

Cues wrap board content and give it presence on the timeline:

• cue — fades its content in at in: and out at out:.
• cue.draw — presence, drawn: strokes draw along their own length; fills arrive as the stroke completes.
• cue.trace — moves its content along a referenced curve: cue.trace{ point(x: 0; y: 0) }(path: #flight; at: 2).
• cue.highlight — attention, without changing presence.
• cue.spotlight — attention by dimming everything else.
• cue.type — the code pane's typing reveal.

canvas.graph{
    scatter(data: (1, 2.0), (2, 2.4), (3, 3.1))
    cue{
        fit(model: polynomial; degree: 1)
    }(
        in: 1
        in-duration: 800ms
    )
}

#Keyframes

Presence is only half of animation; the other half is values that move. A !cue.to keyframe is written inside an animatable attribute's value. The attribute's own value is the base state; each keyframe names the value to move to and when:

canvas.graph{
    curve(expression: 100 - 4.9x^2)
}(
    x-domain: [0, 5] !cue.to{[0, 10]}(at: 2)
)

Keyframes chain left to right on one attribute — zoom: 5 !cue.to{6.5}(at: 2) !cue.to{8}(at: 4 + 1.5s; over: 800ms) — and any attribute a reference page marks animatable takes them: domains, coordinates, hidden (a reveal that still frames the plot), colours.

#Zoom keyframes

!cue.zoom is the graph-domain variant that announces itself: a box is drawn around the smaller of the two windows, held, and only then does the view move — into the box when zooming in, out of it when zooming out. The box never moves in data coordinates. draw: and hold: time the box, colour: paints it, and a chain may mix the two micronodes freely.

x-domain: [0, 10] !cue.zoom{[2, 4]}(at: 2; draw: 400ms; hold: 300ms; colour: blue)

#Timing and easing

Every transition takes an easing — smooth by default, linear for constant speed — and a duration: in-duration / out-duration on cues (500ms for fades, 1500ms for draws), over: on keyframes (1500ms). Durations are written in milliseconds, with ms and s suffixes accepted where a time is written.