From URL to Page

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="type">
    <Line id="l1">You type a web address and press Enter.</Line>
    <Line id="l2">A moment later, a page appears.</Line>
    <Line id="l3">Here is everything that happens in between.</Line>
    <Part id="win" x={300} y={70} w={1320} h={680}>{() => <Window />}</Part>
    <Part id="enter" x={1250} y={770} w={370} h={100}>{() => (
      <div style={{boxSizing: 'border-box', width: '100%', height: '100%', borderRadius: 22, background: 'var(--vt-panel2)', border: '4px solid var(--vt-grad)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, fontFamily: MONO, fontSize: 44, color: 'var(--vt-grad)', fontWeight: 700}}>Enter <span>↵</span></div>
    )}</Part>
    <Animation>
      <Appear on="win" at="start" dur={0} />
      <Tween on="win" line="l1" word="type" chars={27} dur={1.4} easing="linear" />
      <Appear on="enter" line="l1" word="press" />
      <Tween on="enter" id="press" line="l1" word="enter" scale={0.9} dur={0.15} />
      <Tween on="enter" after="press" scale={1} dur={0.2} />
      <Appear on="page" line="l2" word="page" />
      <Disappear on="page" line="l3" word="everything" />
      <Disappear on="enter" line="l3" word="everything" />
    </Animation>
  </Scene>

The whole example in one file: the document, the pictures and clips it uses, and its narration already spoken. Import it in VisoTalk Studio (Import .visotalk on the home page) to change it there, or unpack it for the skill with npx visotalk import http-request.visotalk.