raea

raea is the path nearly every composition starts from. A file registers its compositions with registerRoot; each <Composition> has a size, a frame rate, a length and a component. Inside it, useCurrentFrame() is the frame being drawn, <Sequence> shifts time for what it holds, and interpolate and spring turn frames into values. The entry also re-exports the footage, sound, word and state helpers, which have pages of their own.

import { AbsoluteFill, Composition, Sequence, interpolate, registerRoot, useCurrentFrame } from "raea";

function Title({ text }: { text: string }) {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 12], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
  return <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 120, color: "#fff", opacity }}>{text}</AbsoluteFill>;
}

registerRoot(() => (
  <Composition id="main" width={1080} height={1920} fps={30} durationInFrames={90} component={() => (
    <AbsoluteFill style={{ background: "#000" }}>
      <Sequence from={0} durationInFrames={45}><Title text="Hello" /></Sequence>
      <Sequence from={45} durationInFrames={45}><Title text="world" /></Sequence>
    </AbsoluteFill>
  )} />
));

See Your first video for the whole loop, and Compositions for how frames, sequences and time work.

import { AbsoluteFill, ACTION_KEY, actionsIn, Animate } from "raea"

raea exports 18 components, 8 hooks, 52 functions, 8 values, 91 types. Source: sdk/raea/src/index.tsx.

#Components

#AbsoluteFill

A box over the whole of its parent, laid out as a flex column; style is merged over that.

Used in: ui/images/image_node, ui/images/ui_texture_slice_flip_and_tile, ui/images/image_node_resizing, ui/images/ui_texture_atlas_slice, ui/images/ui_texture_slice, ui/images/ui_texture_atlas, ui/layout/grid, ui/layout/ghost_nodes, and 95 more.

#Animate

, memoised by its props' content (React skips a render whose props fingerprint matches the last). The fingerprint is on it as Animate.fingerprint for a runtime's own bailout. Its declaration is the engine's Animation (@bevy raea_core_animate::spec::Animation), typed from the registry (animate.gen.ts), sent as data-raea-anim and read back as that type by sdk/react animate.rs.

Also takes the props of AnimateOwnProps.

#Audio

Sound in step with the frame; no picture. A muted or ended Audio is silent.

Also takes the props of MediaProps.

#Clock

What time a composition is at: the frame, frame rate, size and length its hooks read, and its words, perception and input. The renderer, the live view and tests put one around every composition; a composition never needs its own.

#Composition

Declares a composition inside the root. It draws nothing itself; a renderer finds it through registerRoot.

Used in: ui/images/image_node, ui/images/ui_texture_slice_flip_and_tile, ui/images/image_node_resizing, ui/images/ui_texture_atlas_slice, ui/images/ui_texture_slice, ui/images/ui_texture_atlas, ui/layout/grid, ui/layout/ghost_nodes, and 148 more.

#Freeze

Shows its children as they are at frame, whatever the parent's frame.

#Img

An image; the renderer holds the frame until it has loaded and fails the render (naming src) if it can't.

