# Tracks (https://hypit.ai/quickstart/tracks/) > Peer track components — captions, media, typography and authored audio. Every audiovisual contribution entering the final composition is a peer **Track**. Tracks are flat (no nesting), and visual z-order is determined by the `stack-order` property in SVS. This page covers Caption, Media, Typography and Audio Track authoring. ## Caption system [#caption-system] Caption uses a Script-owned document and a replaceable Style family: ```text Script CaptionDocument → Caption Program → SemanticTrack timing → Style-family Track ``` ```svml ``` `@hypit/caption` owns the common CaptionDocument contract, complete-unit Selection/Role projection, Style assignment and the timing join. `@hypit/caption-fine` is one Style family: it owns geometry, glyph/Cue/Pill Paint and layered local motion. ### caption-fine\:Style [#caption-finestyle] A Style is a rendering intent resolved from one package-owned SVS Recipe: ```svs caption.primary { stack-order: 70; x: 0.5; y: 0.88; width: 0.84; height: 0.22; anchor-x: center; anchor-y: bottom; size: 58; line-height: 0.96; letter-spacing: -0.5; word-gap: 14; align: center; block-align: end; inline-size: fixed; wrap: word; max-lines: 2; max-words-per-line: 4; direction: ltr; fill: #FFFFFF; opacity: 1; stroke-color: #09090B; stroke-width: 2; shadow-color: #000000; shadow-opacity: 0.72; shadow-x: 0; shadow-y: 3; shadow-blur: 8; glow-color: #FFFFFF; glow-opacity: 0.12; glow-blur: 8; gradient-from: #FFFFFF; gradient-to: #93C5FD; gradient-angle: 120; long-shadow-color: #111827; long-shadow-opacity: 0.35; long-shadow-distance: 8; long-shadow-angle: 45; background: #09090BCC; border-color: #FFFFFF20; border-width: 1; padding: 16 24; radius: 18; karaoke: trail; karaoke-transition: wipe; active-fill: #FFD54A; active-box: current; active-box-continuity: isolated; active-box-background: #FFD54ACC; active-box-padding: 4 8; active-box-radius: 8; active-underline: current; active-underline-color: #FFFFFF; active-underline-thickness: 3; active-underline-offset: 5; cue-enter: spring; cue-enter-frames: 4; cue-enter-start-scale: 0.75; cue-exit: none; cue-exit-frames: 0; atom-reveal: all; active-response: pop; active-response-frames: 5; active-scale: 1.08; lead-frames: 4; tail-frames: 4; handoff: cut; } ``` ```svml

