API reference

Aspecttype

type Aspect = "16:9" | "9:16" | "1:1" | "4:3" | "21:9"

Captioninterface

• t0: number
• t1: number
• text: string

Chapterinterface

• title: string
• time: number

Clipinterface

• t0: number
• t1: number
• labels: string[]

CompiledFilmclass

A film ready to sample. frame(t) is pure: seek to any time, in any order.

new CompiledFilm(stage

• width: number
• height: number
• fps: number
• duration: number
• title: string
• description: string
• look: Look
• bloom: number
• background: string | null
• posterTime: number | undefinedThe author's chosen poster time, when set.
• bleed: boolean
• chapters: readonly Chapter[]
• clips: readonly Clip[]
• captions: readonly Caption[]
• stage: Stage
• frameCount: number
• preloadImages(): Promise<void>Preload static and keyed images, including those not visible in the first frame.
• frame(time: number): FrameThe draw list at a time in seconds. May throw Suspend if a drawing needs a new asset.
• svg(time: number, options?: { transparent?: boolean | undefined; scale?: number | undefined; }): stringStandalone SVG for a time.

compileFilmfunction

Run the build function, waiting for fonts and math when it asks for them, and return a seekable film.

function compileFilm(definition: FilmDefinition, overrides?: CompileOverrides): Promise<CompiledFilm>

CompileOverridesinterface

• imageNetwork?: "allow" | "deny" | undefined
• look?: Look | "midnight" | "paper" | "blueprint" | "chalk" | "neon" | undefined
• fps?: number | undefined
• bloom?: number | undefined
• background?: string | null | undefined

filmfunction

Define a film: a function that authors a timeline on a stage.

function film(build: (stage: Stage) => void | Promise<void>): FilmDefinition
function film(options: FilmOptions, build: (stage: Stage) => void | Promise<void>): FilmDefinition

FilmDefinitioninterface

• kind: "vizmatic.film"
• options: FilmOptions
• build: (stage: Stage) => void | Promise<void>
• compile: (overrides?: CompileOverrides | undefined) => Promise<CompiledFilm>Compile with the engine that authored this film. The clock is module state, so a tool with its own bundled engine must call this and not its own compileFilm.

FilmOptionsinterface

• imageNetwork?: "allow" | "deny" | undefinedLegacy URL images are allowed by default. Prepared image assets never use the network.
• bleed?: boolean | undefinedLines and shapes run past the frame edges on purpose, as a warped grid does. Text is still checked.
• title?: string | undefined
• description?: string | undefined
• aspect?: Aspect | undefinedLogical stage size. 16:9 is 1920x1080. Everything is authored in these units.
• width?: number | undefined
• height?: number | undefined
• fps?: number | undefined
• look?: Look | "midnight" | "paper" | "blueprint" | "chalk" | "neon" | undefined
• font?: FontFamily | undefinedThe font of every text of the film that names none: a text() with no font, and each label of an object that got no font. A text or an object that names a font keeps it, and so do the code and the values that an object sets in mono. Without it, such a text is sans.
• background?: string | null | undefined
• bloom?: number | undefinedLight that spills from bright marks. Defaults to the look's value.
• poster?: number | undefinedTime in seconds of the frame to use as a poster. Defaults to the richest frame.

isFilmfunction

function isFilm(value: unknown): value is FilmDefinition

isSuspendfunction

True for a Suspend thrown by any copy of the engine.

function isSuspend(error: unknown): error is Suspend

PlayOptionsinterface

• duration?: number | undefined
• ease?: Ease | undefined
• label?: string | undefinedName shown in timelines.

Stageclass

The timeline a film is authored on. All coordinates are centered: (0, 0) is mid-frame and y points down.

new Stage(options

• root: Node
• camera: NodeMove, zoom, and rotate the view with to(s.camera, ...). sx is the zoom.
• width: number
• height: number
• fps: number
• look: Look
• font: FontFamily | nullThe font that the film names for its texts, or null when it names none. A text with no font is then sans.
• chapters: Chapter[]
• clips: Clip[]
• captions: Caption[]
• updaters: Updater[]
• lights: Light[]The lights that spotlight added. settleLights turns them into the dim of each node, in time order.
• arrivals: WeakMap<Node, number>Three records for the lights, of facts that the timeline does not hold. Only a film with a light reads them, so they change nothing in a film with none. arrivals is the time at which a verb brought a node to the stage: a node that arrives at the very time of a light enters with it, and at time 0 the timeline cannot tell it from a node of s.add. marks is the node that a mark of a verb belongs to, such as the line of circumscribe and its target: the mark is as bright as that node. morphs is each morph with its nodes: a light must not dim a node while it changes its shape.
• marks: Map<Node, Node>
• morphs: MorphRecord[]
• backdrop: RgbaThe color that a dim node goes toward: the background of the film, or of its look when the film has none.
• time: number
• right: numberHalf of the frame in each direction.
• left: number
• top: number
• bottom: number
• add<T extends Node>(first: T, ...rest: Node[]): TPut nodes on stage now. Returns the first, so setup reads as one line.
• mountAt(node: Node, time: number): voidPut a node on stage so it first shows at time, which may differ from the cursor.
• remove(...nodes: Node[]): void
• play(...items: (Anim | PlayOptions)[]): StageRun animations together and advance the timeline past them.
• wait(seconds?: number): StageHold on the current picture.
• at(time: number, build: () => void): StageAuthor something at another time, then return to where you were.
• chapter(title: string): StageMark a chapter for the player, presentation steps, and the timeline.
• caption(text: string, duration?: number): StageShow a caption for a span of time. Captions also export as a VTT sidecar.
• value(initial?: number): ValueA number that animates, for driving dynamic drawings.
• update<T extends Node>(node: T, fn: (node: T, time: number) => void, window?: { from?: number | undefined; to?: number | undefined; }): TRe-run a function each frame while the node shows. It can set any property on the node.
• duration: number

Suspendclass

Thrown while an asset loads. The compiler waits and runs the build function again.

new Suspend(promise

• isVizmaticSuspend: trueLets a second copy of the engine recognize this without instanceof.
• message: stringWhat a tool prints when this leaves the compiler: a text at the top of a film file throws it when the file loads, and a second copy of the engine throws one that this copy does not know.
• promise: Promise<unknown>
• toString(): string

alongfunction

Follow a path, or the shape of a node, from start to end.

function along(node: Node, track: Node | Path, options?: AnimOptions & { orient?: boolean | undefined; }): Anim

Animinterface

A piece of motion. schedule writes timeline keys for a window of time.

• label: string
• duration: number
• ease?: Ease | undefined
• schedule(ctx: AnimContext): void

AnimContextinterface

• t0: number
• t1: number
• ease: Ease
• stage: Stage

AnimOptionsinterface

• duration?: number | undefined
• ease?: Ease | undefined
• lag?: number | undefinedFraction of one item's time between the starts of consecutive items.

appearfunction

Show at this moment, with no transition.

function appear(target: Target): Anim

applyMatrixfunction

Multiply a node's geometry by a 2x2 matrix around a stage point.

function applyMatrix(target: Target, matrix: readonly [readonly [number, number], readonly [number, number]], options?: AnimOptions & { origin?: Vec | undefined; yUp?: boolean | undefined; }): Anim

callfunction

Run a plain function at a moment on the timeline.

function call(fn: () => void): Anim

circumscribefunction

Trace a line around a node for emphasis, then let it run off.

function circumscribe(target: Node, options?: AnimOptions & { color?: ColorInput | undefined; pad?: number | undefined; radius?: number | undefined; width?: number | undefined; }): Anim

delayfunction

function delay(anim: Anim, seconds: number): Anim

drawfunction

Trace strokes in order. Filled shapes outline first, then fill.

function draw(target: Target, options?: AnimOptions): Anim

erasefunction

The reverse of draw.

function erase(target: Target, options?: AnimOptions): Anim

fadefunction

function fade(node: Node, opacity: number, options?: AnimOptions): Anim

fadeInfunction

function fadeIn(target: Target, options?: FadeOptions): Anim

FadeOptionsinterface

• shift?: Vec | undefinedStart offset for fades in, or travel for fades out.
• scale?: number | undefinedStart scale for fades in, or end scale for fades out.
• duration?: number | undefined
• ease?: Ease | undefined
• lag?: number | undefinedFraction of one item's time between the starts of consecutive items.

fadeOutfunction

function fadeOut(target: Target, options?: FadeOptions): Anim

flashfunction

Radial burst at a point, for a moment of arrival.

function flash(point: Node | Vec, options?: AnimOptions & { color?: ColorInput | undefined; radius?: number | undefined; rays?: number | undefined; }): Anim

growfunction

Scale up from nothing. Pass a stage point to grow from it, such as an arrow's tail.

function grow(target: Target, options?: AnimOptions & { from?: Vec | undefined; }): Anim

indicatefunction

Swell and tint for a moment, then return.

function indicate(target: Target, options?: AnimOptions & { color?: ColorInput | undefined; scale?: number | undefined; }): Anim

laggedfunction

Start each piece after a fraction of the previous one has played.

function lagged(anims: readonly Anim[], options?: { lag?: number | undefined; duration?: number | undefined; }): Anim

morphfunction

Turn from into to, whatever their shapes. Afterwards to is on stage and from is hidden, so later code always refers to the node it can see.

function morph(from: Target, to: Target, options?: AnimOptions & { lag?: number | undefined; }): Anim

morphMatchingfunction

Morph equations and labels by meaning. Glyphs that exist on both sides travel to their new places. The rest fade out or in where they stand.

function morphMatching(from: Node, to: Node, options?: AnimOptions & { key?: ((leaf: Node) => unknown) | undefined; fadeShift?: Vec | undefined; }): Anim

moveTofunction

function moveTo(node: Node, target: Node | Vec, options?: AnimOptions): Anim

parfunction

Run together. Each piece keeps its own length unless the whole is rescaled.

function par(...anims: readonly Anim[]): Anim

pulsefunction

A short lit segment that travels along a line: a packet on an edge, a signal on a wire. The source line stays in place underneath.

function pulse(line: Node, options?: AnimOptions & { color?: ColorInput | undefined; length?: number | undefined; width?: number | undefined; glow?: number | undefined; }): Anim

recolorfunction

function recolor(node: Node, color: ColorInput, options?: AnimOptions): Anim

retimefunction

Change an animation's length or easing without changing what it does.

function retime(anim: Anim, options: AnimOptions): Anim

ripplefunction

Expanding ring that fades out, for a pulse from a point.

function ripple(point: Node | Vec, options?: AnimOptions & { color?: ColorInput | undefined; radius?: number | undefined; width?: number | undefined; }): Anim

rotatefunction

function rotate(node: Node, radians: number, options?: AnimOptions & { about?: Vec | undefined; }): Anim

scaleByfunction

function scaleBy(node: Node, factor: number | Vec, options?: AnimOptions & { about?: Vec | undefined; }): Anim

seqfunction

Run one after another.

function seq(...anims: readonly Anim[]): Anim

shakefunction

Shake gently to draw the eye.

function shake(node: Node, options?: AnimOptions & { angle?: number | undefined; cycles?: number | undefined; }): Anim

shiftfunction

function shift(node: Node, dx: number, dy: number, options?: AnimOptions): Anim

Targettype

type Target = Node | readonly Node[]

tofunction

Animate any change. Make the change on the node inside the callback, and the engine interpolates from the old state to the new one, including geometry. s.play(to(dot, (d) => d.moveTo(axes.p(2, 4)).color('yellow').scale(1.5)))

function to<T extends Node>(node: T, change: (node: T) => unknown, options?: AnimOptions & { restore?: boolean | undefined; }): Anim

Valueclass

A number on the timeline. Read .value inside dynamic and update to drive anything.

new Value(initial

• track: Track<number>
• value: number
• set(value: number): ValueSet at the current point on the timeline.
• to(value: number, options?: AnimOptions): Anim

vanishfunction

Hide at this moment, with no transition.

function vanish(target: Target): Anim

warpfunction

Deform every shape under a node through a function of stage position. This is how a grid bends under a matrix or a complex map.

function warp(target: Target, f: (x: number, y: number) => Vec, options?: AnimOptions & { subdivisions?: number | undefined; }): Anim

writefunction

Handwrite text and equations: each glyph is outlined, then filled.

function write(target: Target, options?: AnimOptions): Anim

BlendModetype

type BlendMode = "normal" | "screen" | "multiply" | "overlay"

dynamicfunction

A node that rebuilds its contents on every frame from timeline values.

function dynamic(build: (time: number) => Node | readonly Node[] | null): Node

Edgetype

type Edge = "left" | "right" | "top" | "bottom"

groupfunction

A group. Children keep their own transforms inside it.

function group(...children: Node[]): Node

Nodeclass

Every visible thing on stage. A node with a path draws. A node with children groups. Both can carry a transform, and every property can change over time. Setter methods chain and apply at the current point on the timeline, so the same calls set up a node before it appears and change it afterwards.

new Node(path?

• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Node
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Node
• drop(child: Node): Node
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): NodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): NodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Node
• moveTo(target: Node | Vec): NodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): NodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): NodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): NodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): NodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): NodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): NodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): NodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Node
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Node
• color(color: ColorInput): NodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Node
• glow(radius: number, color?: ColorInput | undefined): NodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Node
• zIndex(value: number): Node
• pin(): NodePin to the screen so the camera does not move this node.
• hide(): Node
• show(): Node
• named(label: string): Node
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

NodePropsinterface

• x: number
• y: number
• rotation: number
• sx: number
• sy: number
• px: number
• py: number
• opacity: number
• dim: numberThe part of its color that a node keeps while a light is on something else: at 1 the node has its own look, and at 0 its paints are the background color of the film. spotlight owns it, so a film that fades a node and a light that dims it do not write the same value. It does not change the alpha, so a dim node still hides what is behind it. It does not add up along a branch: a node draws with the least dim of itself and its ancestors.
• visible: boolean
• z: number
• path: Path | null
• fill: Paint | null
• fillOpacity: number
• stroke: Paint | null
• strokeOpacity: number
• strokeWidth: number
• cap: "round" | "butt" | "square"
• join: "round" | "miter" | "bevel"
• dash: readonly number[] | null
• dashOffset: number
• trimFrom: number
• trimTo: number
• trimEach: boolean
• glow: number
• glowColor: Rgba | null
• blend: BlendMode
• fixed: booleanIgnore the camera. Use it for titles, captions, and other screen-space marks.
• image: StageImage | null

PropNametype

type PropName = keyof NodeProps

Sidetype

type Side = Vec | Edge | "up" | "down"

StageImageinterface

• src: stringEmbedded raster, local filename or legacy URL, resolved before the film is rendered.
• width: number
• height: number
• crop?: Readonly<ImageCrop> | undefined
• asset?: ImageAsset | undefined

arcfunction

function arc(radius: number, from: number, to: number, style?: ShapeStyle): Node

arrowfunction

A shaft and a clean tip as one group. The shaft ends at the tip's base, so a thick line never pokes through the point.

function arrow(from: Vec, to: Vec, style?: ArrowStyle): Node

ArrowStyleinterface

• tip?: number | undefinedTip length in pixels.
• tipRatio?: number | undefinedTip width relative to its length.
• bend?: number | undefinedCurve the shaft: positive bends left of the direction of travel.
• pad?: number | undefinedSpace left at each end, so arrows stop short of what they point at.
• both?: boolean | undefined
• fill?: ColorInput | null | undefined
• stroke?: ColorInput | null | undefined
• width?: number | undefined
• opacity?: number | undefined
• glow?: number | undefined
• dash?: readonly number[] | undefined
• z?: number | undefined

bracefunction

