天空为什么是蓝色的

1:20science, in Mandarinmade by an agent with the VisoTalk skill

narration

Click a sentence to jump to it.

What it shows. A language other than English: Chinese lines are anchored on runs of characters, the type falls back to a CJK face, and every picture is drawn from numbers such as the wavelengths and the scattering ratio.

sourcethe first scene of the document

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="question">
    <Line id="l1" hold={0.3}>白天的天空是蓝的，可是太阳光看起来明明是白色的。</Line>
    <Line id="l2" hold={1}>那么，蓝色到底是从哪里来的？</Line>
    <Part id="sky"><Sky /></Part>
    <Part id="sun"><Sun /></Part>
    <Part id="title" x={120} y={300} w={1100} h={420}><Title /></Part>
    <Part id="white" x={1230} y={470} w={440} h={90}>{() => <div style={{fontFamily: SANS, fontSize: 56, fontWeight: 700, textAlign: 'center', color: '#fff'}}><T id="white">白色的光</T></div>}</Part>
    <Part id="mark" x={1140} y={560} w={420} h={300}>{() => <div style={{fontFamily: SANS, fontSize: 300, fontWeight: 700, color: '#fff', textAlign: 'center', lineHeight: 1}}>？</div>}</Part>
    <Animation>
      <Appear on="sky" line="l1" word="天空是蓝" dur={1.2} />
      <Appear on="title" line="l1" word="天空是蓝" dur={0.9} />
      <Appear on="sun" line="l1" word="太阳光" dur={0.9} />
      <Appear on="white" line="l1" word="白色的" />
      <Appear on="mark" line="l2" word="哪里来" dur={0.6} />
    </Animation>
  </Scene>

examples/sky-blue/doc.tsx on GitHub

remixmake it your own

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 sky-blue.visotalk.

sky-blue.visotalk · 0.6 MB