How a video is written

A video is one file, doc.tsx, written in a static subset of TSX. It is read, never run: no variables, loops or imports of values, only tags and literals. This is the whole of a small one:

import {Doc, Text, Chip, Scene, Beat, Line, Appear, Stamp} from '@visotalk/jsx';

export default <Doc id="demo" title="A short explainer" lang="en" theme="visotalk/dark" canvas="16x9">
  <Text id="title" text="The first idea" style="title"/>
  <Chip id="tag" text="a label" style="mono"/>

  <Scene id="intro" pattern="title" slots={{title: "title", aside: "tag"}}>
    <Beat id="b1">
      <Appear on="title" line="l1" offset={0.1}/>
      <Line id="l1">The first thing we name is a <Stamp on="tag">label</Stamp>.</Line>
    </Beat>
  </Scene>
</Doc>;

Words drive the pictureCopy Anchor Link

• A Line is what is spoken, and it is shown as the caption.
• A tag around words fires on them. <Stamp on="tag">label</Stamp> makes the chip tag appear on the word “label”, whenever the narration says it. Change the sentence and the chip moves with it.
• Objects are declared once (Text, Chip, Card, Counter, Code, Terminal, Graph, Chart, Timeline, Image, Shape and more) and shown by motions (Appear, Tween, DrawIn, CountUp, Morph, …), so a picture continues across sentences instead of being redrawn.
• A scene has a pattern and slots: stage, title and others place objects without coordinates. The engine solves time and layout.

For a figure to be believable, an object appears on the word that names it, not before. visotalk qa checks this against the narration and also finds overflow, clipping and overlap.

What the agent does with itCopy Anchor Link

The skill makes the agent work in a loop, not in one pass:

1. Write the document and run validate; every issue points at doc.tsx:line:col.
2. For each scene, answer four design questions, then take a full-size still and read it.
3. Record a review of that still: where each anchored phrase appears, whether the picture is the one designed, whether it is more than a slide deck could be.
4. render refuses until every scene has a passing review since it last changed, and while something is on screen more than 0.75 s away from the word that names it. Run qa before it for overflow, clipping and overlap.

The agent's rules for what makes a good explainer are in the skill itself: skills/visotalk/SKILL.md. visotalk schema prints every object, motion, pattern and field the validator knows.

Custom componentsCopy Anchor Link

When the built-in objects are not enough, a document registers a TypeScript module that draws a canvas or DOM component and moves it with numeric props that the document tweens on words. The moon-phases example does this: one Orb component carries the whole story from a ball in front of a lamp to the Sun, Earth and Moon.