Curly brace beside a span of two points, pointing out to one side.

function brace(from: Vec, to: Vec, style?: ShapeStyle & { depth?: number | undefined; }): Node

circlefunction

function circle(radius: number, style?: ShapeStyle): Node

curvefunction

A smooth curve through points. Non-finite points leave gaps.

function curve(points: readonly Vec[], style?: ShapeStyle & { closed?: boolean | undefined; }): Node

dotfunction

A filled point.

function dot(radius?: number, color?: ColorInput, style?: ShapeStyle): Node

ellipsefunction

function ellipse(rx: number, ry: number, style?: ShapeStyle): Node

imagefunction

A raster picture, such as a logo or a photo, centered on its origin. src is a URL or a data URL. A data URL keeps a film in one file and renders the same in every tool. It fades, moves, and scales like any node. Give width, height, or both.

function image(src: string | ImageAsset, options?: ImageOptions): Node

ImageOptionsinterface

• width?: number | undefinedWidth on the stage. With only one of width and height, the other keeps the picture's proportions.
• height?: number | undefined
• opacity?: number | undefined
• fit?: "contain" | "cover" | undefined
• crop?: ImageCrop | undefinedA region in intrinsic image pixels, before fitting the destination box.

linefunction

function line(a: Vec, b: Vec, style?: ShapeStyle): Node

parametricfunction

function parametric(f: (t: number) => Vec, from: number, to: number, style?: ShapeStyle & { samples?: number | undefined; }): Node

polygonfunction

function polygon(points: readonly Vec[], style?: ShapeStyle): Node

polylinefunction

function polyline(points: readonly Vec[], style?: ShapeStyle & { closed?: boolean | undefined; }): Node

rectfunction

function rect(width: number, height: number, style?: ShapeStyle & { radius?: number | undefined; }): Node

regularPolygonfunction

function regularPolygon(sides: number, radius: number, style?: ShapeStyle): Node

shapefunction

Wrap any path as a stroked shape in the default ink.

function shape(path: Path, style?: ShapeStyle): Node

ShapeStyleinterface

• fill?: ColorInput | null | undefined
• stroke?: ColorInput | null | undefined
• width?: number | undefined
• opacity?: number | undefined
• glow?: number | undefined
• dash?: readonly number[] | undefined
• z?: number | undefined

svgPathfunction

function svgPath(d: string, style?: ShapeStyle): Node

ImageAssetinterface

Encoded bytes and intrinsic dimensions, validated before a film uses them.

• id?: string | undefined
• src: string
• mediaType: "image/png" | "image/jpeg" | "image/gif"
• width: number
• height: number
• sha256: string

ImageAssetErrorclass

new ImageAssetError(message

ImageAssetOptionsinterface

• id?: string | undefined
• mediaType?: string | undefined
• sha256?: string | undefined
• baseDir?: string | undefinedResolve a local filename relative to this directory in Node.
• width?: number | undefinedExpected intrinsic dimensions, such as those declared in an asset manifest.
• height?: number | undefined

ImageCropinterface

• x: number
• y: number
• width: number
• height: number

ImageFitOptionsinterface

• width?: number | undefined
• height?: number | undefined
• fit?: "contain" | "cover" | undefined
• crop?: ImageCrop | undefinedA region in intrinsic image pixels, before fitting the destination box.

resolveImageAssetfunction

Load once before authoring. No network request or file read occurs while painting.

function resolveImageAsset(source: string | Uint8Array<ArrayBufferLike>, options?: ImageAssetOptions): Promise<ImageAsset>

angleMarkfunction

An angle at a vertex, between the rays toward two points.

function angleMark(vertex: Vec, from: Vec, to: Vec, options?: AngleOptions): Node

AngleOptionsinterface

• radius?: number | undefined
• color?: ColorInput | undefined
• width?: number | undefined
• label?: string | undefined
• labelSize?: number | undefined
• fillOpacity?: number | undefinedSoft wedge under the arc.
• reflex?: boolean | undefinedTake the long way around.

applyComplexfunction

Deform a complex plane through f(re, im). Labels stay readable by fading separately, so this moves only the grid.

function applyComplex(plane: NumberPlane, f: (re: number, im: number) => Vec, options?: AnimOptions & { subdivisions?: number | undefined; }): Anim

AreaOptionsinterface

• from?: Reactive | undefined
• to?: Reactive | undefined
• fill?: ColorInput | undefined
• opacity?: number | undefined
• samples?: number | undefined

areaUnderfunction

Shaded region between a curve and the x axis. Pass functions for bounds that move.

function areaUnder(axes: Axes, f: (x: number) => number, options?: AreaOptions): Node

arrayCellsfunction

function arrayCells(values: readonly (string | number)[], options?: ArrayCellsOptions): ArrayCells

ArrayCellsclass

A row of boxes. swap(i, j) lifts two items over each other, and .cell(i) follows them.

new ArrayCells(values

• slots: Node[]
• indexLabels: Node[]
• items: Node[]The item at each index, updated as swaps are authored.
• cell(index: number): NodeThe item currently at an index.
• slotAt(index: number): VecLocal stage position of a slot.
• swap(i: number, j: number, options?: AnimOptions & { lift?: number | undefined; }): AnimExchange two items along opposite arcs.
• mark(index: number, color: ColorInput, options?: AnimOptions): AnimRecolor an item.
• enter(options?: AnimOptions): AnimCells appear from left to right.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): ArrayCells
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): ArrayCells
• drop(child: Node): ArrayCells
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): ArrayCellsA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): ArrayCellsSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): ArrayCells
• moveTo(target: Node | Vec): ArrayCellsMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): ArrayCellsMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): ArrayCellsScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): ArrayCellsRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): ArrayCellsScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): ArrayCellsPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): ArrayCellsLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): ArrayCellsLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): ArrayCells
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): ArrayCells
• color(color: ColorInput): ArrayCellsRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): ArrayCells
• glow(radius: number, color?: ColorInput | undefined): ArrayCellsSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): ArrayCells
• zIndex(value: number): ArrayCells
• pin(): ArrayCellsPin to the screen so the camera does not move this node.
• hide(): ArrayCells
• show(): ArrayCells
• named(label: string): ArrayCells
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

ArrayCellsOptionsinterface

• cell?: number | undefined
• gap?: number | undefined
• size?: number | undefined
• color?: ColorInput | undefined
• indices?: boolean | undefined
• indexSize?: number | undefined
• font?: FontFamily | undefinedThe font of the values. Defaults to mono. The indexes are in mono.

attentionMatrixfunction

Attention weights as a heatmap, with source tokens across the top and targets down the side. It is a Heatmap, so .cell(i, j) and .row(i) work.

function attentionMatrix(rows: readonly string[], columns: readonly string[], weights: readonly (readonly number[])[], options?: AttentionMatrixOptions): Heatmap

AttentionMatrixOptionsinterface

• cell?: number | undefined
• colors?: readonly ColorInput[] | undefined
• values?: boolean | undefined
• labelSize?: number | undefined
• gap?: number | undefined
• font?: FontFamily | undefinedThe font of the token labels. Defaults to the font of the film.

axesfunction

function axes(options?: AxesOptions): Axes

Axesclass

Coordinate axes. .p(x, y) converts math coordinates to stage points in this group's local space, and .plot(f) draws a function on them.

new Axes(options?

• xRange: readonly [number, number]
• yRange: readonly [number, number]
• plotWidth: number
• plotHeight: number
• lines: NodeLines and ticks, for drawing in on their own.
• grid: Node
• numbers: Node
• p(x: number, y: number): [number, number]Math coordinates to this group's local stage coordinates.
• world(x: number, y: number): [number, number]Math coordinates to stage coordinates, following this group's transform.
• plotPath(f: (x: number) => number, options?: { from?: number | undefined; to?: number | undefined; samples?: number | undefined; }): PathGeometry of a function over a range, clipped to the visible y range.
• plot(f: (x: number) => number, style?: ShapeStyle & { from?: number | undefined; to?: number | undefined; samples?: number | undefined; }): NodeDraw a function on the axes. The curve becomes a child, so it moves with them.
• dotAt(x: number, y: number, color?: ColorInput, radius?: number): NodeA point on the axes.
• guides(x: number, y: number, style?: ShapeStyle): NodeDashed guides from a point down to both axes.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Axes
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Axes
• drop(child: Node): Axes
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): AxesA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): AxesSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Axes
• moveTo(target: Node | Vec): AxesMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): AxesMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): AxesScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): AxesRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): AxesScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): AxesPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): AxesLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): AxesLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Axes
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Axes
• color(color: ColorInput): AxesRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Axes
• glow(radius: number, color?: ColorInput | undefined): AxesSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Axes
• zIndex(value: number): Axes
• pin(): AxesPin to the screen so the camera does not move this node.
• hide(): Axes
• show(): Axes
• named(label: string): Axes
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

AxesOptionsinterface

• x?: readonly [number, number] | undefinedMath range on the x axis.
• y?: readonly [number, number] | undefined
• width?: number | undefinedOn-screen size in stage pixels.
• height?: number | undefined
• xStep?: number | undefined
• yStep?: number | undefined
• color?: ColorInput | undefined
• labels?: boolean | undefinedNumber labels on ticks.
• labelSize?: number | undefined
• grid?: boolean | undefinedFaint background grid.
• xLabel?: string | undefined
• yLabel?: string | undefined
• tips?: boolean | undefined

barChartfunction

function barChart(data: readonly BarDatum[], options?: BarChartOptions): BarChart

BarChartclass

Bars with direct labels and a single hairline baseline. enter() grows them from zero and update(values) animates to new data, with readouts that count.

new BarChart(data

• bars: Node[]
• labels: Node[]
• readouts: Node[]
• baseline: Node
• values: Value[]
• bar(i: number): Node
• labelsOf(part: Node): readonly Node[]The name and the readout of a bar belong to it, so a light on the bar keeps them bright.
• enter(options?: AnimOptions): AnimBaseline and labels appear, then bars rise one after another while readouts count up.
• update(values: readonly number[], options?: AnimOptions): AnimAnimate to new values. The scale follows unless it was fixed at creation.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): BarChart
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): BarChart
• drop(child: Node): BarChart
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): BarChartA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): BarChartSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): BarChart
• moveTo(target: Node | Vec): BarChartMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): BarChartMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): BarChartScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): BarChartRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): BarChartScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): BarChartPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): BarChartLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): BarChartLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): BarChart
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): BarChart
• color(color: ColorInput): BarChartRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): BarChart
• glow(radius: number, color?: ColorInput | undefined): BarChartSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): BarChart
• zIndex(value: number): BarChart
• pin(): BarChartPin to the screen so the camera does not move this node.
• hide(): BarChart
• show(): BarChart
• named(label: string): BarChart

BarChartOptionsinterface

• gap?: number | undefinedFraction of each band left empty between bars.
• max?: number | undefinedFixes the top of the scale. Defaults to the largest value.
• min?: number | undefined
• showValues?: boolean | undefined
• format?: ((value: number) => string) | undefined
• horizontal?: boolean | undefined
• radius?: number | undefined
• width?: number | undefined
• height?: number | undefined
• labelSize?: number | undefinedText size for direct labels and ticks.
• color?: ColorInput | undefined
• font?: FontFamily | undefinedThe font of the labels and the ticks. Defaults to the font of the film. A value that the chart prints is in mono.

BarDatuminterface

• label: string
• value: number
• color?: ColorInput | undefined

bitFieldfunction

A word split into named fields: bitField([{ bits: 10, label: 'directory' }, { bits: 10, label: 'table', color: 'orange' }, { bits: 12, label: 'offset' }], { width: 1400 }).

function bitField(parts: readonly BitFieldPart[], options?: BitFieldOptions): BitField

BitFieldclass

A word split into named fields: a row of boxes, one per field, with the bit numbers over them. It shows a virtual address as its table indexes, the flags of a register, or the layout of a structure by byte offset. The first field is at the left. With wrap, the fields fill rows from the top. .at() places the middle of a full row, and of all rows from the top to the bottom. A field shows its label inside its box. A field with a value shows the value inside and the label under the box, and setValue() changes the value in place. field('PTE') is the node of one field, to light it, and p('PTE') is a point on its box.

new BitField(parts

• fields: Node[]One node per field, which holds its box, its texts and its numbers. The first field is at the left.
• boxes: Node[]
• labels: (Node | null)[]The name of each field, or null for a field that has none.
• values: (Node | null)[]The content that each field shows now, or null for a field that has none. setValue() replaces the node.
• numbers: Node[]The numbers over the boxes, row by row, from the left to the right. Each one is also a part of its field.
• total: numberThe sum of the bits of all fields.
• field(which: string | number): NodeThe node of a field, by its index or by its label. Index 0 is the first field, at the left of the first row.
• p(which: string | number, edge?: "left" | "right" | "top" | "bottom"): [number, number]The middle of an edge of the box of a field, in the coordinates of the object: the point where a line from the field starts. Defaults to the bottom edge. The left and the right edge are for the field at an end of a row. The point does not follow the object: read it again after the object moves.
• range(which: string | number): [number, number]The high and the low bit of a field. With numbers: 'offsets', its first and its last offset. Without numbers, the bits count as with numbers: 'bits'.
• enter(options?: AnimOptions): AnimThe fields arrive one after another, each with its texts and its numbers: from the left, and row by row.
• setValue(which: string | number, value: string, options?: AnimOptions): AnimThe value of a field changes in place, such as a flag that goes from '0' to '1'. The text in the box fades out, then the new text fades in, so no moment shows two texts. It works on a field that was built with a value, because the layout does not change. The new text follows the rule of the first one: it shrinks to fit, and a text that cannot fit is an error. values then holds the new text.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): BitField
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): BitField
• drop(child: Node): BitField
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): BitFieldA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): BitFieldSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): BitField
• moveTo(target: Node | Vec): BitFieldMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): BitFieldMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): BitFieldScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): BitFieldRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): BitFieldScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): BitFieldPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): BitFieldLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): BitFieldLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): BitField
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): BitField
• color(color: ColorInput): BitFieldRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): BitField
• glow(radius: number, color?: ColorInput | undefined): BitFieldSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): BitField
• zIndex(value: number): BitField
• pin(): BitFieldPin to the screen so the camera does not move this node.
• hide(): BitField
• show(): BitField
• named(label: string): BitField
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

BitFieldOptionsinterface

• width?: number | undefinedThe width of one row: of all fields together, or of wrap bits. Defaults to 1200.
• height?: number | undefinedThe height of the boxes. Defaults to 2.6 of size.
• scale?: "proportional" | "even" | undefined'proportional' gives each field a width for its bits. 'even' gives every field of a row the same width. Defaults to proportional.
• minWidth?: number | undefinedThe least width of a field, so that a field of one bit can hold a name. The wider fields share the rest. Defaults to 0.
• wrap?: number | undefinedHow many bits (or bytes) one row holds. The fields then fill rows from the top, for the layout of a structure. A field that would cross the end of a row is an error. Without it, all fields are in one row.
• rowGap?: number | undefinedThe room between two rows. Defaults to the room that the numbers and the labels under the boxes need, and a little more.
• numbers?: false | "bits" | "offsets" | undefinedWhat to write over the boxes. 'bits' numbers the bits from the right, with the highest bit at the left, such as 63, 48, 47, 39. 'offsets' counts up from 0 at the left, for the bytes of a structure. False writes nothing. Defaults to 'bits'.
• size?: number | undefinedText size of the labels and values. The numbers are smaller. Defaults to 26.
• color?: ColorInput | undefinedThe color of a field that has none of its own. Defaults to blue.
• font?: FontFamily | undefinedThe font of the labels. The values and the numbers are in mono.

