The North Wind and the Sun

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="argument">
    <Line id="l1" hold={0.8}>A fable by Aesop.</Line>
    <Line id="l2">One day, the North Wind and the Sun began to argue about which of them was stronger.</Line>
    <Line id="l2b">Each was sure that he alone was the strongest in the world.</Line>
    <Line id="l3">Just then, a traveller came walking down the road, wrapped in a warm cloak.</Line>
    <Part id="title" x={0} y={90} w={1920} h={200}>{() => (
      <div style={{textAlign: 'center', fontFamily: 'var(--vt-sans)', fontWeight: 700, fontSize: 104, letterSpacing: 1, color: '#1f3050', textShadow: '0 2px 24px rgba(255,255,255,0.55)'}}>
        The North Wind and the Sun
      </div>
    )}</Part>
    <Animation>
      <Appear on="world" at="start" dur={1.4} />
      <Appear on="title" line="l1" word="fable" dur={0.9} />
      <Disappear on="title" line="l2" dur={0.6} />
      <Appear on="wind-g" line="l2" word="North Wind" dur={0.9} />
      <Appear on="sun-g" line="l2" word="Sun" dur={0.9} />
      <Tween on="world" line="l2b" word="sure" puff={0.6} sunS={1.18} dur={1.4} easing="easeInOut" />
      <Tween on="world" line="l3" puff={0} sunS={1} dur={1.2} easing="easeInOut" />
      <Appear on="traveller" line="l3" word="traveller" dur={0.4} />
      <Set on="world" line="l3" word="traveller" pace={1} />
      <Tween on="world" line="l3" word="traveller" tx={700} dur={9} easing="linear" />
    </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 north-wind-sun.visotalk.