VisoTalk
$npx skills add visotalk/visotalk -g
examples / shinkansen

新幹線はなぜ時間通りに来るのか

1:14explainer, in Japanesemade by an agent with the VisoTalk skill
narration

Click a sentence to jump to it.

What it shows. A third language: Japanese narration, Noto Sans JP chosen by the document's language, and pictures drawn from numbers such as the gap between trains and the hours of the night.

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="figure">
      <Line id="f1">東京から大阪まで、新幹線は一日に何百本も走ります。</Line>
      <Line id="f2" text="それでも、遅れは平均で約1分です。" hold={1.4}>それでも、遅れは平均で約一分です。</Line>
      <Part id="route" x={0} y={170} w={1920} h={640}>{() => <Route />}</Part>
      <Part id="dial" x={0} y={0} w={1920} h={1080}>{() => <Dial />}</Part>
      <Part id="delay" x={1020} y={250} w={800} h={520}>{() => (
        <div style={{fontFamily: SANS, color: INK}}>
          <Obj id="delay-kicker" style={{fontSize: 56, fontWeight: 700, color: MUTED}}>平均の遅れ</Obj>
          <Obj id="delay-big" style={{fontSize: 260, fontWeight: 700, lineHeight: 1.05, color: ORANGE}}>約1分</Obj>
          <Obj id="delay-note" style={{fontSize: 32, color: MUTED}}>東海道新幹線・年度平均のめやす</Obj>
        </div>
      )}</Part>
      <Animation>
        <Appear on="route" line="f1" word="東京から" />
        <Appear on="route-line" line="f1" word="東京から" dur={0.9} />
        <Appear on="train-main" line="f1" word="新幹線は" />
        <Tween on="route-line" draw={1} dur={0.9} line="f1" word="東京から" />
        <Tween on="train-main" x={1000} dur={3.6} easing="easeInOutSine" line="f1" word="一日に" />
        <Appear on="train-more" line="f1" word="何百本" />
        <Disappear on="route" line="f2" word="それでも" />
        <Appear on="dial" line="f2" word="遅れは" />
        <Appear on="dial-face" line="f2" word="遅れは" />
        <Appear on="delay" line="f2" word="遅れは" />
        <Appear on="delay-kicker" line="f2" word="遅れは" />
        <Tween on="dial" sweep={6} dur={1.2} easing="easeOut" line="f2" word="平均で" />
        <Appear on="delay-big" line="f2" word="約一分" />
        <Appear on="delay-note" line="f2" word="約一分" offset={0.5} />
      </Animation>
    </Scene>
examples/shinkansen/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 shinkansen.visotalk.

shinkansen.visotalk · 0.5 MB