BitFieldPartinterface

• bits: numberHow many bits (or bytes) the field has. A whole number, 1 or more.
• label?: string | undefinedThe name of the field, on one line.
• value?: string | undefinedThe content of the field, such as '0x1fe' or '1', on one line. Drawn in mono inside the box. The label then goes under the box. An empty text is a value too: an empty box that setValue() can fill.
• color?: ColorInput | undefinedDefaults to the color of the object.
• unused?: boolean | undefinedA field that carries nothing, such as reserved bits: a faint box with a hatch.

boundaryfunction

An open line between two sides that counts what crosses it: boundary({ label: 'system call line', above: 'user space', below: 'kernel', tally: ['system call', 'system calls'] }). .at(x, y) places its middle.

function boundary(options?: BoundaryOptions): Boundary

Boundaryclass

An open line between two sides, such as user space and the kernel, that counts what crosses it. cross() sends a mark through the line: the line lights there, a tick stays, and the tally goes up. addCrossings() runs the tally up with no mark, for a number that is too large to draw, and fills the line with ticks. clear() starts the next round of a comparison. .at() places the middle of the line. The names are at the left end and the tally is at the right end, and x() gives the places between them. What changes with time is kept in lists that a change replaces and never edits, and in the nodes. So a copy of the line, made alone or with the group or the zone that holds it, has its own tally and its own ticks.

new Boundary(options?

• line: Node
• labelNode: Node | nullThe name of the line, or null when it has none.
• sides: readonly [Node | null, Node | null]The names of the side over the line and of the side under it. Each is null when it is not given.
• tallyNode: Node | nullThe number and the word of the tally, as one node, or null when the line shows no tally.
• noteNode: Node | nullThe note under the right end of the line that says what one tick stands for, such as "each tick: about 40". It is null while one tick is one crossing.
• ticks: readonly Node[]The ticks that are on the line after the changes that are scheduled so far, in the order that they arrive.
• x(part: number): numberA place along the line for cross(), in the coordinates of the line: 0 is the first place after the names and 1 is the last place before the tally, with room for the widest tally of the line.
• count: numberThe tally after the changes that are scheduled so far.
• enter(options?: AnimOptions): AnimThe line draws from the left, then the names, the tally and the ticks arrive.
• cross(x: number, options?: BoundaryCrossOptions): BoundaryCrossingA mark travels through the line at x, a place in the coordinates of the line: use line.x(part). Where the mark passes, the line lights for a moment and a tick stays. The tally goes up when the mark is on the line the first time.
• addCrossings(count: number, options?: AnimOptions): AnimThe tally runs up by count with no mark, for a number that is too large to draw, such as line.addCrossings(10000). The number on screen runs through whole values and ends exact. The line fills with ticks from the left while the number runs: one tick for each crossing, or for each tickScale crossings. When the line is full, a note under it says what one tick stands for.
• clear(options?: AnimOptions): AnimThe ticks and the note fade and the tally goes back to 0, for the next round of a comparison.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Boundary
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Boundary
• drop(child: Node): Boundary
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): BoundaryA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): BoundarySet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Boundary
• moveTo(target: Node | Vec): BoundaryMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): BoundaryMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): BoundaryScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): BoundaryRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): BoundaryScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): BoundaryPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): BoundaryLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): BoundaryLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Boundary
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Boundary
• color(color: ColorInput): BoundaryRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Boundary
• glow(radius: number, color?: ColorInput | undefined): BoundarySoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Boundary
• zIndex(value: number): Boundary
• pin(): BoundaryPin to the screen so the camera does not move this node.
• hide(): Boundary
• show(): Boundary
• named(label: string): Boundary
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

BoundaryCrossinginterface

A crossing that s.play() can run. It also gives its two parts, for a film that reads their places.

• mark: NodeThe mark that travels.
• labelNode: Node | nullThe text of the crossing, or null when it has none.
• label: string
• duration: number
• ease?: Ease | undefined
• schedule(ctx: AnimContext): void

BoundaryCrossOptionsinterface

• direction?: "up" | "down" | "round" | undefined'down' goes from over the line to under it, 'up' the reverse, and 'round' goes down and comes back. Defaults to down.
• reach?: number | undefinedHow far from the line the mark starts and ends. Defaults to 2.7 of the text size of the line, as a whole number: 70 at size 26.
• color?: ColorInput | undefinedThe color of the mark and of its tick. Without it, the mark is ink and the tick has the color of the line.
• label?: string | undefinedA short text beside the place where the mark starts. It fades with the mark.
• counts?: number | undefinedHow much the tally goes up. A whole number, 0 or more. Defaults to 1.
• duration?: number | undefined
• ease?: Ease | undefined
• lag?: number | undefinedFraction of one item's time between the starts of consecutive items.

BoundaryOptionsinterface

• width?: number | undefinedThe length of the line. Defaults to 1600.
• label?: string | undefinedThe name of the line, over its left end, such as 'system call line'.
• above?: string | undefinedThe name of the side over the line, at the left end, such as 'user space'.
• below?: string | undefinedThe name of the side under the line, at the left end, such as 'kernel'.
• color?: ColorInput | undefinedThe color of the line, its label and its ticks. Defaults to yellow.
• weight?: number | undefinedThe width of the stroke. Defaults to 3. A wall that is harder to cross can take 6.
• dash?: boolean | undefinedA dashed line, for a boundary that is a rule and not a wall.
• tally?: string | boolean | readonly [one: string, many: string] | undefinedShow a tally of the crossings. true shows the number alone. A string is the word after the number. A pair is the word for one and the word for more, such as ['system call', 'system calls'].
• tallySide?: "over" | "end" | undefinedWhere the tally is. 'end' puts it over the right end of the line, next to the line, and x() keeps crossings clear of it. 'over' puts it on a row of its own, over the place where a mark starts, so that crossings have the line up to its right end. Defaults to 'end'.
• tallyDigits?: number | undefinedThe digits that the tally has room for. A count with more digits is an error. Defaults to 6.
• tallySize?: number | undefinedText size of the tally. Defaults to size.
• tallyColor?: ColorInput | undefinedThe color of the number of the tally. Its word stays dim. Defaults to ink.
• tickScale?: number | undefinedHow many crossings one tick stands for. Give the lines that a film compares one value, so that their ticks compare as their counts do. Without it, one tick is one crossing until the line is full.
• size?: number | undefinedText size. Defaults to 26.
• font?: FontFamily | undefined

braceLabelfunction

A brace along one side of a node or nodes, with a label at its point.

function braceLabel(target: Node | readonly Node[], label: string, options?: BraceLabelOptions): Node

BraceLabelOptionsinterface

• side?: "left" | "right" | "top" | "bottom" | undefined
• gap?: number | undefined
• size?: number | undefined
• color?: ColorInput | undefined
• plain?: boolean | undefinedSet for plain text labels. Labels are math by default.
• font?: FontFamily | undefinedThe font of a plain label. Defaults to the font of the film.
• depth?: number | undefined

calloutfunction

function callout(target: Node | Vec, body: string, options?: CalloutOptions): Callout

Calloutclass

A note with a leader line back to what it describes. The leader stops at the text block's edge, so it never runs through the words.

new Callout(target

• leader: Node
• marker: Node
• body: Node
• titleNode: Node | null
• enter(options?: AnimOptions): AnimThe marker lands, the leader runs out, and the text settles at the end of it.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Callout
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Callout
• drop(child: Node): Callout
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): CalloutA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): CalloutSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Callout
• moveTo(target: Node | Vec): CalloutMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): CalloutMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): CalloutScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): CalloutRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): CalloutScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): CalloutPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): CalloutLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): CalloutLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Callout
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Callout
• color(color: ColorInput): CalloutRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Callout
• glow(radius: number, color?: ColorInput | undefined): CalloutSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Callout
• zIndex(value: number): Callout
• pin(): CalloutPin to the screen so the camera does not move this node.
• hide(): Callout
• show(): Callout
• named(label: string): Callout
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

CalloutOptionsinterface

• title?: string | undefined
• side?: Edge | undefinedWhich way the text sits from its target.
• distance?: number | undefinedDistance from the target to the text, in stage pixels.
• offset?: number | undefinedSlide the text along the other axis.
• width?: number | undefinedWrap width for the body.
• size?: number | undefined
• color?: ColorInput | undefined
• bodyColor?: ColorInput | undefined
• plate?: boolean | undefinedPlate behind the text, for placing a note over busy marks.
• font?: FontFamily | undefinedThe font of the title and the body. Defaults to the font of the film.

captionLinesfunction

Split spoken text into caption lines: by sentence, then by length.

function captionLines(text: string, length?: number): string[]

cardfunction

A box with a title, a picture, and a caption, such as card({ title: 'Logs', figure: pictogram('logs'), caption: 'one line per event' }).

function card(options?: CardOptions): Card

Cardclass

A box with a title at the top, a picture in the middle, and a caption at the bottom. The title and the caption sit at fixed distances from the border, and the picture is centered in the space between them. Cards with one width, one height, and one captionLines share one layout whatever they hold.

new Card(options?

• frame: Node
• title: Node | null
• figure: Node | null
• caption: Node | null
• figureBox: BoundsThe space that the picture may use, in the coordinates of the card, where (0, 0) is its middle.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Card
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Card
• drop(child: Node): Card
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): CardA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): CardSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Card
• moveTo(target: Node | Vec): CardMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): CardMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): CardScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): CardRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): CardScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): CardPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): CardLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): CardLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Card
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Card
• color(color: ColorInput): CardRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Card
• glow(radius: number, color?: ColorInput | undefined): CardSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Card
• zIndex(value: number): Card
• pin(): CardPin to the screen so the camera does not move this node.
• hide(): Card
• show(): Card
• named(label: string): Card
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

CardOptionsinterface

• width?: number | undefinedOuter width, in pixels. Defaults to 420.
• height?: number | undefinedOuter height, in pixels. Without it, the card is as tall as its content. Give one height to the cards of a row.
• title?: string | undefinedThe name at the top. A name that is too wide is set smaller, down to 0.6 of titleSize.
• figure?: Node | undefinedThe picture in the middle. It must not be on the stage or in a group yet. A picture that is too large is scaled down to fit.
• caption?: string | undefinedThe text at the bottom. It wraps to the width of the card.
• captionLines?: number | undefinedThe number of caption lines to keep room for. Set it to the longest caption of a row, so that a card with a short caption has the same layout as the others. Defaults to the lines of this caption.
• color?: ColorInput | undefinedThe color of the border and the title. Defaults to ink.
• captionColor?: ColorInput | undefinedThe color of the caption. Defaults to ink.
• titleSize?: number | undefinedFont size of the title. Defaults to 40.
• captionSize?: number | undefinedFont size of the caption. Defaults to 0.72 of titleSize.
• padding?: number | undefinedSpace between the border and the content. Defaults to 0.7 of titleSize.
• fill?: ColorInput | null | undefinedThe fill of the card. Pass null for none. Defaults to the surface color.
• radius?: number | undefined
• borderWidth?: number | undefinedWidth of the border. Defaults to 3.
• font?: FontFamily | undefined

ChartOptionsinterface

• width?: number | undefined
• height?: number | undefined
• labelSize?: number | undefinedText size for direct labels and ticks.
• color?: ColorInput | undefined
• font?: FontFamily | undefinedThe font of the labels and the ticks. Defaults to the font of the film. A value that the chart prints is in mono.

checkFilmfunction

Inspect a film for layout defects: marks off the canvas, text against an edge of the frame, text on text, strokes through text, and characters that no font can draw. It looks where the film comes to rest, because objects may cross each other while moving. With motion, it also looks at every frame. Runs anywhere, with no rendering.

function checkFilm(film: FilmDefinition | CompiledFilm, options?: FilmCheckOptions): Promise<FilmCheckReport>

CODE_LANGUAGESconst

The languages that tokenize and codeBlock color. An unknown name falls back to TypeScript.

const CODE_LANGUAGES: readonly string[]

codeBlockfunction

function codeBlock(source: string, options?: CodeBlockOptions): CodeBlock

CodeBlockclass

Syntax-colored code as real glyphs. It can be written on, focused line by line, and morphed token by token into a new version with morphCode.

new CodeBlock(source

• lines: Node[]
• tokens: CodeToken[]
• chars: Node[]
• panelNode: Node | null
• body: Node
• source: string
• line(index: number): NodeOne line of code, as a node. Lines count from 0.
• find(fragment: string, line?: number | undefined): Node[]Glyphs of the code that matches. A fragment that is one token, such as lo, matches every such token. Any other fragment, such as lo + hi, matches as text inside a line, and spaces do not count. Pass a line, counted from 0, to search that line only.
• focus(lines: number | readonly number[], options?: AnimOptions & { dim?: number | undefined; color?: ColorInput | undefined; }): AnimDim everything except these lines, and lay a soft bar behind them.
• unfocus(options?: AnimOptions): AnimRestore all lines and remove the focus bar.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): CodeBlock
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): CodeBlock
• drop(child: Node): CodeBlock
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): CodeBlockA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): CodeBlockSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): CodeBlock
• moveTo(target: Node | Vec): CodeBlockMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): CodeBlockMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): CodeBlockScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): CodeBlockRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): CodeBlockScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): CodeBlockPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): CodeBlockLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): CodeBlockLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): CodeBlock
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): CodeBlock
• color(color: ColorInput): CodeBlockRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): CodeBlock
• glow(radius: number, color?: ColorInput | undefined): CodeBlockSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): CodeBlock
• zIndex(value: number): CodeBlock
• pin(): CodeBlockPin to the screen so the camera does not move this node.
• hide(): CodeBlock
• show(): CodeBlock
• named(label: string): CodeBlock
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

CodeBlockOptionsinterface

• language?: string | undefinedOne of CODE_LANGUAGES, or an alias such as py, tla+, or smt2. Defaults to TypeScript.
• size?: number | undefined
• leading?: number | undefinedLine height as a multiple of size.
• lineNumbers?: boolean | undefined
• panel?: boolean | undefinedDraw a quiet panel behind the code.
• padding?: number | undefined
• minWidth?: number | undefinedMinimum panel width, so versions of a snippet can share one frame.
• colors?: Partial<Record<"string" | "number" | "function" | "keyword" | "comment" | "type" | "punctuation" | "plain", ColorInput>> | undefined

CodeTokeninterface

• text: string
• kind: TokenKind
• line: number
• glyphs: Node[]

complexconst

Small complex arithmetic on [re, im] pairs.

const complex: { mul: (a: Vec, b: Vec) => Vec; div: (a: Vec, b: Vec) => Vec; exp: (a: Vec) => Vec; log: (a: Vec) => Vec; pow: (a: Vec, n: number) => Vec; sin: (a: Vec) => Vec; cos: (a: Vec) => Vec; inv: (a: Vec) => Vec; }

complexPlanefunction

function complexPlane(options?: ComplexPlaneOptions): ComplexPlane

ComplexPlaneclass

new ComplexPlane(options?

• numbers: Node
• z(re: number, im: number): [number, number]Complex number to local stage coordinates.
• unit: number
• major: Node
• minor: Node
• axes: Node
• p(x: number, y: number): [number, number]Math coordinates to stage coordinates. y points up on the plane.
• vector(x: number, y: number, style?: ShapeStyle): NodeA vector drawn from the origin, as an arrow.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): ComplexPlane
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): ComplexPlane
• drop(child: Node): ComplexPlane
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): ComplexPlaneA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): ComplexPlaneSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): ComplexPlane
• moveTo(target: Node | Vec): ComplexPlaneMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): ComplexPlaneMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): ComplexPlaneScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): ComplexPlaneRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): ComplexPlaneScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): ComplexPlanePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): ComplexPlaneLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): ComplexPlaneLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): ComplexPlane
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): ComplexPlane
• color(color: ColorInput): ComplexPlaneRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): ComplexPlane
• glow(radius: number, color?: ColorInput | undefined): ComplexPlaneSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): ComplexPlane
• zIndex(value: number): ComplexPlane
• pin(): ComplexPlanePin to the screen so the camera does not move this node.
• hide(): ComplexPlane
• show(): ComplexPlane
• named(label: string): ComplexPlane
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

