Source
The video is this document. The narration is the text of each Line, and a word inside it makes an object appear when it is spoken.
<Scene id="s" pattern="stage" slots={{title: "head", main: ["c1", "c2", "c3", "e21", "e32", "main", "fork", "c4", "mark", "logo"]}}>
<Beat id="b1" duration={2.4}>
<Appear on="c1" at="start"/>
<Appear on="c2" at="start" offset={0.3}/>
<Appear on="c3" at="start" offset={0.6}/>
<Tween on="e21" draw={1} at="start" offset={0.9} dur={0.5}/>
<Tween on="e32" draw={1} at="start" offset={1.2} dur={0.5}/>
</Beat>
<Beat id="b2" duration={2.4}>
<Appear on="main" at="start"/>
<Appear on="mark" at="start" offset={0.4}/>
<Appear on="logo" at="start" offset={0.7}/>
</Beat>
<Beat id="b3" duration={2.4}>
<Appear on="fork" at="start"/>
<Tween on="fork" draw={1} at="start" dur={0.8}/>
<Appear on="c4" at="start" offset={0.7}/>
<Tween on="main" x={1280} y={300} at="start" offset={0.7} dur={0.8}/>
</Beat>
</Scene>examples/shape-sketch/doc.tsx on GitHub ↗