Also takes the props of ImgHTMLAttributes (alt, crossOrigin, decoding, fetchPriority, height, loading, referrerPolicy, sizes, src, srcSet, useMap, width); HTMLAttributes (defaultChecked, defaultValue, suppressContentEditableWarning, suppressHydrationWarning, accessKey, autoCapitalize, autoFocus, className, contentEditable, contextMenu, dir, draggable, enterKeyHint, hidden, id, lang, nonce, slot, spellCheck, style, tabIndex, title, translate, radioGroup, role, about, content, datatype, inlist, prefix, property, rel, resource, rev, typeof, vocab, autoCorrect, autoSave, color, itemProp, itemScope, itemType, itemID, itemRef, results, security, unselectable, popover, popoverTargetAction, popoverTarget, inert, inputMode, is, exportparts, part); AriaAttributes (aria-activedescendant, aria-atomic, aria-autocomplete, aria-braillelabel, aria-brailleroledescription, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colindextext, aria-colspan, aria-controls, aria-current, aria-describedby, aria-description, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowindextext, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext); DOMAttributes (children, dangerouslySetInnerHTML, onCopy, onCopyCapture, onCut, onCutCapture, onPaste, onPasteCapture, onCompositionEnd, onCompositionEndCapture, onCompositionStart, onCompositionStartCapture, onCompositionUpdate, onCompositionUpdateCapture, onFocus, onFocusCapture, onBlur, onBlurCapture, onChange, onChangeCapture, onBeforeInput, onBeforeInputCapture, onInput, onInputCapture, onReset, onResetCapture, onSubmit, onSubmitCapture, onInvalid, onInvalidCapture, onLoad, onLoadCapture, onError, onErrorCapture, onKeyDown, onKeyDownCapture, onKeyPress, onKeyPressCapture, onKeyUp, onKeyUpCapture, onAbort, onAbortCapture, onCanPlay, onCanPlayCapture, onCanPlayThrough, onCanPlayThroughCapture, onDurationChange, onDurationChangeCapture, onEmptied, onEmptiedCapture, onEncrypted, onEncryptedCapture, onEnded, onEndedCapture, onLoadedData, onLoadedDataCapture, onLoadedMetadata, onLoadedMetadataCapture, onLoadStart, onLoadStartCapture, onPause, onPauseCapture, onPlay, onPlayCapture, onPlaying, onPlayingCapture, onProgress, onProgressCapture, onRateChange, onRateChangeCapture, onSeeked, onSeekedCapture, onSeeking, onSeekingCapture, onStalled, onStalledCapture, onSuspend, onSuspendCapture, onTimeUpdate, onTimeUpdateCapture, onVolumeChange, onVolumeChangeCapture, onWaiting, onWaitingCapture, onAuxClick, onAuxClickCapture, onClick, onClickCapture, onContextMenu, onContextMenuCapture, onDoubleClick, onDoubleClickCapture, onDrag, onDragCapture, onDragEnd, onDragEndCapture, onDragEnter, onDragEnterCapture, onDragExit, onDragExitCapture, onDragLeave, onDragLeaveCapture, onDragOver, onDragOverCapture, onDragStart, onDragStartCapture, onDrop, onDropCapture, onMouseDown, onMouseDownCapture, onMouseEnter, onMouseLeave, onMouseMove, onMouseMoveCapture, onMouseOut, onMouseOutCapture, onMouseOver, onMouseOverCapture, onMouseUp, onMouseUpCapture, onSelect, onSelectCapture, onTouchCancel, onTouchCancelCapture, onTouchEnd, onTouchEndCapture, onTouchMove, onTouchMoveCapture, onTouchStart, onTouchStartCapture, onPointerDown, onPointerDownCapture, onPointerMove, onPointerMoveCapture, onPointerUp, onPointerUpCapture, onPointerCancel, onPointerCancelCapture, onPointerEnter, onPointerLeave, onPointerOver, onPointerOverCapture, onPointerOut, onPointerOutCapture, onGotPointerCapture, onGotPointerCaptureCapture, onLostPointerCapture, onLostPointerCaptureCapture, onScroll, onScrollCapture, onScrollEnd, onScrollEndCapture, onWheel, onWheelCapture, onAnimationStart, onAnimationStartCapture, onAnimationEnd, onAnimationEndCapture, onAnimationIteration, onAnimationIterationCapture, onToggle, onBeforeToggle, onTransitionCancel, onTransitionCancelCapture, onTransitionEnd, onTransitionEndCapture, onTransitionRun, onTransitionRunCapture, onTransitionStart, onTransitionStartCapture).

#InputRegion