ComplexPlaneOptionsinterface

• labelRange?: number | undefinedLabel real and imaginary integers out to this distance from the origin.
• labelSize?: number | undefined
• unit?: number | undefinedStage pixels per math unit.
• x?: readonly [number, number] | undefinedExtent in math units. Defaults to overscan past the frame edges, for warps that pull in.
• y?: readonly [number, number] | undefined
• color?: ColorInput | undefined
• minor?: number | undefinedMinor grid lines per unit.
• axisColor?: ColorInput | undefined
• width?: number | undefined

connectorfunction

function connector(from: ConnectorEnd, to: ConnectorEnd, options?: ConnectorOptions): Connector

Connectorclass

A line between two nodes that is routed fresh on every frame. Move a node and the line follows. draw(connector) traces it, and .pulse() sends a signal.

new Connector(from

• routeNow(): PathGeometry from end to end at this moment, in stage coordinates.
• pulse(options?: AnimOptions & { color?: ColorInput | undefined; length?: number | undefined; width?: number | undefined; glow?: number | undefined; }): AnimSend a signal along the line. Pulses can overlap, and they follow a moving route.
• pointNow(fraction?: number): [number, number]Point at a fraction along the current route, for placing notes beside the line.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Connector
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Connector
• drop(child: Node): Connector
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): ConnectorA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): ConnectorSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Connector
• moveTo(target: Node | Vec): ConnectorMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): ConnectorMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): ConnectorScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): ConnectorRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): ConnectorScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): ConnectorPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): ConnectorLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): ConnectorLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Connector
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Connector
• color(color: ColorInput): ConnectorRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Connector
• glow(radius: number, color?: ColorInput | undefined): ConnectorSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Connector
• zIndex(value: number): Connector
• pin(): ConnectorPin to the screen so the camera does not move this node.
• hide(): Connector
• show(): Connector
• named(label: string): Connector
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

ConnectorEndtype

type ConnectorEnd = Node | Vec

ConnectorOptionsinterface

• from?: Edge | undefinedSide to leave from and arrive at. Chosen automatically when omitted.
• to?: Edge | undefined
• route?: "curve" | "ortho" | "straight" | undefined
• color?: ColorInput | undefined
• width?: number | undefined
• dash?: readonly number[] | undefined
• tip?: boolean | undefinedDraw an arrowhead at the end.
• tipSize?: number | undefined
• label?: string | undefinedLabel on the line, on a plate so the line never crosses its text.
• font?: FontFamily | undefinedThe font of the label. Defaults to the font that the film names, and to mono in a film that names none.
• labelSize?: number | undefined
• labelColor?: ColorInput | undefined
• labelBackground?: ColorInput | undefined
• labelAt?: number | undefinedWhere the label sits along the line.
• gap?: number | undefinedSpace between the line and the box it touches.
• fromOffset?: number | undefinedSlide each end along its side, from -1 to 1. Use it to separate parallel lines.
• toOffset?: number | undefined
• curvature?: number | undefined
• radius?: number | undefined
• flow?: number | undefinedDashes travel along the line at this many pixels per second.

counterfunction

function counter(initial?: number, options?: CounterOptions): Counter

Counterclass

A number readout. Animate it with countUp.

new Counter(initial?

• value: Value
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Counter
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Counter
• drop(child: Node): Counter
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): CounterA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): CounterSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Counter
• moveTo(target: Node | Vec): CounterMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): CounterMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): CounterScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): CounterRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): CounterScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): CounterPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): CounterLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): CounterLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Counter
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Counter
• color(color: ColorInput): CounterRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Counter
• glow(radius: number, color?: ColorInput | undefined): CounterSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Counter
• zIndex(value: number): Counter
• pin(): CounterPin to the screen so the camera does not move this node.
• hide(): Counter
• show(): Counter
• named(label: string): Counter
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

CounterOptionsinterface

• digits?: number | undefined
• size?: number | undefined
• color?: ColorInput | undefined
• font?: FontFamily | undefinedDefaults to mono, in every film: a number that changes keeps its width in mono.
• weight?: 400 | 600 | 700 | undefined
• prefix?: string | undefined
• suffix?: string | undefined
• grouped?: boolean | undefinedThousands separators.

countUpfunction

Count a Counter or Value to a target.

function countUp(target: Value | Counter, to: number, options?: AnimOptions): Anim

crossThroughfunction

One mark through several lines, from the first to the last: crossThrough([calls, wall], calls.x(0.5), { direction: 'round' }). Each line lights, keeps a tick, and counts.

function crossThrough(lines: readonly Boundary[], x: number, options?: BoundaryCrossOptions): BoundaryCrossing

dashedGuidesfunction

Dashed drop lines from a point on the axes. Pass functions to follow a moving point.

function dashedGuides(axes: Axes, x: Reactive, y: Reactive, style?: ShapeStyle): Node

DateEventinterface

• at: DateInputWhen the event was. With scale 'order', it can also be a version, such as '5.1'.
• label?: string | number | undefinedThe name of the event, on one line. A number is written as its text. An event with no label is a mark only, with no stem.
• note?: string | number | undefinedA second line under the label, in dim. A number is written as its text.
• color?: ColorInput | undefinedThe color of the mark, the stem and the label. Defaults to ink.
• side?: "over" | "under" | undefinedWhere the label goes. Without it, the labels go over the line and under it by turns, in date order.
• mark?: DateMark | undefinedThe mark on the line: a dot, a star for an event of another kind, or a ring for an event with no sure date. Defaults to a dot.

DateEventNodeclass

One event of a DateLine object. It is hidden until the cursor reaches it.

new DateEventNode(mark

• covers: Node[]The ticks of the line that are in the clear room of the mark. A tick leaves while the event shows, by any way that the film shows it.
• mark: NodeThe mark of the event: a dot, a star, or a ring.
• stem: Node | nullThe line to the label, or null for an event with no label.
• text: TextNode | nullThe label of the event, or null when the event has none.
• note: TextNode | nullThe line under the label, or null when the event has none.
• halo: NodeThe ring around the mark of the event that light() lit. It has no opacity when the event is not lit.
• set<K extends PropName>(prop: K, value: NodeProps[K]): DateEventNode
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): DateEventNode
• drop(child: Node): DateEventNode
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): DateEventNodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): DateEventNodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): DateEventNode
• moveTo(target: Node | Vec): DateEventNodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): DateEventNodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): DateEventNodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): DateEventNodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): DateEventNodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): DateEventNodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): DateEventNodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): DateEventNodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): DateEventNode
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): DateEventNode
• color(color: ColorInput): DateEventNodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): DateEventNode
• glow(radius: number, color?: ColorInput | undefined): DateEventNodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): DateEventNode
• zIndex(value: number): DateEventNode
• pin(): DateEventNodePin to the screen so the camera does not move this node.
• hide(): DateEventNode
• show(): DateEventNode
• named(label: string): DateEventNode
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

DateInputtype

A date: 'YYYY', 'YYYY-MM' or 'YYYY-MM-DD', or a number of years such as 2020 or 2023.25.

type DateInput = string | number

dateLinefunction

A line of time with events at their dates: dateLine([{ at: '2025-06-10', label: 'the newsletter' }, { at: '2026-03-24', label: 'the report', note: 'names the system' }], { width: 1600, from: 2020, to: 2027 }).

function dateLine(events: readonly DateEvent[], options?: DateLineOptions): DateLine

DateLineclass

A line of time with events at their dates: a mark on the line for each event, and a stem to its label. The object places the labels over the line and under it, at more than one height, so that no two of them meet. An event with no label is a mark only. A mark that would touch another one goes to a row over the line. advance(date) moves a cursor to a date and stops there, and each event appears when the cursor passes it. .at() places the middle of the line. The bounds of the object hold every label from the start: read extent.

new DateLine(events

• events: DateEventNode[]One node per event, in the order given.
• axis: NodeThe line, its ticks and the texts under them, and the words "not to scale" of an 'order' line.
• cursor: NodeA small pointer under the line, at the date that the film has reached. It moves in a room of its own, under the marks and over the texts under the line, so it touches nothing. The first advance shows it.
• domain: readonly [number, number]The two ends of the line as numbers of years. With scale 'order', the ends are counted in events: -0.5 and the number of dates less 0.5.
• unit: DateUnit | nullWhat a tick of the line is. Null with scale 'order', where a tick is an event.
• extent: { readonly left: number; readonly right: number; readonly top: number; readonly bottom: number; }The room of the line with all its events, in the coordinates of the object: how far the labels and the rows of marks go over the line and under it, and how far a text passes each end. The bounds of the object are this room from the start, also while the events are hidden.
• date: numberThe place of the cursor after the changes that are scheduled so far, as a number of years. It starts at the first end of the line. With scale 'order', it is counted in events: 0 is the first date.
• lit: number | nullThe index of the event that has the accent color, after the changes that are scheduled so far. Null when no event is lit.
• x(date: DateInput): numberThe x of a date, in the coordinates of the object. The middle of the line is at 0. With scale 'order', the line has a place for the dates of its events only.
• p(index: number): [number, number]The place of the mark of an event, in the coordinates of the object, by its index in the list.
• enter(options?: AnimOptions): AnimThe line draws from its first end, and its ticks and their texts arrive as it passes them. No event shows yet.
• advance(to: DateInput, options?: AnimOptions): AnimThe cursor moves from its date to to, and stops. Each event that it passes appears: its mark, then its stem, then its label. All of it is over when the animation ends: when the last event needs time after the cursor reaches it, the cursor stops early.
• showAll(options?: AnimOptions): AnimThe same as advance to the last end of the line. It takes 3 seconds when the film gives no duration.
• light(index: number | null, options?: AnimOptions): AnimOne event takes the look of the lit event: the accent color on its mark, its stem and its label, and a ring around its mark. The event that had this look takes its own color back. light(null) leaves no event lit. An event that the cursor has not reached stays hidden, and it is lit when it appears.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): DateLine
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): DateLine
• drop(child: Node): DateLine
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): DateLineA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): DateLineSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): DateLine
• moveTo(target: Node | Vec): DateLineMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): DateLineMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): DateLineScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): DateLineRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): DateLineScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): DateLinePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): DateLineLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): DateLineLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): DateLine
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): DateLine
• color(color: ColorInput): DateLineRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): DateLine
• glow(radius: number, color?: ColorInput | undefined): DateLineSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): DateLine
• zIndex(value: number): DateLine
• pin(): DateLinePin to the screen so the camera does not move this node.
• hide(): DateLine
• show(): DateLine
• named(label: string): DateLine
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

DateLineOptionsinterface

• width?: number | undefinedThe length of the line. Every label is inside it. A text under a tick at an end passes it by half of its width. Defaults to 1600.
• from?: DateInput | undefinedThe dates at the two ends of the line, for scale 'time', such as from: '2025-06'. They default to the whole years, months or days around the events, by the unit of the ticks.
• to?: DateInput | undefined
• scale?: "time" | "order" | undefined'time' puts each event at its date. 'order' puts the events at equal steps in date order, for events that are crowded in time: each one has its date under the line as the film wrote it, and the line says "not to scale" at its end. Defaults to time.
• unit?: DateUnit | undefinedWhat a tick is, for scale 'time': the start of a year, of a month, or of a day. Without it, the span of the line decides: days up to 45 days, months under 2 years, and years from 2 years.
• size?: number | undefinedText size of the labels. The notes and the texts under the line are a little smaller. Defaults to 26.
• levels?: number | undefinedHow many heights the labels may take at each side of the line. The object uses as few as the labels need. Defaults to 3.
• rows?: number | undefinedThe most rows of marks: the line, and the rows over it. A mark that would touch an earlier mark goes one row up, and the object has as many rows as the marks need, up to this number. Defaults to 10.
• cursor?: boolean | undefinedDraw the cursor. With false, no cursor is ever drawn, and the events still appear at their dates. On by default.
• accent?: ColorInput | undefinedThe color of the event that light() lights. Defaults to orange.
• font?: FontFamily | undefined

DateMarktype

The mark of an event on the line.

type DateMark = "dot" | "ring" | "star"

DateUnittype

What a tick of the line is: the start of a year, of a month, or of a day.

type DateUnit = "year" | "month" | "day"

decimalfunction

A number readout that follows a function of the timeline, drawn fresh each frame.

function decimal(read: () => number, options?: DecimalOptions): Node

DecimalOptionsinterface

• digits?: number | undefined
• size?: number | undefined
• color?: ColorInput | undefined
• font?: FontFamily | undefinedDefaults to mono, in every film: a number that changes keeps its width in mono.
• prefix?: string | undefined
• suffix?: string | undefined

donutfunction

function donut(data: readonly PieDatum[], options?: PieOptions): PieChart

dotChartfunction

Dots on a shared axis, one row per item, with a line for each interval: dotChart([{ label: 'blocks', value: 0.89, low: 0.87, high: 0.91 }]).

function dotChart(data: readonly DotDatum[], options?: DotChartOptions): DotChart

DotChartclass

One row per item: its label, a dot at its value on a shared axis, and a line for its interval. It shows many scores with their uncertainty in less room than bars, and its axis does not have to start at zero. The rows keep the order of the data, so sort the data to rank it. enter() brings the rows in one by one. scale: 'log' gives each power of ten the same room, for values that differ by many powers of ten.

new DotChart(data

• rows: Node[]One node per item, which holds its label, its interval and its dot.
• labels: Node[]
• dots: Node[]
• intervals: (Node | null)[]The interval of each item, or null for an item that has none.
• axis: NodeThe axis line, the grid, the ticks and their numbers, and the axis label.
• domain: readonly [number, number]The two ends of the axis, as values.
• labelsOf(part: Node): readonly Node[]The label, the dot and the interval of one row belong together, so a light on one of them keeps the row bright.
• p(value: number, row: number): [number, number]The place of a value in a row, in the coordinates of the chart. Row 0 is the first item. On a log axis, the value must be more than 0.
• enter(options?: AnimOptions): AnimThe axis fades in, then the rows arrive one after another, from the first to the last.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): DotChart
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): DotChart
• drop(child: Node): DotChart
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): DotChartA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): DotChartSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): DotChart
• moveTo(target: Node | Vec): DotChartMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): DotChartMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): DotChartScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): DotChartRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): DotChartScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): DotChartPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): DotChartLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): DotChartLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): DotChart
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): DotChart
• color(color: ColorInput): DotChartRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): DotChart
• glow(radius: number, color?: ColorInput | undefined): DotChartSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): DotChart
• zIndex(value: number): DotChart
• pin(): DotChartPin to the screen so the camera does not move this node.
• hide(): DotChart
• show(): DotChart
• named(label: string): DotChart

DotChartOptionsinterface