``` The required `font=` edge carries one byte-reproducible `FontStackRef`. Family, weight and style exist only on that edge; each fallback retains its own exact face metadata. Fine rejects a Style without that stack instead of falling back to machine fonts. Another Caption package may define a different rendering family without changing the common CaptionDocument contract. Fine's properties are orthogonal: normalized placement and anchor; layout and typography; base/active solid or gradient glyph Paint; stroke, shadow, directional long shadow, glow and underline; Cue/Pill Paint; three independent glyph/Pill/underline activation channels; and layered Cue, Alignment-Unit, active-response and loop motion. Missing optional dimensions resolve deterministically to no decoration or motion. Unknown properties are rejected. The package groups those properties as **Where**, **How** and **When** in its Surface declaration, so Studio can present the same author contract without maintaining a Caption-specific property list. `lead-frames` and `tail-frames` form an explicit visible Schedule around the spoken Cue; `handoff: cut` prevents adjacent visible envelopes from competing, while `overlap` preserves both. Neither form changes the Word frames used by Karaoke. `karaoke` is `off`, `current` or `trail`; `karaoke-transition` is `step` or `wipe`. Timing is always whole-Alignment-Unit timing already proven by Caption. A normal one-word unit therefore highlights per word, while a Dual Text unit remains one indivisible visible unit. Fine never guesses internal time. `active-box` is independently `off`, `current` or `trail`. `active-box-continuity: isolated` paints one capsule per activated Alignment Unit; `joined` turns a trail into one ordered prefix whose background is continuous on each real browser line. Thus trail-colored text with a current-only Pill is one Recipe—not a second renderer. With `wrap: word`, Fine wraps between complete Alignment Units and falls back inside a single over-wide display unit so it cannot escape the Region. `max-words-per-line` constructs explicit rows; when `max-lines` is present, a Cue that would construct more rows is rejected instead of having its text or Paint clipped. Cue boundaries come from Script segments, turns, Style changes and authored `||`. Fine is the uniform-flow family: every token follows the same Recipe and may differ only by time, index or play state. A Cue with authored internal roles—different font/layout groups, full-frame inversion, tearing or cross-clause composition—requires another Caption package rather than a hidden Fine exception. CJK dialogue can be written directly. For a display-only emoji that still follows speech timing, author the correspondence explicitly, such as `<🌐 | globe>`; the system will not invent a spoken word for a bare symbol. ### caption\:Program [#captionprogram] The Program starts from the complete ordered CaptionDocument emitted by Script. One explicit default Style covers every Alignment Unit. Ordered `Use` rules replace the Style on a Role or a semantic Selection, with the last match winning. ```svml ``` `role=` is a convenient query for a word subset, not a temporal condition. `selection=` projects the public semantic Selection to complete Caption Alignment Units before timing. Partial ownership of an indivisible N\:M Dual Text unit is rejected. `Mute` uses the same projection and does not regroup authored Cues. ### caption-fine\:Track [#caption-finetrack] ```svml ``` Caption joins each complete unit to the independent SemanticTrack. Fine then renders all default and override Styles into one ordinary peer `VisualTrack`: `{captions.track}`. ## Media overlays and B-roll [#media-overlays-and-b-roll] B-roll is an editorial use of the generic Media Track, not a separate Track family. One Item can place an image, generated video, prepared timed medium or compositable Surface at a semantic or absolute window. ```svml ``` ### media-track\:Track and media-track\:Item [#media-tracktrack-and-media-trackitem] Placement is an explicit Spatial Frame edge; appearance and motion remain reusable SVS values. ```svml A clean vertical product film: the written script becomes semantic regions, then those regions assemble into a finished video.