Its children hear the pointer in their own box (x, y, w, h in points; the page's pixels are scale points each), as a panel does when it's a page of its own: a press inside the box is the box's until it's let go. Outside the box, and while another box holds a press, they see no pointer; keys reach every box.

#Loop

Repeats its children every durationInFrames frames, times times (forever by default).

#Mix

The master: every sound in the composition brought to lufs integrated loudness (-14) under a true-peak limiter at ceiling dBTP (-1.5), as the platforms play back. Put one in the composition, around the soundtrack or anywhere.

#Nudge

Moves its child by (x, y): an element gets the move in front of its own transform; a component, whose box it can't reach, moves inside a full-frame layer.

#Overlay

Its children only in a render asked for the overlay name.

#Region

A box at the band its name stands for, clear of the face perception found at this frame.

#Sequence

Shifts time by from and shows its children only for durationInFrames frames.

#Series

Plays its Series.Sequence children back to back, each shifted by its own offset.

#SongPlot

The map drawn for a human to check: section bands named, the energy curve with builds, stops, dips and drops on it, hits, the feature lanes, and the pacing (cuts per bar). raea song FILE --plot OUT.png renders it.

#Stagger

Each child in its own , entrances each frames apart (or by grid distance). The same content as last render gives the same element back.

Also takes the props of StaggerProps (each, grid, exitEach); AnimateOwnProps.

#Video

A video clip in step with the frame; data-source-time is the source time (seconds) to show.

Also takes the props of MediaProps.

#Hooks

#useCurrentFrame

The frame being rendered, counted from the start of the nearest enclosing Sequence.

function useCurrentFrame(): number

Used in: ui/scroll_and_overflow/overflow_transform, ui/render_ui_to_texture, ui/ui_material, ui/styling/gradients, ui/text/text_debug, ui/text/text, ui/text/font_atlas_debug, 3d/fog_volumes, and 43 more.

#useGameEvents

The frames, in order, at which isEvent(before, after) holds: after is the state step makes at frame f from before, the state at f - 1. It runs the same (kept) fold as useGameState through the composition's last frame, counted from the nearest enclosing Sequence, so sound can be cued to what happens in the game. While a person plays (live input) it runs only through this frame: what comes next hasn't been played yet. The list is read-only (frozen): the same one is handed out while nothing new happened, so copy it before changing it.

function useGameEvents<S>(initial: S, step: Step<S>, isEvent: (before: S, after: S) => boolean): number[]

#useGameState

The game's state at this frame: initial at frame 0, then step(state, input, g) applied for each earlier frame g in order. Frames count from the nearest enclosing Sequence, so a game starts when its Sequence does.

function useGameState<S>(initial: S, step: Step<S>): S

Used in: shader/shader_prepass, shader/sprite_material.

#useInput

This frame's input ({keys: []} when there was none). Its gamepads are Bevy's (bevy_gilrs's Gamepad entities, read by engine/render's gamepad_keys):

Bevy: bevy_input::gamepad::Gamepad.

function useInput(): FrameInput

Used in: shader/shader_prepass, shader/sprite_material.

#useRegion

The Region this is rendered inside: its name and box in composition px.

function useRegion(): RegionBox

#useSong

Where the song is at the current frame (frame 0 of the enclosing Sequence is offset seconds into the song), with the map bound to the composition's fps as song.

function useSong(map: SongMap, options?: UseSongOptions): SongMoment & { song: Song; }

#useVideoConfig

The settings of the composition being rendered (a Sequence's width and height win inside it).

function useVideoConfig(): VideoConfig

#useWords

Every word heard on the timeline, in the frames of the nearest enclosing Sequence.

function useWords(): TimelineWord[]

#Functions

#actionsIn

The actions handed in this frame, in order.

function actionsIn(input: FrameInput): { name: string; args: any; }[]

#applyActions

state with this frame's handed-in actions run on it, in order (an unknown name is skipped).

function applyActions<S>(actions: PanelActions<S>, state: S, input: FrameInput): S

#curveFn

A curve name as a function (the engine's easing::Easing::parse, the same names).

function curveFn(name: string, fps?: number): (t: number) => number

#delay

The same move later by frames.

function delay(m: MoveLike, frames: number): Move

#fade

opacity 0 to 1 over frames (6).

function fade(o?: { frames?: number; ease?: Curve; }): Move

#feedIn

What the app tells the panels, by name ("transcript", "object"); undefined until it has.

function feedIn<T = any>(input: FrameInput, what: string): T | undefined

#fill

a bar filling: width 0 to to (100%) over frames (24), out-cubic.

function fill(o?: { to?: number; frames?: number; unit?: "px" | "%"; ease?: Curve; }): Move

#findPhrase

Finds the composition frame where phrase is said in a transcript.

function findPhrase(words: readonly HeardWord[], phrase: string, options?: WordOptions): number

#fish

Retired on 2026-11-05: Fish narration is no longer part of raea. Narrate with <Speech text start> from raea/speech (Pocket TTS, on this computer), or make a line with a raea gen step on fish:<model> and your own FISH_API_KEY. Kept as a name only, so an older edit says what to use instead of failing to bundle.

function fish(text: string, _options?: Record<string, unknown>): never

#getCompositions

The compositions the registered root declares, in order.

function getCompositions(): RegisteredComposition[]

#gridDelay

A grid item's distance from an origin, in steps (raea-animate's StaggerPattern::Grid, the same rule).

function gridDelay(cols: number, rows: number, from: GridFrom, index: number): number

#inState

Whether name is active in the snapshot (the leaf or any state around it), as XState's state.matches.

function inState<N extends string>(snap: Snapshot<N>, name: N): boolean

#interpolate

x mapped from the input range onto the output range, piece by piece: input rises, and the two have the same length. options.easing shapes each piece; extrapolateLeft and extrapolateRight say what happens outside the range (extend, the default, carries on; clamp holds the end value; identity returns x; wrap repeats).

function interpolate(x: number, input: readonly number[], output: readonly number[], options?: InterpolateOptions): number

#isGeneratedAsset

Whether a value is a generated asset (what sao, tokensynthNote and lyria return), not a file path.

function isGeneratedAsset(v: unknown): v is GeneratedAsset

#keyEdges

The input edges between two frames' keys, as events for a machine's on: "keydown:K" for each key pressed this frame, "keyup:K" for each released (keep last frame's keys in the game state to have prev).

function keyEdges(prev: readonly string[] | undefined, now: readonly string[] | undefined): string[]

#lyria

Music an older edit generated (30 seconds by default). Retired: a take already made plays, a new one is refused.

function lyria(prompt: string, options?: { seconds?: number; }): GeneratedAsset

#machine

A machine for contexts of type C, stepped with an env of type E (a game's frame input and world, a workflow's facts). Curried so the state names are inferred from the definition while C and E are given: machine<Player, Env>()({ id, initial, states }). A transition to a state that doesn't exist, or a guard reading a field C lacks, fails to compile; what types can't hold (an initial that isn't a substate, unreachable states, dead ends) throws here, when the module loads.

function machine<C, E = unknown>(): <const N extends string, const K extends string = "sm">(config: MachineConfig<C, E, N, K>) => Machine<C, E, N, K>

#measureSpring

How many frames a spring with these settings takes to settle (before any stretching).

function measureSpring(opts: { fps: number; config?: SpringConfig; durationRestThreshold?: number; }): number

#move

A move from its tracks, by property: move({ opacity: track({ 0: 0, 6: 1 }), y: track({ 0: 30, 6: 0 }) }). Its length is its last key. The named moves (rise, pop and the rest) are built with it.

function move(tracks: Record<string, TrackSpec<string | number> | TrackSpec<string | number>[] | Keys<string | number>>): Move

#overlays

The overlays this render was asked for ([] in a clean render and in live play).

function overlays(): string[]

#parallel

Every step at once.

function parallel(...steps: Step[]): Group

#pop

scale from (0.6), peak (1.08) at frames/2, 1 at frames (8); in over 3 frames.

function pop(o?: { from?: number; peak?: number; frames?: number; ease?: Curve; }): Move

#proofBoxes

Checks measured part boxes; returns one fault per problem, empty when all is well.

function proofBoxes({ width, height, face, parts }: ProofInput): string[]

#propsFingerprint

A props object's fingerprint: what and compare to know a render would give the same element, and what a runtime's bailout can key on (Animate.fingerprint).

function propsFingerprint(props: object): number

#pushIn

a slow push-in on footage: scale 1 to 1 + amount (0.04) across frames (90), linear.

function pushIn(o?: { amount?: number; frames?: number; }): Move

#regionBand

Works out the vertical band each name stands for, given perception and the composition size.

function regionBand(name: RegionName, width: number, height: number, perception: Perception, margin?: number): Band

#registerRoot

Names the root component the renderer starts from, and records its compositions. Call it once.

function registerRoot(given: ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentType): void

Used in: ui/images/image_node, ui/images/ui_texture_slice_flip_and_tile, ui/images/image_node_resizing, ui/images/ui_texture_atlas_slice, ui/images/ui_texture_slice, ui/images/ui_texture_atlas, ui/layout/grid, ui/layout/ghost_nodes, and 148 more.

#replayDecider

A decider that replays recorded decisions: log[machine][n] is the edge chosen at that machine's step n (missing: wait). How a model's or a person's choices, taken outside the step, re-enter it exactly.

function replayDecider(log: Record<string, Record<number, number | { edge: number; evidence?: unknown; }>>, name?: string): Decider

#reverse

A move played backwards: it leaves the way it came (each curve reversed, so an out-curve becomes the matching in-curve). An exit is its entrance reversed.

function reverse(m: MoveLike): Move

#rise

y offset distance to 0 over frames (30 px over 6), fading in over fade (5).

function rise(o?: { distance?: number; frames?: number; fade?: number; ease?: Curve; }): Move

#sampleAnimation

What an Animation sets at composition frame frame: page style keys, a counter's text, or 3D props (raea-animate's Sampled, here for plain bun).

function sampleAnimation(a: Animation, frame: number): { style: Record<string, string | number>; text?: string; values: Record<string, string | number>; }

#sao

A sound effect to generate (2 seconds by default).

function sao(prompt: string, options?: { seconds?: number; }): GeneratedAsset

#sequence

Each step when the one before it ends (gap frames apart: sequenceGap).

function sequence(...steps: Step[]): Group

#sequenceGap

Each step when the one before it ends, gap frames later (a negative gap overlaps them).

function sequenceGap(gap: number, ...steps: Step[]): Group

#slam

a hit: scale from (1.3), dip (0.96) at frames/2, 1 at frames (8); in over 2 frames.

function slam(o?: { from?: number; dip?: number; frames?: number; ease?: Curve; }): Move

#slide

arrives from a side: distance px (30) over frames (7), fading in over 5. from is where it comes from.

function slide(o?: { from?: Dir; distance?: number; frames?: number; ease?: Curve; }): Move

#song

A song map bound to a frame rate (and where frame 0 sits in the song): frames from song times, and the reverse.

function song(map: SongMap, options: SongOptions): Song

#songAt

Where the song is at t seconds: a pure function of the map.

function songAt(map: SongMap, t: number): SongMoment

#spring

A damped spring's value at frame: from from (0) to to (1), started delay frames late, by its config (mass 1, damping 10, stiffness 100). It overshoots and settles unless overshootClamping is set; durationInFrames stretches it to end at that frame. measureSpring says how long one takes to settle.

function spring(opts: SpringOptions): number

#stagger

The parts each frames apart, each with m. With grid, delays spread by grid distance from an origin.

function stagger(parts: string[], each: number, m: MoveLike, grid?: { cols: number; rows?: number; from?: GridFrom; } | undefined): Group

#stateOf

The active leaf of a snapshot (undefined before the first step).

function stateOf<N extends string>(snap: Snapshot<N>): N | undefined

#staticFile

The URL of a file in the space's media folder, each path segment URL-encoded.

function staticFile(path: string): string

Used in: ui/images/image_node, ui/images/ui_texture_slice_flip_and_tile, ui/images/image_node_resizing, ui/images/ui_texture_atlas_slice, ui/images/ui_texture_slice, ui/images/ui_texture_atlas, ui/layout/grid, ui/layout/ghost_nodes, and 100 more.

#stepAll

One frame for each entity of a list, each carrying its own machine (one per enemy), in order.

function stepAll<C, E, N extends string, K extends string>(m: Machine<C, E, N, K>, entities: readonly C[], env: E, opts?: readonly string[] | StepOptions): C[]

#strike

a strike-through line drawn: width 0 to 100% over frames (8).

function strike(o?: { frames?: number; ease?: Curve; }): Move

#tick

a number counting from from (0) to to over frames (24), written as the element's text: digits decimals, separator between its thousands ("," or true writes 12,345; none by default), prefix and suffix around it ("quot;, " pts"). Hidden until it starts, then in over fade frames (2; 0 shows it at from the whole time).

function tick(o: { to: number; from?: number; frames?: number; digits?: number; ease?: Curve; prefix?: string; suffix?: string; separator?: string | boolean; fade?: number; }): Move

#tickClocks

Tells every mounted Clock's frame readers that the frame is about to move on, in the same batch as the update that moves it, so they render in that one commit. A host that steps frames back to back calls it with its frame update: else each Clock tells them as its frame commits, a second commit each frame, and React stops a chain of more than 50 (raea's bake steps a range of frames as one chain: many_cubes stalled at frame 26).

function tickClocks(): void

#timeline

Steps placed in time (a sequence of them). Each part's start is decided here, once.

function timeline(...steps: Step[]): Plan

#toMove

A name, a move or several moves together, as one move.

function toMove(m: MoveLike): Move

#track

A track: track({ 0: 30, 6: 0 }) is a 30 px rise over 6 frames, out-cubic by default.

function track<V = string | number>(keys: Keys<V>, ease?: Curve | Curve[], opts?: Omit<TrackSpec<string | number>, "ease" | "keys">): TrackSpec<V>

#transitionOf

The transition a step took, read from two snapshots of one machine (null when none fired): how a trace that only sees states (a playtest over a game's pure fold) recovers the TransitionRecord a sink would have had, minus evidence.

function transitionOf(m: AnyMachine, before: Snapshot<string> | undefined, after: Snapshot<string>): TransitionRecord | null

#wipe

a reveal wiping across from from (left) over frames (8), in-out-cubic, by clipping.

function wipe(o?: { from?: Dir; frames?: number; ease?: Curve; }): Move

#word

The composition frame where phrase is said. Call it while rendering (it reads the Clock).

function word(phrase: string, options?: WordOptions): number

#Values

#ACTION_KEY

The prefix the app puts on an action handed in as input: a key action:NAME ARGS_JSON, held for one frame.

#curve

Curve helpers: curve.bezier(0.05, 0.7, 0.1, 1), curve.spring({ damping: 15, stiffness: 120 }).

#Easing

The easing curves, each a function of progress 0..1: linear, quad, cubic, poly(n), sin, circle, exp, back, elastic, bounce and bezier(x1, y1, x2, y2), eased in as they are; Easing.out(f) and Easing.inOut(f) turn one round. Pass one as interpolate's easing.

#FEED_KEY

The prefix of the keys the app hands every panel for what it knows: feed:transcript (the conversation's last lines, [{ who: "you" | "agent" | "tool" | "note", text, live }]), feed:object (the object on the stage: { name, kind }) and feed:stage (what the object publishes with data-feed-publish, as a panel's publishes reach the object) and feed:player (the stage's player: { frame, frames, rate, playing }; frames is 0 for a game, which runs on). Handed in only on the frame it changes (and when the panel opens), so keep it in state: useGameState([], (s, input) => feedIn(input, "transcript") ?? s). A panel standing in for the terminal sends by publishing { send: { n, text } } (a higher n is a new message); a panel drives the player by publishing { control: { n, do: "play" | "pause" | "seek", frame } } the same way.

#firstDecider

The default decider: the first candidate.

#MEDIA_ROOT

Where the space's media folder is served from.

#moves

The named moves by name, as enter="rise" finds them.

#SPACE_KEY

The prefix of the key the app holds on the stage for each panel that publishes (data-feed-publish on an element): space:PANEL JSON, held while the value stands, so the object on the stage reads what the panels picked.

#Types

#AbsoluteFillProps

The props of AbsoluteFill, tabled there.

#Action

An action: a pure function returning the new context (never a changed old one).

type Action = (ctx: C, env: E) => C

#Actions

type Actions = Action<C, E> | readonly Action<C, E>[]

#Analysis

#AnimateOwnProps

#AnimateProps

type AnimateProps = AnimateOwnProps & { [attr: string]: unknown }

#Animation

One element's declared animation.

Rust: raea_core_animate::spec::Animation.

#AnimKey

One key: a value at a local frame, and the curve from it to the next key.

Rust: raea_core_animate::spec::AnimKey.

#AnimTrack

Keyframes on one property.

Rust: raea_core_animate::spec::AnimTrack.

#AnyMachine

type AnyMachine = Machine<any, any, string, string>

#AssetKind

type AssetKind = "lyria" | "sao" | "tokensynth"

#AudioProps

The props of Audio, tabled there.

#ChoicePoint

A choice point as a decider sees it: which machine, where, and the candidates whose guards hold.

#ClockProps

The props of Clock, tabled there.

#CompositionProps

The props of Composition, tabled there.

#Curve

type Curve = CurveName | (string & {})

#CurveName

Curve names. Any of these, or bezier(x1,y1,x2,y2), steps(n), spring(mass,damping,stiffness), reverse(<curve>).

type CurveName = | "linear" | "ease" | `${"in" | "out" | "in-out"}-${"quad" | "cubic" | "quart" | "quint" | "sine" | "expo" | "circ" | "back" | "elastic" | "bounce"}`

#CutOptions

#Decider

Picks a transition at a choice point. Called inside the step, so it must answer synchronously: a model or a person is asked outside the step and their answer replayed (replayDecider). Deterministic deciders keep a fold pure.

#Decision

What a decider answers: the edge it picks (one of the candidates' edge), or null to wait this step; evidence is whatever supports the choice (a bot's score, a model's probabilities), recorded beside the transition.

#EasingFn

type EasingFn = (p: number) => number

#Edge

#Edit

A hand edit: segments are the composition's own frame ranges, [from, to), played one after another, so a trim, a split, a cut word or a moved span is a change to this list; the length becomes their sum.

#ExtrapolateMode

type ExtrapolateMode = "extend" | "clamp" | "identity" | "wrap"

#FrameInput

One frame's input for a game.

#FrameRange

#FreezeProps

The props of Freeze, tabled there.

#GeneratedAsset

#GridFrom

type GridFrom = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "top" | "bottom" | "left" | "right"

#Group

#Guard

A trigger: polled each step while its state is active (the context, and whatever the step passes as env).

type Guard = (ctx: C, env: E) => boolean

#ImgProps

The props of Img, tabled there.

#InputTimeline

Recorded input by composition frame; frames without an entry had no input.

type InputTimeline = Record<number, Partial<FrameInput> | undefined>

#InterpolateOptions

#Keys

Keyframes by local frame: numbers, or colour text for colour properties (a material's animate takes other values for its own fields, LinearRgba for an emissive).

type Keys = Record<number, V>

#LoopProps

The props of Loop, tabled there.

#Machine

#MachineConfig

#MediaProps

#MixProps

The props of Mix, tabled there.

#Move

Tracks by property, in frames from the move's own start.

#MoveLike

type MoveLike = MoveName | Move | MoveLike[]

#MoveName

type MoveName = "rise" | "pop" | "slam" | "slide" | "wipe" | "fill" | "strike" | "pushIn" | "fade"

#NudgeProps

The props of Nudge, tabled there.

#PanelAction

One action: what it does (for the agent), its arguments by name with a few words each, and what it does to the panel's state.

#PanelActions

type PanelActions = Record<string, PanelAction<S>>

#Perception

What perception saw at this frame: the largest face, and the platform's safe area (composition px).

#Plan

A timeline's plan: each part's start frame and move, and the whole length.

#Playtest

What a playtester needs from a game, exported beside the view as export const playtest: Playtest<S> = {...} (sdk/react/docs/playtest.md). Optional: a game without one is played from pixels and events alone. Everything here is pure, so a bot steps the game headlessly, restores any state it has seen (states are values) and searches from it; whatever it plays is an input timeline raea render --input turns back into the same frames.

#ProofInput

#ProofPart

#RaeaCSSProperties

#Rect

A box in composition px.

#RegionBox

The band a Region occupies, in composition px.

#RegionName

type RegionName = "auto" | "top" | "bottom" | "center" | "full"

#RegionProps

The props of Region, tabled there.

#RegisteredComposition

#SequenceLayout

type SequenceLayout = "absolute-fill" | "none"

#SequenceProps

The props of Sequence, tabled there.

#SeriesSequenceProps

#Snapshot

The machine's runtime state, kept in the context it drives. path is the active states outermost first ([] before the first step); at[i] is the step on which path[i] was entered; n counts the machine's steps from 0; e is the edge the last transition took (an index into machine.edges); by names the decider that chose it (absent: a guard); hist is each history state's last substate.

#Song

#SongBar

#SongEvent

#SongEventKind

type SongEventKind = "build" | "drop" | "stop" | "hit" | "dip" | "break"

#SongFeatures

#SongHit

A hit inside a stop: time on the beat grid (a beat or half beat), at where the onset is.

#SongLevel

type SongLevel = "intro" | "low" | "mid" | "high" | "outro"

#SongMap

#SongMoment

Where a moment of the song is. Seconds are the song's; infinities when there's no such event.

#SongOptions

#SongPlotProps

The props of SongPlot, tabled there.

#SongSection

#SpringConfig

#SpringOptions

#StaggerProps

#StateConfig

#StateName

The state names of a machine.

type StateName = M extends Machine<any, any, infer N, any> ? N : never

#Step

A timeline step: [part, move], a group from sequence/parallel/stagger, or a pause in frames.

type Step = [part: string, move: MoveLike] | { part: string; move: MoveLike; offset?: number } | Group | number

#StepOptions

What a step may be given besides the context and env.

#TimelineWord

#TrackSpec

One property's keyframes: values by frame, the curve between each pair (one for all, or one per segment).

#TransitionConfig

A transition: where to go (to, or XState's target), when (when, or XState's guard; none: always), after how many steps in the state at least (after), and what to do on the way (actions).

type TransitionConfig = Target<N> & When<C, E> & { /** steps in the state before this transition may fire (0) */ after?: number; actions?: Actions<C, E>; /** what the transition means: a decider reads it (a model's option description), reports show it */ description?: string; }

#TransitionRecord

One transition as a row: what a trace keeps and rdb loads (step, machine, from, to, edge, decider, evidence). from is null for the first step's entry into the initial states.

#Transitions

A target's name alone, one transition, or several checked in order.

type Transitions = | NoInfer<N> | TransitionConfig<C, E, N> | readonly (NoInfer<N> | TransitionConfig<C, E, N>)[]

#UseSongOptions

#VideoConfig

#VideoProps

The props of Video, tabled there.

#VolumeProp

type VolumeProp = number | ((mediaFrame: number) => number)

#Watched

A machine's state in some context, for a trace (Playtest.machines).

#WordOptions