• width?: number | undefinedThe length of the axis. The labels are outside it, at the left. Defaults to 900.
• height?: number | undefinedThe height of all rows together. Defaults to 1.65 of labelSize for each row.
• labelSize?: number | undefinedText size of the labels and the ticks. Defaults to 20.
• color?: ColorInput | undefinedThe color of the axis. Defaults to faint.
• dotColor?: ColorInput | undefinedThe color of a dot that has none of its own. Defaults to blue.
• domain?: readonly [number, number] | undefinedThe values at the two ends of the axis. Defaults to a round range that holds every value and interval. On a log axis, the default is the powers of ten around them.
• ticks?: number | readonly number[] | undefinedAbout how many ticks to draw, or the values to mark. Defaults to about 5. On a log axis, the default is the powers of ten in the domain, and every second or third one when there are more than 8.
• format?: ((value: number) => string) | undefinedHow to write a tick. On a log axis, the default is a short form: 1, 10, 100, 1k, 1M, and 0.01.
• scale?: "linear" | "log" | undefined'log' gives each power of ten the same room, for values that differ by more than about a hundred times. Every value, interval end, domain end and tick must then be more than 0. Say on screen that the axis is logarithmic, for example in xLabel. Defaults to linear.
• xLabel?: string | undefinedA line under the axis that says what the value is and which way is better.
• grid?: boolean | undefinedDraw a faint vertical line at each tick. On by default.
• font?: FontFamily | undefined

DotDatuminterface

• label: string
• value: number
• low?: number | undefinedThe two ends of an interval around the value, such as a 95% confidence interval. Give both or none.
• high?: number | undefined
• color?: ColorInput | undefinedDefaults to the dotColor of the chart.
• hollow?: boolean | undefinedDraw a ring in place of a filled dot, to tell a second group apart.

epicyclesfunction

function epicycles(terms: readonly FourierTerm[], options: EpicyclesOptions): Epicycles

Epicyclesclass

Circles on circles: the tip of the chain draws the original shape.

new Epicycles(terms

• terms: readonly FourierTerm[]
• outline(): PathThe reconstructed outline as a path, for morphing the drawing into something else.
• point(u: number): [number, number]
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Epicycles
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Epicycles
• drop(child: Node): Epicycles
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): EpicyclesA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): EpicyclesSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Epicycles
• moveTo(target: Node | Vec): EpicyclesMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): EpicyclesMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): EpicyclesScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): EpicyclesRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): EpicyclesScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): EpicyclesPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): EpicyclesLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): EpicyclesLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Epicycles
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Epicycles
• color(color: ColorInput): EpicyclesRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Epicycles
• glow(radius: number, color?: ColorInput | undefined): EpicyclesSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Epicycles
• zIndex(value: number): Epicycles
• pin(): EpicyclesPin to the screen so the camera does not move this node.
• hide(): Epicycles
• show(): Epicycles
• named(label: string): Epicycles
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

EpicyclesOptionsinterface

• u: () => numberProgress as a function of the timeline. 1 means one full trip.
• circles?: number | undefinedMost circles to draw. The sum still uses every term.
• circleColor?: ColorInput | undefined
• armColor?: ColorInput | undefined
• traceColor?: ColorInput | undefined
• traceWidth?: number | undefined
• glow?: number | undefined
• tail?: number | undefinedShare of a trip to keep lit. Use 1 for the whole drawing.
• samples?: number | undefined

eventLogfunction

A list of records that grows, with states: eventLog([{ id: 1, name: 'WorkflowExecutionStarted' }, { ids: [2, 3, 4], name: 'workflow task' }], { title: 'event history', visible: 12 }), then log.append({ id: 5, name: 'ActivityTaskScheduled', detail: 'chargeCard', state: 'new' }).

function eventLog(rows?: readonly LogRow[], options?: EventLogOptions): EventLog

EventLogclass

A list of records with an identity, such as the event history of a workflow, the steps of an agent, or the life of a sandbox. A row has an id, a name, one short detail, and a state that sets its color and its mark. append() adds rows at the bottom, mark() changes the state of rows, fold() puts rows that follow each other into one line, focus() moves one outline to a row, and scrollTo() moves the window to a row. The window shows visible lines. When the list has more, the oldest rows leave at the top, and the first line says how many are above. The list changes its rows one change at a time: two changes of the rows whose times overlap are an error. .at() places the middle of the panel. The panel has its full height from the start.

new EventLog(rows?

• frame: NodeThe panel: its fill and its border.
• rules: Node[]The line under the title and the line over the footer.
• title: Node | null
• footer: Node | nullThe line under the list that follows the count, or null.
• earlier: NodeThe first line of a window with rows above it: the number of those records.
• later: NodeThe last line of a window with rows under it: the number of those records.
• outline: NodeWhat focus() moves: the outline around a row, or the band behind it.
• pitch: numberThe distance from one row to the next. A code block beside the list can take it: leading: log.pitch / size.
• rows: LogRowNode[]The nodes of the lines in the window, from the top, after the changes that are scheduled so far. A fold is one node.
• count: numberThe number of records that show, after the changes that are scheduled so far. A fold counts each record that it holds. A row that waits for show() does not count.
• ids: Id[]The ids of the records, in order, after the changes that are scheduled so far.
• row(id: Id): LogRowNodeThe node of the line that shows a record, after the changes that are scheduled so far. For a record in a fold, that is the line of the fold. A row that is out of the window is an error: scrollTo() brings it in.
• p(id: Id, side?: "left" | "right"): [number, number]The point where a connector to a row ends: on the left or the right border of the panel, at the middle height of the row, in the coordinates of the list. It is the place after the changes that are scheduled so far, and it does not follow the row. For a fold, any of its ids gives the point. Defaults to the left.
• find(test: (row: LogRow) => boolean): Id[]The ids of the rows that a function picks, in the order of the list, after the changes that are scheduled so far: one id for a row, and each id of a fold. So mark(find(test), state) changes the same records as mark(test, state). The function gets a row as the list shows it: with its id, its ids, its state and its family. A fold is one row there. A row that waits for show() has shown: false.
• clone(): EventLogA copy with its own rows and its own bookkeeping, so a change of the copy does not change the list.
• enter(options?: AnimOptions): AnimThe panel, the title and the footer arrive, and then the rows of the window.
• append(rows: LogRow | readonly LogRow[], options?: AnimOptions): AnimRows arrive at the bottom, one after another. In a full window, the oldest rows leave at the top as the new ones arrive, and all rows move as one. The first line then says how many records are above. lag: 0 brings the rows of one call together, as a group. A window that scrollTo() moved goes back to the end first. An id that the list has is an error.
• show(): EventLog show(which: Id | readonly Id[] | ((row: LogRow) => boolean), options?: AnimOptions | undefined): AnimRows that had their place and did not show arrive there, one after another, as the rows of append arrive. which is an id, a list of ids, or a function of a row, as mark takes. No row moves, and the window does not move: a row that is out of it changes the count of its side. The footer and the two counts count the rows that show. A row that shows already does not change. With no argument, the list itself shows, as any node does.
• mark(which: Id | readonly Id[] | ((row: LogRow) => boolean), state: string, options?: AnimOptions): AnimRows change state: the color of the name cross-fades, and so does the mark at the left. which is an id, a list of ids, or a function of a row, which the list calls when the change is scheduled. So a second change in one sequence sees the states that the first one left. An id names one record. In a closed fold, the record takes the state, and the fold shows the look of the record that was marked last. After unfold(), each record has its own state. The function gets a row as find() gives it. A fold is one row there, and a fold that it picks takes the state with all its records. A row that already has the state does not change. lag makes the rows change one after another, in the order of the list.
• fold(ids: readonly Id[], label?: string | LogRowFields | undefined, options?: AnimOptions): AnimRows that follow each other become one line: a fold, with its first id, its last id, and a name, such as "2 to 4 workflow task". The label is the name, or the fields of the row of the fold: a name, a detail, a time, a state, a family. Without a state, the fold has the state of its first row. With no label, a fold that unfold() opened closes again as it was. The fold counts as one line of the window, and as its records in count. The ids can be in any order. Rows that do not follow each other, and a row that is in a fold, are errors.
• unfold(firstId: Id, options?: AnimOptions): AnimA fold opens into its rows. firstId is the first id of the fold. fold() with the same ids closes it again.
• scrollTo(id: Id, options?: AnimOptions): AnimThe window moves to a row that is out of it, and the row shows: at the top of the window for a row that was above, and at its end for a row that was under. The first line says how many records are above the window, and the last line says how many are under it. A row that is in the window moves nothing, so such a call can play with any change. append() brings the window back to the end.
• focus(id: Id | null, options?: AnimOptions): AnimThe outline goes to a row, and stays there until the next focus. focus(null) takes it away. The outline is with its row at every frame: it moves with a row that scrolls, arrives with a row that arrives, and leaves with a row that leaves the window. On its way to another row it fades out at the first and comes in at the second, so it does not cross the text of the rows between the two. Each call takes the place of the outline and how much of it shows back from its time on, whatever the film did to the node outline before. A leading that is too small for the outline is an error here.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): EventLog
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): EventLog
• drop(child: Node): EventLog
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): EventLogSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): EventLog
• moveTo(target: Node | Vec): EventLogMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): EventLogMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): EventLogScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): EventLogRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): EventLogScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): EventLogPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): EventLogLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): EventLogLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): EventLog
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): EventLog
• color(color: ColorInput): EventLogRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): EventLog
• glow(radius: number, color?: ColorInput | undefined): EventLogSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): EventLog
• zIndex(value: number): EventLog
• pin(): EventLogPin to the screen so the camera does not move this node.
• hide(): EventLog
• named(label: string): EventLog
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

EventLogOptionsinterface

• width?: number | undefinedThe width of the list. Defaults to 640.
• visible?: number | undefinedHow many lines show at once. More rows scroll: the oldest leave at the top, and the first line then says how many are above. Defaults to 10.
• size?: number | undefinedText size. Defaults to 24.
• leading?: number | undefinedThe height of a row, as a part of size. Defaults to the height that the outline of the focus needs, about 1.9. A list with focusLook: 'band', or with no focus, can take less, such as 1.5.
• states?: Record<string, LogState> | undefinedThe states and their looks. Defaults to LOG_STATES.
• title?: string | undefinedA title over the list, such as 'event history'.
• footer?: ((count: number) => string) | undefinedA line under the list that follows the count of the rows that show, such as (count) => ${count} events.
• titleSize?: number | undefinedThe text size of the title, the footer and the counts of the rows out of the window. Defaults to 0.85 of size.
• nameWidth?: number | undefinedThe room of the names. A longer name is cut with an ellipsis. Defaults to the longest name of the first rows, and to 60% of the width at most. The details have the room that is left. The name of a row with no detail may go on to the end of the details.
• idWidth?: number | undefinedThe room of the ids. A longer id is an error. Defaults to the longest id of the first rows, and to two digits at least.
• timeWidth?: number | undefinedThe room of the times. A longer time is an error. Defaults to the longest time of the first rows. Set it for a list that gets its first time later.
• ellipsis?: boolean | undefinedWith false, a name or a detail that does not fit is an error, and not a text with an ellipsis. Defaults to true.
• focusLook?: "outline" | "band" | undefinedWhat focus() draws: an outline around the row, or a band behind it. Defaults to outline.
• font?: FontFamily | undefinedThe font of the title, the footer and the details. Defaults to the font of the film. The ids, the names and the times are in mono.
• detailFont?: FontFamily | undefinedThe font of the details, for a detail that is data, such as the output of a run. Defaults to font.

FieldFntype

type FieldFn = (x: number, y: number, t: number) => Vec

FilmCheckOptionsinterface

• times?: readonly number[] | undefinedInspect exactly these times, in seconds, in place of the automatic sampling.
• samples?: number | undefinedAdd this many evenly spaced samples to the moments at rest.
• motion?: boolean | undefinedAlso inspect every frame. A problem that appears only while something moves is a warning, because the check cannot tell a collision from one picture that replaces another. A stretch of 0.2 seconds or more with nothing visible is reported as film.blank. Text that leaves before a viewer can read it is reported as film.text_brief.
• readingSpeed?: number | undefinedFor a motion scan, the characters that a viewer reads in one second. Text that leaves before a reader at this speed gets to its end is reported as film.text_brief. Defaults to 20, the fastest speed that subtitle guides allow for an adult viewer. 0 turns the rule off.
• stepped?: boolean | undefinedThe film plays one chapter at a time, as a deck does: the player waits for the viewer on the first frame of each chapter after the start. Text that is up at such a stop has all the time that the viewer gives it, so film.text_brief does not report it.
• contentTop?: number | undefinedFor a motion scan, the canvas y where the content starts. Marks above it, such as a heading that stays up, do not count as content when the scan looks for blank frames.
• textMargin?: number | undefinedThe least distance between text and an edge of the frame, in canvas pixels. Text that is nearer is reported as film.text_edge. Defaults to 2% of the shorter side of the frame. 0 turns the rule off.
• imageNetwork?: "allow" | "deny" | undefined
• look?: Look | "midnight" | "paper" | "blueprint" | "chalk" | "neon" | undefined
• fps?: number | undefined
• bloom?: number | undefined
• background?: string | null | undefined

FilmCheckReportinterface

• ok: boolean
• width: number
• height: number
• duration: number
• sampled: number[]The moments at rest that were inspected, in seconds.
• frames?: number | undefinedThe number of frames that a motion scan inspected.
• diagnostics: FilmDiagnostic[]
• summary: { errors: number; warnings: number; }

FilmDiagnosticinterface

• code: FilmDiagnosticCode
• severity: "error" | "warning"
• message: string
• time: numberFirst sampled time with this problem, in seconds.
• until: numberLast sampled time with this problem, in seconds.
• box: BoundsWhere to look, in canvas pixels with the origin at the top left.
• stage: { x: number; y: number; }The center of the box in authoring coordinates, with (0, 0) at mid-frame.
• text?: string | undefinedThe text involved, when there is any.
• other?: string | undefinedThe second text involved in an overlap.
• motion?: { spans: number; seconds: number; } | undefinedSet when a motion scan finds the problem only while something moves. time and until then bound the longest stretch. spans counts the separate stretches, and seconds is their total length. For film.text_brief, time and until bound the first stretch, or a whole row of texts that follow each other. spans counts the stretches or the texts, and seconds is the time that they were readable.

FilmDiagnosticCodetype

type FilmDiagnosticCode = "film.off_canvas" | "film.text_edge" | "film.text_overlap" | "film.text_crossed" | "film.text_brief" | "film.missing_glyph" | "film.blank" | "film.image_asset"

fourierfunction

Discrete Fourier transform of a closed outline, largest terms first. Sample the points evenly along the outline, for example with samplePath.

function fourier(points: readonly Vec[], options?: { terms?: number | undefined; }): FourierTerm[]

fourierPointfunction

Value of a Fourier series at u, where u from 0 to 1 is one trip around the shape.

function fourierPoint(terms: readonly FourierTerm[], u: number): [number, number]

FourierTerminterface

• freq: numberWhole turns per trip around the shape.
• amp: number
• phase: number

fromComponentfunction

Render any Vizmatic TSX component and return it as animatable vector nodes, so every existing diagram and chart can be written on, faded, and morphed. It runs in Node only, because it needs the layout engine: const flow = await fromComponent(<Flow c={c} stages={stages} />, { width: 900, height: 300 }) s.play(write(flow))

function fromComponent(element: ReactNode, options: FromComponentOptions): Promise<SvgNode>

FromComponentOptionsinterface

• width: numberLayout size of the component, in pixels.
• height: number
• theme?: ThemeMode | undefined
• canvas?: RenderBackground | undefinedCanvas behind the component. Transparent by default, so it sits on the film.
• scale?: number | undefinedScale on stage. Layout stays at width and height, so dense text stays small.
• center?: boolean | undefinedCenter the picture on the node's origin. On by default.
• background?: boolean | undefinedKeep a full-canvas background rectangle. Films have their own, so it is dropped by default.
• splitGlyphs?: boolean | undefinedSplit filled multi-glyph outlines into one node per glyph, so text writes letter by letter.
• font?: FontFamily | undefinedThe font of the text elements. Defaults to the font that the film names. Text that the SVG sets in a monospace family is code, and it is then mono. With no font from this option or from the film, every text is sans, as it was before films had a font: the importer does not read which family the SVG names.

