examples / visotalk-intro
Narration is the new timeline
3:59introductionmade by an agent with the VisoTalk skill
narration
Click a sentence to jump to it.
What it shows. Every animation, sound and the music bed hung on a word of the narration, so a rewritten line, another voice or another language moves the pictures with it; the same film in English and Chinese from one document.
sourcethe first scene of the document
The video is this document. The narration is the text of each Line, and every animation starts on a word of it, when that word is spoken.
<Scene id="problem">
<Line id="l1">Today's AI agents are remarkably good at making videos the way they make websites: they write code that draws, and code that moves.</Line>
<Line id="l2">But an explainer also has a voice. The moment the picture has to keep up with the narration, it falls apart.</Line>
<Line id="l3">Most video tools are built on a timeline. Every animation is pinned to a second.</Line>
<Line id="l4" hold={1.2}>So change one sentence, and every animation after it lands a beat late.</Line>
<Part id="coder"><Coder /></Part>
<Animation>
<Appear on={["ground", "chapter"]} at="start" dur={0} />
<Appear on="coder" at="start" dur={0.6} />
<Tween on="coder" code={1} line="l1" word="ai agents" until={{line: "l1", word: "code that draws", edge: "end"}} easing="linear" />
<Tween on="coder" orbit={1} line="l1" word="code that moves" dur={1.2} />
<Disappear on="coder" line="l2" word="but an explainer" dur={0.5} />
<Appear on="rail" line="l2" word="but an explainer" offset={0.5} dur={0} />
<Appear on="script-frame" line="l2" word="also has a voice" dur={0.5} />
<Tween on="rail" type={1} line="l2" word="also has a voice" dur={1.3} easing="linear" />
<Tween on="rail" head={1} line="l2" word="the moment" dur={2.52} easing="linear" />
{/* the playhead crosses the sentence in a fixed 2.52 s (so this holds in every language); each picture comes in as it passes the picture's word (0.13, 0.43, 0.68, 0.95 of the way) */}
<Appear on="pic-moon" line="l2" word="the moment" offset={0.33} dur={0.25} />
<Appear on="pic-earth" line="l2" word="the moment" offset={1.07} dur={0.25} />
<Appear on="pic-sun" line="l2" word="the moment" offset={1.73} dur={0.25} />
<Appear on="pic-half" line="l2" word="the moment" offset={2.38} dur={0.25} />
<Disappear on="script-frame" line="l3" word="built on a timeline" />
<Tween on="rail" ruler={1} line="l3" word="built on a timeline" dur={1.1} easing="easeOut" />
<Set on="rail" pinned={1} line="l3" word="pinned" />
<Tween on="rail" thread={1} line="l3" word="pinned" dur={0.8} />
<Tween on="rail" ins={1} line="l4" word="change one sentence" dur={0.9} />
<Tween on="rail" late={1} line="l4" word="a beat late" dur={0.5} />
</Animation>
<Sound asset="ding" line="l2" word="the moment" offset={0.33} volume={-13} />
<Sound asset="ding" line="l2" word="the moment" offset={1.07} volume={-13} />
<Sound asset="ding" line="l2" word="the moment" offset={1.73} volume={-13} />
<Sound asset="ding" line="l2" word="the moment" offset={2.38} volume={-13} />
<Sound asset="miss" line="l4" word="a beat late" volume={-12} />
</Scene>examples/visotalk-intro/doc.tsx on GitHub