How a clock keeps time

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="energy">
    <Line id="l1">Every mechanical clock begins with stored energy.</Line>
    <Line id="l2">A mainspring, wound tight, wants to unwind. A weight, lifted high, wants to fall.</Line>
    <Animation>
      <Appear on="clock" at="start" dur={0.01}/>
      <Appear on="barrel" line="l1" word="begins"/>
      <Appear on="spring" line="l1" word="stored energy"/>
      <Appear on="lb-spring" line="l2" word="mainspring"/>
      <Tween on="clock" wind={1} dur={1.6} easing="easeInOut" line="l2" word="wound tight"/>
      <Appear on={["weight", "lb-weight"]} line="l2" word="weight"/>
      <Tween on="clock" wy={690} dur={1.4} easing="easeInQuad" line="l2" word="fall"/>
    </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 clock-escapement.visotalk.