fromSvgfunction

Turn SVG markup into stage nodes. Each shape becomes a leaf whose origin is its center, so it can be drawn, faded, scaled, and morphed like anything else. Filters and masks are skipped, because shapes draw without them.

function fromSvg(source: string, options?: FromSvgOptions): SvgNode

FromSvgOptionsinterface

• width?: number | undefinedFit into this box, keeping proportions. Defaults to the SVG's own size.
• height?: number | undefined
• center?: boolean | undefinedCenter the picture on the node's origin. On by default.
• background?: boolean | undefinedKeep a full-canvas background rectangle. Films have their own, so it is dropped by default.
• splitGlyphs?: boolean | undefinedSplit filled multi-glyph outlines into one node per glyph, so text writes letter by letter.
• font?: FontFamily | undefinedThe font of the text elements. Defaults to the font that the film names. Text that the SVG sets in a monospace family is code, and it is then mono. With no font from this option or from the film, every text is sans, as it was before films had a font: the importer does not read which family the SVG names.

graphfunction

function graph(nodes: readonly GraphNodeSpec[], edges: readonly GraphEdgeSpec[], options?: GraphOptions): Graph

Graphclass

Nodes and edges with a stable layout. node(id) and edge(from, to) return ordinary nodes, so every verb works on them, and visit and pulseEdge tell an algorithm's story.

new Graph(nodes

• nodes: Map<string, GraphNode>
• edges: GraphEdge[]
• edgeLayer: Node
• nodeLayer: Node
• node(id: string): GraphNode
• edge(from: string, to: string): GraphEdge
• enter(options?: AnimOptions): AnimNodes pop in by order, and each edge draws as its source is shown.
• pulseEdge(from: string, to: string, options?: AnimOptions & { color?: ColorInput | undefined; length?: number | undefined; }): AnimA lit signal travels along an edge.
• visit(id: string, options?: AnimOptions & { color?: ColorInput | undefined; }): AnimMark a node as reached: its color changes and it swells for a moment.
• moveNode(id: string, to: Vec, options?: AnimOptions): AnimMove a node. Its edges follow, re-routed as straight lines.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Graph
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Graph
• drop(child: Node): Graph
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): GraphA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): GraphSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Graph
• moveTo(target: Node | Vec): GraphMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): GraphMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): GraphScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): GraphRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): GraphScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): GraphPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): GraphLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): GraphLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Graph
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Graph
• color(color: ColorInput): GraphRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Graph
• glow(radius: number, color?: ColorInput | undefined): GraphSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Graph
• zIndex(value: number): Graph
• pin(): GraphPin to the screen so the camera does not move this node.
• hide(): Graph
• show(): Graph
• named(label: string): Graph
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

GraphEdgeclass

new GraphEdge(path?

• shaft: Node
• tip: Node | null
• caption: Node | null
• from: string
• to: string
• tipSize: number
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): GraphEdge
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): GraphEdge
• drop(child: Node): GraphEdge
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): GraphEdgeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): GraphEdgeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): GraphEdge
• moveTo(target: Node | Vec): GraphEdgeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): GraphEdgeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): GraphEdgeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): GraphEdgeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): GraphEdgeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): GraphEdgePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): GraphEdgeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): GraphEdgeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): GraphEdge
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): GraphEdge
• color(color: ColorInput): GraphEdgeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): GraphEdge
• glow(radius: number, color?: ColorInput | undefined): GraphEdgeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): GraphEdge
• zIndex(value: number): GraphEdge
• pin(): GraphEdgePin to the screen so the camera does not move this node.
• hide(): GraphEdge
• show(): GraphEdge
• named(label: string): GraphEdge
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

GraphEdgeSpecinterface

• from: string
• to: string
• label?: string | undefined
• color?: ColorInput | undefined
• width?: number | undefined
• dash?: readonly number[] | undefined
• directed?: boolean | undefined

GraphNodeclass

new GraphNode(path?

• shape: Node
• caption: Node | null
• halfWidth: number
• halfHeight: number
• round: boolean
• edgePoint(fx: number, fy: number, tx: number, ty: number, pad?: number): VecPoint on this node's outline facing a stage point, in graph space.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): GraphNode
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): GraphNode
• drop(child: Node): GraphNode
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): GraphNodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): GraphNodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): GraphNode
• moveTo(target: Node | Vec): GraphNodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): GraphNodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): GraphNodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): GraphNodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): GraphNodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): GraphNodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): GraphNodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): GraphNodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): GraphNode
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): GraphNode
• color(color: ColorInput): GraphNodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): GraphNode
• glow(radius: number, color?: ColorInput | undefined): GraphNodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): GraphNode
• zIndex(value: number): GraphNode
• pin(): GraphNodePin to the screen so the camera does not move this node.
• hide(): GraphNode
• show(): GraphNode
• named(label: string): GraphNode
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

GraphNodeSpecinterface

• id: string
• label?: string | undefined
• color?: ColorInput | undefined
• radius?: number | undefinedCircle radius.
• width?: number | undefinedBox size. A node with a width draws as a rounded box.
• height?: number | undefined
• at?: Vec | undefinedManual position, used by layout: 'manual'.
• math?: boolean | undefinedTypeset the label as math.

GraphOptionsinterface

• layout?: "dagre" | "force" | "circle" | "manual" | undefined
• direction?: "LR" | "RL" | "TB" | "BT" | undefined
• width?: number | undefinedBounding size for force and circle layouts.
• height?: number | undefined
• nodeGap?: number | undefined
• rankGap?: number | undefined
• radius?: number | undefined
• labelSize?: number | undefined
• edgeLabelSize?: number | undefined
• directed?: boolean | undefined
• nodeColor?: ColorInput | undefined
• edgeColor?: ColorInput | undefined
• seed?: number | undefined
• fillOpacity?: number | undefinedFill nodes softly with their color instead of leaving them hollow.
• font?: FontFamily | undefinedThe font of the node labels. Defaults to the font of the film.
• edgeFont?: FontFamily | undefinedThe font of the edge labels. Defaults to the font that the film names, and to mono in a film that names none.

GridLegendOptionsinterface

• size?: number | undefinedText size of the names. The sample cells are a little smaller. Defaults to 26.
• gap?: number | undefinedRoom between a name and the next sample cell. Defaults to 1.3 of size.
• font?: FontFamily | undefined

GridStateinterface

• color: ColorInput
• fill?: number | undefinedOpacity of the fill, 0 to 1. 0 draws the outline only. Defaults to 0.7.
• dash?: boolean | undefinedA dashed outline, for a thing that is not there.

heatmapfunction

function heatmap(values: readonly (readonly number[])[], options?: HeatmapOptions): Heatmap

Heatmapclass

new Heatmap(values

• cells: Node[][]
• rowLabels: Node[]
• columnLabels: Node[]
• numbers: Node[][]
• rowCount: number
• colCount: number
• colorFor(value: number): Rgba
• cell(row: number, column: number): Node
• row(index: number): Node[]
• col(index: number): Node[]
• enter(options?: AnimOptions): AnimCells fade in along the diagonal.
• update(values: readonly (readonly number[])[], options?: AnimOptions): AnimRecolor every cell to new values.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Heatmap
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Heatmap
• drop(child: Node): Heatmap
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): HeatmapA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): HeatmapSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Heatmap
• moveTo(target: Node | Vec): HeatmapMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): HeatmapMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): HeatmapScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): HeatmapRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): HeatmapScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): HeatmapPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): HeatmapLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): HeatmapLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Heatmap
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Heatmap
• color(color: ColorInput): HeatmapRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Heatmap
• glow(radius: number, color?: ColorInput | undefined): HeatmapSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Heatmap
• zIndex(value: number): Heatmap
• pin(): HeatmapPin to the screen so the camera does not move this node.
• hide(): Heatmap
• show(): Heatmap
• named(label: string): Heatmap
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

HeatmapOptionsinterface

• cell?: number | undefinedCell edge in stage pixels.
• cellWidth?: number | undefined
• cellHeight?: number | undefined
• gap?: number | undefined
• colors?: readonly ColorInput[] | undefined
• domain?: readonly [number, number] | undefinedValue range for the color ramp.
• values?: boolean | undefinedPrint values in cells.
• format?: ((value: number) => string) | undefined
• valueSize?: number | undefined
• rowLabels?: readonly string[] | undefined
• columnLabels?: readonly string[] | undefined
• labelSize?: number | undefined
• columnLabelAngle?: number | undefinedTilt column labels so long names fit, in radians.
• radius?: number | undefined
• font?: FontFamily | undefinedThe font of the row and the column labels. Defaults to the font of the film. The values in the cells are in mono.

HighlightOptionsinterface

• color?: ColorInput | undefined
• opacity?: number | undefined
• pad?: number | undefinedExtra room around the target.
• radius?: number | undefined
• from?: "left" | "right" | undefinedKeep the mark afterwards. By default it stays until you fade it.
• duration?: number | undefined
• ease?: Ease | undefined
• lag?: number | undefinedFraction of one item's time between the starts of consecutive items.

highlightSweepfunction

A marker stroke sweeps across a target and stays behind it. .mark is the node, so it can be faded out later.

function highlightSweep(target: Node | readonly Node[], options?: HighlightOptions): Anim & { mark: Node; }

histogramfunction

function histogram(samples: readonly number[], options?: HistogramOptions): Histogram

Histogramclass

A distribution that can fill up over time. fillUp() drops the samples in, in order, so bars rise exactly as the data accumulates.

new Histogram(samples

• shown: Value
• bins: number
• range: readonly [number, number]
• chartWidth: number
• chartHeight: number
• axis: Node
• total: number
• peak: number
• p(value: number, count: number): [number, number]Local stage point for a value and a count.
• fillUp(options?: AnimOptions & { count?: number | undefined; }): AnimSamples arrive in order, from none to count (all of them by default).
• curve(f: (x: number) => number, options?: { color?: ColorInput | undefined; width?: number | undefined; samples?: number | undefined; }): NodeOverlay a curve, such as the fitted density, on the same axes. f returns a count.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Histogram
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Histogram
• drop(child: Node): Histogram
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): HistogramA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): HistogramSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Histogram
• moveTo(target: Node | Vec): HistogramMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): HistogramMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): HistogramScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): HistogramRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): HistogramScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): HistogramPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): HistogramLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): HistogramLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Histogram
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Histogram
• color(color: ColorInput): HistogramRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Histogram
• glow(radius: number, color?: ColorInput | undefined): HistogramSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Histogram
• zIndex(value: number): Histogram
• pin(): HistogramPin to the screen so the camera does not move this node.
• hide(): Histogram
• show(): Histogram
• named(label: string): Histogram
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

HistogramOptionsinterface

• bins?: number | undefined
• range?: readonly [number, number] | undefined
• max?: number | undefinedFixes the top of the scale, for a stable axis while samples arrive.
• gap?: number | undefined
• ticks?: number | undefinedNumber of x tick labels.
• colors?: readonly ColorInput[] | undefined
• width?: number | undefined
• height?: number | undefined
• labelSize?: number | undefinedText size for direct labels and ticks.
• color?: ColorInput | undefined
• font?: FontFamily | undefinedThe font of the labels and the ticks. Defaults to the font of the film. A value that the chart prints is in mono.

infoBoxfunction

function infoBox(options: InfoBoxOptions): InfoBox

InfoBoxclass

A compact node for system stories: a title, a status, and rows of labeled metrics at reading size. It packs information like an engineering figure, not a slide. For a talk, raise size and the whole box scales with it.

new InfoBox(options

• frame: Node
• accentBar: Node | null
• titleNode: Node
• subtitleNode: Node | null
• badgeNode: Node | null
• rowLabels: Node[]
• rowValues: (Node | null)[]
• meters: Node[]
• tagNodes: Node[]
• boxWidth: number
• boxHeight: number
• port(side: Edge, at?: number): [number, number]Stage point on one side of the box. at moves along the side, from -1 to 1.
• enter(options?: AnimOptions): AnimThe frame draws, then the contents settle in, top to bottom.
• setValue(row: number, value: string, options?: AnimOptions & { tone?: ColorInput | undefined; }): AnimChange a row's value in place. Matching digits slide, and the others cross-fade.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): InfoBox
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): InfoBox
• drop(child: Node): InfoBox
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): InfoBoxA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): InfoBoxSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): InfoBox
• moveTo(target: Node | Vec): InfoBoxMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): InfoBoxMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): InfoBoxScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): InfoBoxRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): InfoBoxScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): InfoBoxPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): InfoBoxLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): InfoBoxLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): InfoBox
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): InfoBox
• color(color: ColorInput): InfoBoxRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): InfoBox
• glow(radius: number, color?: ColorInput | undefined): InfoBoxSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): InfoBox
• zIndex(value: number): InfoBox
• pin(): InfoBoxPin to the screen so the camera does not move this node.
• hide(): InfoBox
• show(): InfoBox
• named(label: string): InfoBox
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

InfoBoxOptionsinterface

• title: string
• subtitle?: string | undefined
• badge?: string | undefinedShort status tag at the top right, such as "p99" or "degraded".
• badgeTone?: ColorInput | undefined
• rows?: readonly InfoRow[] | undefined
• tags?: readonly string[] | undefinedSmall chips along the bottom.
• width?: number | undefinedWidth in stage pixels. Grows to fit the content when omitted.
• size?: number | undefinedBase text size. Everything scales from it. Raise it for a presentation.
• accent?: ColorInput | undefinedColor of the left edge.
• fill?: ColorInput | undefined
• border?: ColorInput | undefined
• radius?: number | undefined
• font?: FontFamily | undefinedThe font of the title and the row labels. Defaults to the font of the film. The subtitle, the badge, the values and the tags are in mono.

InfoRowinterface

• label: string
• value?: string | undefined
• tone?: ColorInput | undefinedColor for the value.
• meter?: number | undefinedThin meter under the row, from 0 to 1.
• spark?: readonly number[] | undefinedSmall trend drawn at the end of the row.

labeledDotfunction

function labeledDot(label: string, options?: LabeledDotOptions): LabeledDot

LabeledDotclass

A point with a label. The node's origin stays on the point.

new LabeledDot(label

• mark: Node
• caption: Node
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): LabeledDot
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): LabeledDot
• drop(child: Node): LabeledDot
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): LabeledDotA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): LabeledDotSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): LabeledDot
• moveTo(target: Node | Vec): LabeledDotMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): LabeledDotMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): LabeledDotScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): LabeledDotRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): LabeledDotScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): LabeledDotPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): LabeledDotLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): LabeledDotLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): LabeledDot
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): LabeledDot
• color(color: ColorInput): LabeledDotRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): LabeledDot
• glow(radius: number, color?: ColorInput | undefined): LabeledDotSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): LabeledDot
• zIndex(value: number): LabeledDot
• pin(): LabeledDotPin to the screen so the camera does not move this node.
• hide(): LabeledDot
• show(): LabeledDot
• named(label: string): LabeledDot
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

LabeledDotOptionsinterface

• color?: ColorInput | undefined
• radius?: number | undefined
• side?: Side | undefined
• gap?: number | undefined
• size?: number | undefined
• plain?: boolean | undefined
• font?: FontFamily | undefinedThe font of a plain label. Defaults to the font of the film.
• labelColor?: ColorInput | undefined

Laneinterface

• name: string
• color?: ColorInput | undefinedThe color of the spans and the marks of the lane. Defaults to blue.

LaneBoundaryinterface

A line along the time area between two lanes, such as the line between user space and the kernel.