``` `left`, `top`, `right` and `bottom` are edge coordinates inside the parent Frame; `right` and `bottom` are not CSS-style margins. A Frame covering the middle 84% of the canvas horizontally is `left="8%" right="92%"`, and `right="8%"` would place its right edge to the left of its left edge, which is rejected. The Selection contributes semantic points; Media performs the package-owned window projection. The same Item model also covers full-canvas cutaways, split screens and corner overlays. Ordered child layers, source occupancy and explicit Sequences are available when one source is not enough. Every Item, Member or sample Layer declares exactly one visual input form: | Input | Value | Meaning | | ------------------------------ | ---------------------------- | ------------------------------------------------------ | | `image={...}` + `extent={...}` | Blob + authored pixel extent | A durationless still image | | `media={...}` | `SynchronizedMedia` | Connect an explicitly prepared timed source directly | | `surface={...}` | `CompositableSurfaceRef` | Connect an alpha-aware still or timed surface directly | A generated or imported video Blob reaches a Track through ``, which inspects it, selects its streams and puts them on one frame domain; its `.media` output is what `media=` connects to. `audio="none"` carries the picture alone, and `audio="default"` carries the source's own sound, which `audio-gain` then scales. These forms are explicit so a generic Blob is never guessed to be an image or a video. **Outputs:** `{product-broll.visual}` and, only when explicitly authored, `{product-broll.audio}`. ## Audio tracks [#audio-tracks] `@hypit/audio-track` places explicitly prepared audio on the same ProgramSpace as the visual Tracks. A `Clip` consumes `SynchronizedMedia`; normalize a declared or generated audio Blob first, then choose its exact program window and occupancy: ```svml ``` | Attribute | Required | Description | | -------------------------------------- | ---------------- | ------------------------------------------------------------ | | `Track.id` | yes | Stable Audio Track identity | | `Track.semantic` | yes | SemanticTrack that defines the exact sample and frame domain | | `Clip.source` | yes | Explicitly selected and normalized `SynchronizedMedia` | | `during`, `at`/`for`, or `start`/`end` | exactly one form | Whole-program, Selection, Moment, or explicit window | | `playback` | no | `once`, `once-end`, `loop`, `loop-end`, or bounded `stretch` | | `trim-start`, `trim-end` | no | Exact source trim | | `gain`, `fade-in`, `fade-out` | no | Explicit per-clip mix values | The package performs no automatic extraction, normalization, ducking, or bus routing. Multiple Clips in one Track and multiple peer Audio Tracks remain independent inputs to Film. The output is `{music-bed.track}`, an ordinary `AudioTrack`. ## Text overlays [#text-overlays] Static or timed text displayed on screen — titles, callouts, lower thirds. ```svml ``` ### text\:Track [#texttrack] Container for text items. ```svml EDIT MEANING, NOT TIMELINES ``` | Attribute | Required | Description | | ---------- | -------- | ----------------------------------------------------------------------------- | | `id` | yes | Unique identifier | | `semantic` | yes | SemanticTrack from `speech:Track` — also resolves Selection-based item timing | ### text\:Point, text\:Area and text\:Path [#textpoint-textarea-and-textpath] Each item has one explicit placement form, one exact Style and one temporal projection. `Area` places flowing text inside a `SpatialFrame`: ```svml MEANING ``` | Attribute | Required | Description | | -------------------------- | -------- | --------------------------------------------------------------------------------------------- | | `id` | yes | Stable item identity | | child content or `content` | yes | Inline plain/rich content, or an ordinary graph `Text` reference; the two forms are exclusive | | `during` | yes | `"program"` or a Selection reference; `at` and explicit `start`/`end` are also available | | `placement` | yes | `SpatialPoint`, `SpatialFrame` or `SpatialPath`, matching the item form | | `style` | yes | A `text:Style` compiled from an SVS Recipe plus exact font bytes | The `during` attribute accepts either the literal string `"program"` for the complete ProgramSpace, or a Selection reference for semantic timing: ```svml EXACTLY THE RIGHT MOMENT ``` Graph-produced copy remains visible as an edge: ```svml EXACTLY THE RIGHT MOMENT ``` The generic Text value supplies only characters. Typography still owns the item document wrapper, placement, timing, style and motion. Use inline `P`/`Span`/`Break` when the author needs rich runs. **Output:** `{titles.track}` — a VisualTrack added to `film:Film`. ## Ranking boards [#ranking-boards] A ranking board animates an ordered list against the Script. The concrete container, item and Style vocabulary is package-owned; inspect the installed package before authoring it. | Container | Item | Style | | ------------------ | ---------------------- | ----------------------- | | `ranking:Column` | `ranking:ColumnItem` | `ranking:ColumnStyle` | | `ranking:TopThree` | `ranking:TopThreeItem` | `ranking:TopThreeStyle` | ```svml ``` ### The style tag [#the-style-tag] Empty, and all three attributes required: `id`, `recipe` (an SVS Recipe) and `font` (a Font Stack or Font artifact). The recipe is validated against the selected component variant; a Recipe from another family is refused by name. ### The container tag [#the-container-tag] | Attribute | Takes | | ---------------------------- | ------------------------------------------------------------- | | `semantic` | the SemanticTrack the board is timed against | | `frame` | a `space:Frame` — the board's declared placement | | `during` | the timing form declared by the selected component | | `style` | the matching style record, and only that variant's | | `appear-sound`, `move-sound` | optional Synchronized Media | | `terminal` | the Moment where the completed board settles. `TopThree` only | | `canvas` | an optional `space:Canvas` declared by the selected component | Use only the timing forms admitted by the selected package; do not infer a terminal or reveal model from another component family. Optional sounds and reveal phases are valid only when the selected package declares them. ### The item tags [#the-item-tags] Each variant takes its own, at least one, and ids must be unique within a board. * **`TopThreeItem`** — `label` and item-owned Moment `at` are required; `icon` and `stack` are optional. At most three. TopThree reveal order comes from these Moments' actual frame order. * **`ColumnItem`** — `label` (required) and `rank` (required, a positive integer that decides the numbered row and nothing else), optional `icon` and `stack`. Each item also owns its reveal time: `during` names a Selection whose projected window is when it prefers to appear, and `preset="true"` marks a row that starts already placed. Exactly one of the two — an item with neither, or with both, is refused by name. ```svml ``` **Output:** `{board.visual}` — a VisualTrack. A board given a sound also exports `{board.audio}`, an AudioTrack; without one there is no audio output to add. ## Card decks [#card-decks] A deck holds cards in depth: one is in front, the others recede behind it, and each new card is dealt on a Moment. Where a Media Item places one shot in one Frame, a deck keeps a stack of them in the same Frame and moves the whole stack. ```svml ``` ### deck\:DepthStack [#deckdepthstack] `id`, `canvas`, `frame` and `appearance` are required, together with `semantic` for performance time or `space` for authored animation. `until` says what ends the deck: a Moment, a Selection or Segment boundary, or an authored time such as `8s`. With a Selection or Segment, `until-boundary="start" | "end"` chooses its edge; the default is `end`. ### deck\:Card [#deckcard] A direct child of the stack, self-closing, at least one, and dealt in document order. | Attribute | Takes | | ------------ | ------------------------------------------------------------------------------- | | `source` | required — a still image, a Synchronized Medium, or a Compositable Surface | | `extent` | required for a still image and refused for anything else | | `at` | required — the reveal event: a Moment or an authored time such as `2s` or `12f` | | `appearance` | optional — its own Recipe, otherwise the stack's | | `label` | optional — a `deck:Label` record | ### deck\:Label [#decklabel] `id` and `font` are required. The copy is either the `content=` reference or the element's own text — give both and it is refused. `size`, `color`, `align`, `block` and `padding` are optional. ```svml ``` **Output:** `{deck.track}` — a VisualTrack, an ordinary peer of every other Track in the Film. ## Screen overlays [#screen-overlays] Effects that cover the picture rather than sit in a Frame: a flash on a cut, a vignette that holds for a Selection, grain over the whole programme. One Track carries them all, and each child is one effect bound to its own window. ```svml ``` `screen:Track` takes `id`, `canvas` and one time source: `semantic` or `space`. Its children are the effects, at least one, each empty, each with a required `z` for stacking order and a window that is one of: | Window | Written | | ---------------------- | --------------------------------------------------------------------------------------- | | The whole programme | `during="program"` | | A Selection | `during={story.selection.x}` on an item whose Track has `semantic={speech.semantic}` | | A Moment, for a length | `at={story.moment.x} for="12f"` on an item whose Track has `semantic={speech.semantic}` | | An explicit span | `start="…" end="…"`, optionally against a `selection=` or `moment=` | Lengths are `12f`, `250ms` or `1.5s`. A Selection names one contiguous interval and a Moment names one point; author another item when an effect should appear again. Eleven effects are available — `Flash`, `ColorWash`, `Vignette`, `ScanLines`, `DirectionalMatte`, `WhipVeil`, `GlitchVeil`, `Grain`, `LightLeak`, `Bokeh` and `TVStatic` — and each carries its own required attributes, such as `color` / `intensity` / `attack` / `hold` / `decay` on a `Flash`, or `center-x` / `center-y` / `radius-x` / `radius-y` / `softness` / `color` / `opacity` on a `Vignette`. None have defaults: an effect states its whole shape or is refused. ```svml ``` **Output:** `{effects.track}` — a VisualTrack. ## Comment stickers [#comment-stickers] Social-style comment cards placed in a Frame: an avatar, an author, the comment itself, and an optional metadata line. ```svml ``` `comment:Style` is empty and takes `id`, `recipe` and `font`, all required. The recipe carries the card's whole appearance — background, border, radius, tail, avatar, the three text rows, and the enter/hold/exit motion — and every key has a default, so a recipe may set only what it changes. `comment:Track` takes `id`, `canvas` and one time source: `semantic` for performance time or `space` for authored animation. `comment:Sticker` requires `id`, `frame` and `style`, and takes the same windows as a screen overlay above. Its copy is either the `comment=` attribute or the element's own text — both is refused. The optional `author`, `header` and `meta` each take a string or a Text reference, `avatar` takes an image, and there is no `z`: stacking order comes from the recipe's `stack-order`. ```svml