Why ice floats

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="floats">
      <Line id="l1">Ice floats because water does something strange when it freezes.</Line>
      <Line id="l2">Its molecules lock into an open hexagonal lattice, with gaps between them.</Line>
      <Line id="l3" hold={1.4}>That spacing makes ice about nine percent less dense than liquid water, so it rides on top.</Line>

      <Part id="tank" x={0} y={0} w={1920} h={1080}>{() => <Tank />}</Part>
      <Part id="tag" x={1240} y={400} w={620} h={300}>{() => <Tag />}</Part>
      <Part id="stat" x={1240} y={290} w={620} h={460}>{() => <Stat />}</Part>

      <Animation>
        <Appear on="tank" line="l1" word="Ice floats" />
        <Appear on="water" line="l1" word="Ice floats" dur={0.8} />
        <Appear on="cube" line="l1" word="water" dur={0.7} />

        <Tween on="tank" freeze={1} dur={2.4} easing="easeInOut" line="l2" word="lock into" />
        <Appear on="tag" line="l2" word="open hexagonal" />
        <Appear on="tag-a" line="l2" word="open hexagonal" />
        <Appear on="tag-b" line="l2" word="gaps" />

        <Disappear on="tag" line="l3" word="ice about" />
        <Appear on="stat" line="l3" word="nine percent" />
        <Tween on="stat" pct={9} dur={1.2} easing="easeOut" line="l3" word="nine percent" />
        <Tween on="tank" rise={1} dur={1.8} easing="easeInOut" line="l3" word="rides" offset={-0.6} />
      </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 ice-floats.visotalk.