• between: readonly [LaneRef, LaneRef]The two lanes that the boundary is between. They are neighbors.
• label?: string | undefinedText after the right end of the line, outside the time area.
• color?: ColorInput | undefinedDefaults to yellow.
• count?: boolean | undefinedShow the number of handoffs that crossed the boundary so far, after the label, and a tick on the line for each one.

LaneEventtype

type LaneEvent = { lane: LaneRef; start: number; end: number; label?: string | undefined; labelSide?: LaneLabelSide | undefined; color?: ColorInput | undefined; open?: boolean | undefined; idle?: boolean | undefined; } | { from: LaneRef; to: LaneRef; at: number; label?: string | undefined; labelSide?: LaneLabelSide | undefined; color?: ColorInput | undefined; dashed?: boolean | undefined; } | { lane: LaneRef; at: number; label?: string | undefined; labelSide?: LaneLabelSide | undefined; color?: ColorInput | undefined; }

LaneEventNodeclass

One event of a Lanes object. It is hidden until the cursor reaches it.

new LaneEventNode(kind: "mark" | "span" | "handoff", shape

• kind: "mark" | "span" | "handoff"
• shape: NodeThe bar of a span, the arrow of a handoff, or the dot of a mark.
• text: Node | nullThe label of the event, or null when it has none.
• tip: Node | nullThe arrow head of an open span that reaches the last end of the domain.
• edge: Node | nullThe dashed outline of an idle span.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): LaneEventNode
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): LaneEventNode
• drop(child: Node): LaneEventNode
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): LaneEventNodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): LaneEventNodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): LaneEventNode
• moveTo(target: Node | Vec): LaneEventNodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): LaneEventNodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): LaneEventNodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): LaneEventNodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): LaneEventNodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): LaneEventNodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): LaneEventNodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): LaneEventNodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): LaneEventNode
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): LaneEventNode
• color(color: ColorInput): LaneEventNodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): LaneEventNode
• glow(radius: number, color?: ColorInput | undefined): LaneEventNodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): LaneEventNode
• zIndex(value: number): LaneEventNode
• pin(): LaneEventNodePin to the screen so the camera does not move this node.
• hide(): LaneEventNode
• show(): LaneEventNode
• named(label: string): LaneEventNode
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

LaneLabelSidetype

Where the label of an event goes, when the film must choose. For a span: over the bar, under it, or beside it at its left or its right end. For a handoff: at the left or the right of its arrow, and over or under the boundary that the arrow crosses first. For a mark: over the dot, under it, or beside it.

type LaneLabelSide = "left" | "right" | "over" | "under"

LaneReftype

The name of a lane, or its index.

type LaneRef = string | number

lanesfunction

Lanes over time, one per actor, with spans, handoffs and marks: lanes(['guest', 'KVM'], [{ lane: 'guest', start: 0, end: 30, label: 'runs' }, { from: 'guest', to: 'KVM', at: 30, label: 'VM exit' }, { lane: 'KVM', start: 30, end: 42 }]).

function lanes(names: readonly (string | Lane)[], events: readonly LaneEvent[], options?: LanesOptions): Lanes

Lanesclass

Who runs when: one lane per actor, a bar for each span of work, an arrow for each handoff between two lanes, and a dot for each instant. Time runs from left to right. advance(to) moves a cursor to a time and stops there, and what the cursor passes appears, so a narration can step through the sequence. With ticks, the object also draws a time axis, for a chart of durations. With boundaries, it draws a line between two lanes and counts the handoffs that cross it. .at() places the middle of the time area. The names of the lanes are outside it, at the left.

new Lanes(lanes

• names: Node[]The name of each lane, at the left of the time area.
• rails: Node[]A faint line along each lane.
• events: LaneEventNode[]One node per event, in the order given.
• spans: LaneEventNode[]The events by kind, in the order given.
• handoffs: LaneEventNode[]
• marks: LaneEventNode[]
• boundaries: Node[]One node per boundary: its line, its label, and its counter.
• counters: (Node | null)[]The number at the right end of each boundary that counts its crossings, or null for a boundary that does not.
• axis: Node | nullThe axis line, the ticks and their numbers, and the axis label. Null without ticks.
• cursor: NodeA thin vertical line over all lanes, at the time of the object. The first advance shows it.
• domain: readonly [number, number]The times at the two ends of the time area.
• labelsOf(part: Node): readonly Node[]The label of an event belongs to its bar, its arrow, or its dot, so a light on that shape keeps the label bright.
• time: numberThe time of the cursor after the changes that are scheduled so far. It starts at the first end of the domain.
• x(time: number): numberThe x of a time, in the coordinates of the object. The middle of the domain is at 0.
• y(lane: LaneRef): numberThe y of the middle of a lane, in the coordinates of the object. The first lane and the last one are at the same distance from 0.
• crossings(boundary: string | number): numberHow many handoffs crossed a boundary up to the time of the cursor, after the changes that are scheduled so far. Name the boundary by its index or by its label.
• enter(options?: AnimOptions): AnimThe names, the lines of the lanes, the boundaries and the axis arrive, lane by lane. No event shows yet.
• advance(to: number, options?: AnimOptions): AnimThe cursor moves from its time to to, and stops. What it passes appears. A span grows with the cursor. A handoff draws its arrow and a mark shows its dot when the cursor reaches them. A label arrives when its event is complete, and a label inside a bar arrives when the bar starts to grow. All of it is over when the animation ends: when the last event needs time after the cursor reaches it, the cursor stops early.
• showAll(options?: AnimOptions): AnimThe same as advance to the last end of the domain. It takes 4 seconds when the film gives no duration.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Lanes
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Lanes
• drop(child: Node): Lanes
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): LanesA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): LanesSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Lanes
• moveTo(target: Node | Vec): LanesMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): LanesMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): LanesScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): LanesRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): LanesScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): LanesPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): LanesLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): LanesLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Lanes
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Lanes
• color(color: ColorInput): LanesRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Lanes
• glow(radius: number, color?: ColorInput | undefined): LanesSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Lanes
• zIndex(value: number): Lanes
• pin(): LanesPin to the screen so the camera does not move this node.
• hide(): Lanes
• show(): Lanes
• named(label: string): Lanes

LanesOptionsinterface

• width?: number | undefinedThe width of the time area. The lane names are outside it, at the left. Defaults to 1400.
• barHeight?: number | undefinedThe height of the bar of a span. Defaults to 44.
• pitch?: number | undefinedFrom the middle of one lane to the middle of the next. Defaults to a value with room for the label of a handoff between two bars. Two lanes with a boundary between them are further apart, by 1.25 of the text size.
• domain?: readonly [number, number] | undefinedThe times at the two ends. Defaults to the range of the events.
• ticks?: number | readonly number[] | undefinedTicks under the lanes: a count, or the values. Without it, no axis is drawn, for a sequence that is not to scale.
• format?: ((time: number) => string) | undefinedHow to write a tick.
• axisLabel?: string | undefinedA line under the axis that names the unit. Without ticks, the axis is a line with this label and no ticks.
• boundaries?: readonly LaneBoundary[] | undefinedLines between lanes that are neighbors. A handoff crosses each boundary that is between its two lanes.
• cursor?: boolean | undefinedDraw the cursor. With false, no cursor is ever drawn, and the events still appear at their times. On by default.
• backing?: ColorInput | null | undefinedThe color of the patches behind the labels, the bars and the arrows of dashes. They hide the cursor and the lines of the lanes there. Defaults to the background of the look. On a panel of another color, give that color. Pass null for no patches, on a background with no single color.
• size?: number | undefinedText size. Defaults to 26.
• font?: FontFamily | undefined

legendfunction

A small key. Prefer direct labels. Use this when a figure holds too many marks to label.

function legend(items: readonly LegendItem[], options?: LegendOptions): Node

LegendIteminterface

• label: string
• color?: ColorInput | undefined
• kind?: "dash" | "line" | "swatch" | "dot" | "ring" | undefined

LegendOptionsinterface

• direction?: "row" | "column" | undefined
• size?: number | undefined
• gap?: number | undefined
• font?: FontFamily | undefinedThe font of the labels. Defaults to the font of the film.

lineChartfunction

function lineChart(series: readonly LineSeries[], options?: LineChartOptions): LineChart

LineChartclass

new LineChart(series

• lines: Node[]
• areas: Node[]
• names: Node[]
• axis: Node
• p(x: number, y: number): [number, number]
• series(name: string): Node
• enter(options?: AnimOptions): AnimAxes fade in, lines draw left to right, and their labels arrive as each line lands.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): LineChart
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): LineChart
• drop(child: Node): LineChart
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): LineChartA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): LineChartSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): LineChart
• moveTo(target: Node | Vec): LineChartMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): LineChartMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): LineChartScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): LineChartRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): LineChartScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): LineChartPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): LineChartLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): LineChartLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): LineChart
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): LineChart
• color(color: ColorInput): LineChartRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): LineChart
• glow(radius: number, color?: ColorInput | undefined): LineChartSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): LineChart
• zIndex(value: number): LineChart
• pin(): LineChartPin to the screen so the camera does not move this node.
• hide(): LineChart
• show(): LineChart
• named(label: string): LineChart
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

LineChartOptionsinterface

• x?: readonly [number, number] | undefined
• y?: readonly [number, number] | undefined
• xLabel?: string | undefined
• yLabel?: string | undefined
• xFormat?: ((x: number) => string) | undefined
• yFormat?: ((y: number) => string) | undefined
• xTicks?: number | undefined
• yTicks?: number | undefined
• width?: number | undefined
• height?: number | undefined
• labelSize?: number | undefinedText size for direct labels and ticks.
• color?: ColorInput | undefined
• font?: FontFamily | undefinedThe font of the labels and the ticks. Defaults to the font of the film. A value that the chart prints is in mono.

LineSeriesinterface

• name?: string | undefined
• values?: readonly number[] | undefinedY values at x = 0, 1, 2, ...
• points?: readonly Vec[] | undefined
• color?: ColorInput | undefined
• width?: number | undefined
• dash?: readonly number[] | undefined
• area?: number | undefinedSoft fill under the line.
• smooth?: boolean | undefined

LoadedFontinterface

• unitsPerEm: number
• ascent: number
• descent: number
• lineGap: number
• glyphFor(code: number): number
• advance(glyph: number): number
• kern(left: number, right: number): number
• outline(glyph: number): GlyphOutline | null

LOG_STATESconst

States for a history that is written and then replayed. Each has its own mark, so color is not the only sign.

const LOG_STATES: { stored: { color: string; mark: "dot"; }; new: { color: string; mark: "dot"; }; answered: { color: string; mark: "check"; }; waiting: { color: string; mark: "ring"; }; failed: { color: string; mark: "cross"; }; }

LogRowtype

One row of the list. A row has an id: an event number, a step number. Or it has ids, and stands for several records that follow each other, such as the three events of one task. Such a row is a fold. It shows its first and its last id, as "2 to 4", and unfold() opens it into its rows. An id is in the list once.

type LogRow = LogRowFields & ({ id: Id; ids?: readonly Id[] | undefined; } | { id?: Id | undefined; ids: readonly Id[]; rows?: readonly LogRow[] | undefined; })

LogRowFieldsinterface

What a row shows and carries, apart from its identity.

• name: stringThe name of the record, in mono: ActivityTaskCompleted.
• detail?: string | number | undefinedOne short detail, dim: "ch_1001", attempt 4. A number is taken as its text.
• time?: string | number | undefinedA time at the right end of the row, dim and in mono: +6.01 s. The list has this column when one of its first rows has a time.
• state?: string | undefinedDefaults to the first state of states. A row of a fold defaults to the state of the fold.
• family?: string | undefinedA word that the list does not draw. A film reads it in find() and mark(), to pick the rows of one kind.
• shown?: boolean | undefinedWith false, the row has its place in the list from the start and does not show. show() brings it in. Defaults to true.

LogRowNodeclass

One line of an EventLog: a row, or a fold.

new LogRowNode(mark

• content: NodeThe holder of the parts. show() brings it in, for a row that had its place and did not show.
• mark: NodeThe mark at the left, in the color and the shape of the state. A fold in a state with a dot has three small dots.
• idText: NodeThe id. For a fold, its first id.
• range: Node | nullFor a fold, the word "to" and its last id. Null for a row.
• name: NodeThe name, in the color of the state.
• detail: Node | nullThe detail, or null for a row that has none.
• time: Node | nullThe time, or null for a row that has none.
• parts: Node[]The parts that the line has, from the left: the mark, the id, the range of a fold, the name, the detail, the time.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): LogRowNode
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): LogRowNode
• drop(child: Node): LogRowNode
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): LogRowNodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): LogRowNodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): LogRowNode
• moveTo(target: Node | Vec): LogRowNodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): LogRowNodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): LogRowNodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): LogRowNodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): LogRowNodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): LogRowNodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): LogRowNodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): LogRowNodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): LogRowNode
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): LogRowNode
• color(color: ColorInput): LogRowNodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): LogRowNode
• glow(radius: number, color?: ColorInput | undefined): LogRowNodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): LogRowNode
• zIndex(value: number): LogRowNode
• pin(): LogRowNodePin to the screen so the camera does not move this node.
• hide(): LogRowNode
• show(): LogRowNode
• named(label: string): LogRowNode
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

LogStateinterface

• color: ColorInput
• dim?: boolean | undefinedDraw the row dim, for a record that is old or not reached.
• mark?: "dot" | "ring" | "check" | "cross" | undefinedThe shape of the mark at the left of the row, so that a viewer can tell two states with no color. Defaults to dot.

matrixfunction

function matrix(rows: readonly (readonly (string | number)[])[], options?: MatrixOptions): MatrixNode

MatrixNodeclass

A typeset matrix with real TeX brackets. Each entry is its own node.

new MatrixNode(rows

• cells: TexNode[][]
• entries: Node
• brackets: Node
• rowCount: number
• colCount: number
• cell(row: number, column: number): TexNode
• row(index: number): TexNode[]
• col(index: number): TexNode[]
• setCell(row: number, column: number, value: string | number, options?: AnimOptions): AnimReplace one entry, morphing matching glyphs. Later calls to .cell return the new one.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): MatrixNode
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): MatrixNode
• drop(child: Node): MatrixNode
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): MatrixNodeA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): MatrixNodeSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): MatrixNode
• moveTo(target: Node | Vec): MatrixNodeMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): MatrixNodeMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): MatrixNodeScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): MatrixNodeRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): MatrixNodeScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): MatrixNodePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): MatrixNodeLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): MatrixNodeLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): MatrixNode
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): MatrixNode
• color(color: ColorInput): MatrixNodeRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): MatrixNode
• glow(radius: number, color?: ColorInput | undefined): MatrixNodeSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): MatrixNode
• zIndex(value: number): MatrixNode
• pin(): MatrixNodePin to the screen so the camera does not move this node.
• hide(): MatrixNode
• show(): MatrixNode
• named(label: string): MatrixNode
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

MatrixOptionsinterface

• size?: number | undefined
• color?: ColorInput | undefined
• gapX?: number | undefinedSpace between columns and rows, as multiples of size.
• gapY?: number | undefined
• bracket?: "[" | "(" | "|" | undefined
• bracketColor?: ColorInput | undefined

morphCodefunction

Morph one version of code into another. Tokens are matched in order, so unchanged code slides to its new place and only real edits fade.

function morphCode(from: CodeBlock, to: CodeBlock, options?: AnimOptions): Anim

narrationfunction

Lay a measured narration on the stage. Each scene gets a clock with phrase cues. Captions and chapters are added to the film, so the MP4 carries them.

function narration(stage: Stage, timing: NarrationTiming, options?: NarrationOptions): Narration

Narrationclass

The timeline of a whole narration.

new Narration(stage

• scenes: readonly SceneClock[]
• duration: numberThe end of the last scene, in seconds. Hold the film at least this long, or the voice is cut.
• lead: number
• gap: number
• scene(id: string): SceneClockThe clock of one scene.
• placements(): { scene: string; beat: number; start: number; end: number; }[]Where every beat's recording starts, in order, for the script that mixes the sound.

NarrationBeatinterface

One take of the voice: a sentence or a short paragraph.

• say: stringThe text that the voice speaks. Captions use it.
• duration: numberMeasured length of the recording, in seconds.
• hold?: number | undefinedSilence after the beat, in seconds, for the viewer to think.
• words?: readonly NarrationWord[] | undefinedWord times, from the speech engine or from a transcription. Cues need them.

NarrationOptionsinterface

• lead?: number | undefinedSeconds before the first word, for a logo or an opening picture. Defaults to 0.6.
• gap?: number | undefinedSeconds of silence between scenes, for the picture to change. Defaults to 0.4.
• captions?: boolean | undefinedWrite a caption for each spoken line. On by default.
• captionLength?: number | undefinedLongest caption line, in characters. Defaults to 74.
• chapters?: boolean | undefinedStart a chapter at each scene that has a title. On by default.

NarrationSceneinterface

• id: string
• title?: string | undefinedChapter title. A scene without one does not start a chapter.
• beats: readonly NarrationBeat[]

NarrationTiminginterface

• scenes: readonly NarrationScene[]
• lead?: number | undefinedSeconds before the first word. NarrationOptions.lead overrides it.
• gap?: number | undefinedSeconds of silence between scenes. NarrationOptions.gap overrides it.

NarrationWordinterface

One spoken word, timed in seconds from the start of its beat.

• text: string
• start: number
• end: number

neuralNetfunction

function neuralNet(layers: readonly number[], options?: NeuralNetOptions): NeuralNet

NeuralNetclass

Layers of neurons joined by hairline weights. forward() runs a signal through it.

new NeuralNet(layers

• neurons: Node[][]
• links: Node[][][]Edges between layer i and layer i + 1, by [from][to].
• edgeLayer: Node
• neuronLayer: Node
• captions: Node[]
• layer(index: number): Node[]
• enter(options?: AnimOptions): AnimNeurons appear layer by layer, then the weights draw between them.
• activate(layer: number, values: readonly number[], options?: AnimOptions & { color?: ColorInput | undefined; }): AnimSet how strongly each neuron in a layer fires, from 0 to 1.
• forward(options?: AnimOptions & { activations?: readonly (readonly number[])[] | undefined; color?: ColorInput | undefined; pulses?: number | undefined; }): AnimRun a signal from the first layer to the last. Pass activations per layer, or let a seeded generator pick plausible ones. The strongest paths light up.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): NeuralNet
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): NeuralNet
• drop(child: Node): NeuralNet
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): NeuralNetA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): NeuralNetSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): NeuralNet
• moveTo(target: Node | Vec): NeuralNetMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): NeuralNetMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): NeuralNetScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): NeuralNetRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): NeuralNetScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): NeuralNetPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): NeuralNetLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): NeuralNetLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): NeuralNet
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): NeuralNet
• color(color: ColorInput): NeuralNetRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): NeuralNet
• glow(radius: number, color?: ColorInput | undefined): NeuralNetSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): NeuralNet
• zIndex(value: number): NeuralNet
• pin(): NeuralNetPin to the screen so the camera does not move this node.
• hide(): NeuralNet
• show(): NeuralNet
• named(label: string): NeuralNet
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

NeuralNetOptionsinterface

• width?: number | undefined
• height?: number | undefined
• radius?: number | undefined
• collapse?: number | undefinedShow at most this many neurons per layer, with an ellipsis for the rest.
• colors?: readonly ColorInput[] | undefined
• edgeColor?: ColorInput | undefined
• edgeOpacity?: number | undefined
• layerLabels?: readonly string[] | undefined
• labelSize?: number | undefined
• seed?: number | undefinedSeed for the default activations.
• font?: FontFamily | undefinedThe font of the layer labels. Defaults to the font of the film.

numberLinefunction

function numberLine(options?: NumberLineOptions): NumberLine

NumberLineclass

new NumberLine(options?

• range: readonly [number, number]
• length: number
• line: Node
• ticks: Node
• numbers: Node
• p(value: number): [number, number]Value to local stage coordinates.
• world(value: number): [number, number]
• marker(value: Reactive, options?: { color?: ColorInput | undefined; label?: string | undefined; radius?: number | undefined; labelSize?: number | undefined; }): NodeA point on the line. Pass a function to follow a Value over time.
• interval(from: number, to: number, options?: { color?: ColorInput | undefined; width?: number | undefined; offset?: number | undefined; openLeft?: boolean | undefined; openRight?: boolean | undefined; }): NodeA highlighted span, with open or closed endpoints.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): NumberLine
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): NumberLine
• drop(child: Node): NumberLine
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): NumberLineA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): NumberLineSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): NumberLine
• moveTo(target: Node | Vec): NumberLineMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): NumberLineMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): NumberLineScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): NumberLineRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): NumberLineScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): NumberLinePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): NumberLineLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): NumberLineLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): NumberLine
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): NumberLine
• color(color: ColorInput): NumberLineRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): NumberLine
• glow(radius: number, color?: ColorInput | undefined): NumberLineSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): NumberLine
• zIndex(value: number): NumberLine
• pin(): NumberLinePin to the screen so the camera does not move this node.
• hide(): NumberLine
• show(): NumberLine
• named(label: string): NumberLine
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

NumberLineOptionsinterface

• range?: readonly [number, number] | undefined
• length?: number | undefinedOn-screen length in stage pixels.
• step?: number | undefined
• labels?: boolean | undefined
• labelSize?: number | undefined
• color?: ColorInput | undefined
• tips?: boolean | undefined
• width?: number | undefined

NumberPlaneclass

The classic infinite grid. Each line is a dense path, so it bends smoothly under applyMatrix and under warp with a nonlinear function.

new NumberPlane(options?

• unit: number
• major: Node
• minor: Node
• axes: Node
• p(x: number, y: number): [number, number]Math coordinates to stage coordinates. y points up on the plane.
• vector(x: number, y: number, style?: ShapeStyle): NodeA vector drawn from the origin, as an arrow.
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): NumberPlane
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): NumberPlane
• drop(child: Node): NumberPlane
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): NumberPlaneA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): NumberPlaneSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): NumberPlane
• moveTo(target: Node | Vec): NumberPlaneMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): NumberPlaneMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): NumberPlaneScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): NumberPlaneRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): NumberPlaneScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): NumberPlanePlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): NumberPlaneLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): NumberPlaneLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): NumberPlane
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): NumberPlane
• color(color: ColorInput): NumberPlaneRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): NumberPlane
• glow(radius: number, color?: ColorInput | undefined): NumberPlaneSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): NumberPlane
• zIndex(value: number): NumberPlane
• pin(): NumberPlanePin to the screen so the camera does not move this node.
• hide(): NumberPlane
• show(): NumberPlane
• named(label: string): NumberPlane
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.

PAGE_STATESconst

States for pages of memory.

const PAGE_STATES: { absent: { color: string; fill: number; dash: true; }; zero: { color: string; fill: number; }; present: { color: string; fill: number; }; dirty: { color: string; fill: number; }; shared: { color: string; fill: number; }; copied: { color: string; fill: number; }; file: { color: string; fill: number; }; swapped: { color: string; fill: number; }; }

pictogramfunction

A small picture of a concept, such as pictogram('graph', { size: 120, color: 'dim', accent: 'teal' }).

function pictogram(name: "warning" | "ring" | "series" | "chart" | "forecast" | "threshold" | "anomaly" | "logs" | "traces" | "bars" | "table" | "matrix" | "event" | "alert" | "graph" | "dag" | "tree" | "layers" | "pipeline" | "branch" | "service" | "database" | "queue" | "cloud" | "chip" | "vm" | "process" | "kernel" | "memory" | "disk" | "nic" | "network" | "snapshot" | "clone" | "jail" | "wall" | "key" | "stopwatch" | "bolt" | "proxy" | "certificate" | "sleep" | "shard" | "core" | "timer" | "firmware" | "irqchip" | "bus" | "drive" | "floppy" | "serial" | "keyboard" | "server" | "laptop" | "thread" | "interrupt" | "syscall" | "page" | "pagetable" | "pin" | "worker" | "workflow" | "activity" | "signal" | "query" | "update" | "issue" | "pullRequest" | "repository" | "checklist" | "approval" | "model" | "tokens" | "vector" | "agent" | "spark" | "dashboard" | "terminal" | "container" | "experiment" | "target" | "loop" | "eye" | "message" | "shield" | "browser" | "desktop" | "recording" | "creditCard" | "warehouse" | "truck" | "microphone" | "forum" | "paywall" | "document" | "code" | "gear" | "clock" | "user" | "search" | "filter" | "lock" | "deploy" | "check" | "cross" | "question", options?: PictogramOptions): Pictogram

Pictogramclass

A small picture of a concept. .at(x, y) places the middle of its grid, so pictures of one size line up.

new Pictogram(name: "warning" | "ring" | "series" | "chart" | "forecast" | "threshold" | "anomaly" | "logs" | "traces" | "bars" | "table" | "matrix" | "event" | "alert" | "graph" | "dag" | "tree" | "layers" | "pipeline" | "branch" | "service" | "database" | "queue" | "cloud" | "chip" | "vm" | "process" | "kernel" | "memory" | "disk" | "nic" | "network" | "snapshot" | "clone" | "jail" | "wall" | "key" | "stopwatch" | "bolt" | "proxy" | "certificate" | "sleep" | "shard" | "core" | "timer" | "firmware" | "irqchip" | "bus" | "drive" | "floppy" | "serial" | "keyboard" | "server" | "laptop" | "thread" | "interrupt" | "syscall" | "page" | "pagetable" | "pin" | "worker" | "workflow" | "activity" | "signal" | "query" | "update" | "issue" | "pullRequest" | "repository" | "checklist" | "approval" | "model" | "tokens" | "vector" | "agent" | "spark" | "dashboard" | "terminal" | "container" | "experiment" | "target" | "loop" | "eye" | "message" | "shield" | "browser" | "desktop" | "recording" | "creditCard" | "warehouse" | "truck" | "microphone" | "forum" | "paywall" | "document" | "code" | "gear" | "clock" | "user" | "search" | "filter" | "lock" | "deploy" | "check" | "cross" | "question", options?

• size: numberThe side of the square that holds the picture, in pixels.
• name: "warning" | "ring" | "series" | "chart" | "forecast" | "threshold" | "anomaly" | "logs" | "traces" | "bars" | "table" | "matrix" | "event" | "alert" | "graph" | "dag" | "tree" | "layers" | "pipeline" | "branch" | "service" | "database" | "queue" | "cloud" | "chip" | "vm" | "process" | "kernel" | "memory" | "disk" | "nic" | "network" | "snapshot" | "clone" | "jail" | "wall" | "key" | "stopwatch" | "bolt" | "proxy" | "certificate" | "sleep" | "shard" | "core" | "timer" | "firmware" | "irqchip" | "bus" | "drive" | "floppy" | "serial" | "keyboard" | "server" | "laptop" | "thread" | "interrupt" | "syscall" | "page" | "pagetable" | "pin" | "worker" | "workflow" | "activity" | "signal" | "query" | "update" | "issue" | "pullRequest" | "repository" | "checklist" | "approval" | "model" | "tokens" | "vector" | "agent" | "spark" | "dashboard" | "terminal" | "container" | "experiment" | "target" | "loop" | "eye" | "message" | "shield" | "browser" | "desktop" | "recording" | "creditCard" | "warehouse" | "truck" | "microphone" | "forum" | "paywall" | "document" | "code" | "gear" | "clock" | "user" | "search" | "filter" | "lock" | "deploy" | "check" | "cross" | "question"
• id: number
• parent: Node | null
• children: Node[]
• data: Record<string, unknown>Free-form metadata, such as the source character of a glyph.
• label: stringLabel shown in timelines and diagnostics.
• base: NodeProps
• tracks: Map<keyof NodeProps, Track<unknown>> | null
• overlay: Map<string, unknown> | null
• overlayFrame: number
• mounted: booleanOn stage: writes become timeline keys instead of initial state.
• draw: ((time: number) => Node | readonly Node[] | null) | nullRebuilt on every frame from timeline values.
• rawOps: ((matrix: Mat, alpha: number, ops: DrawOp[]) => void) | nullEmits draw operations directly, for objects with thousands of marks such as 3D meshes.
• get<K extends PropName>(prop: K): NodeProps[K]
• set<K extends PropName>(prop: K, value: NodeProps[K]): Pictogram
• track<K extends PropName>(prop: K): Track<NodeProps[K]>
• tween<K extends PropName>(prop: K, to: NodeProps[K], t0: number, t1: number, ease: Ease | null): voidRecord a change from the current value to to over [t0, t1].
• add(...nodes: Node[]): Pictogram
• drop(child: Node): Pictogram
• all(): Node[]Self and all descendants, parents first.
• leaves(): Node[]Descendants that draw something. A leaf group returns itself if it draws.
• clone(): PictogramA static copy of the current state, off stage. An object that keeps its parts in fields, such as the glyphs of a text or the frame of a card, gets fields that point at the copies of those parts.
• localMatrix(): Mat
• worldMatrix(): Mat
• toWorld(x: number, y: number): [number, number]
• bounds(): BoundsStage-space bounds of this node and its descendants.
• center: [number, number]
• top: [number, number]
• bottom: [number, number]
• left: [number, number]
• right: [number, number]
• width: number
• height: number
• at(x: number | Vec, y?: number | undefined): PictogramSet the local position of the origin.
• shift(dx: number | Vec, dy?: number | undefined): Pictogram
• moveTo(target: Node | Vec): PictogramMove so the center of the bounds lands on a stage point or on another node's center.
• pivotAt(point: Vec): PictogramMove the origin to a stage point without changing how anything looks.
• scale(factor: number | Vec, about?: Vec | undefined): PictogramScale around the center, or around a given stage point.
• rotate(radians: number, about?: Vec | undefined): PictogramRotate around the center, or around a given stage point.
• fitTo(size: { width?: number | undefined; height?: number | undefined; }): PictogramScale to an exact on-screen width or height, keeping proportions.
• nextTo(target: Node | Vec, side?: Side, gap?: number): PictogramPlace beside another node or stage point, with a gap measured between bounds.
• alignTo(target: Node | Vec, edge: Edge): PictogramLine up one edge with another node's same edge.
• arrange(side?: Side, gap?: number): PictogramLay out children in a row or column, keeping the group's center.
• fill(color: ColorInput | null, opacity?: number | undefined): Pictogram
• stroke(color: ColorInput | null, width?: number | undefined, opacity?: number | undefined): Pictogram
• color(color: ColorInput): PictogramRecolor this node and its descendants, keeping whichever paints exist.
• opacity(value: number): Pictogram
• glow(radius: number, color?: ColorInput | undefined): PictogramSoft light around the shape. The radius is in stage pixels.
• dash(pattern: readonly number[] | null, offset?: number): Pictogram
• zIndex(value: number): Pictogram
• pin(): PictogramPin to the screen so the camera does not move this node.
• hide(): Pictogram
• show(): Pictogram
• named(label: string): Pictogram
• labelsOf(_part: Node): readonly Node[]The labels that belong to one part of this object, such as the name and the readout of a bar. A light on the part keeps them bright. An object that has such labels says so here.