examples / fable-stump
守株待兔
1:00story, in Mandarinmade by an agent with the VisoTalk skill
narration
Click a sentence to jump to it.
What it shows. Narrative without cards: drawn characters and time passing as continuous motion, a brush face and a serif face chosen by naming them in the theme, and Chinese narration from a provider voice.
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="cover" duration={2.8}>
<Part id="stage0"><Stage s={0} /></Part>
<Part id="book" x={330} y={100} w={700} h={800}>{() => (
<div style={{position: 'relative', width: 700, height: 800}}>
<div style={{position: 'absolute', left: 60, top: 0, writingMode: 'vertical-rl', fontFamily: SERIF, fontWeight: 900, fontSize: 180, letterSpacing: '0.06em', lineHeight: 1, color: INK}}>守株待兔</div>
<div style={{position: 'absolute', left: 300, top: 12, writingMode: 'vertical-rl', fontFamily: SANS, fontSize: 56, letterSpacing: '0.3em', color: INK}}>中国古代寓言</div>
<div style={{position: 'absolute', left: 312, top: 560, width: 84, height: 84, background: RED, borderRadius: 6, color: PAPER, fontFamily: SERIF, fontWeight: 900, fontSize: 62, lineHeight: '84px', textAlign: 'center'}}>寓</div>
</div>
)}</Part>
<Animation>
<Appear on={["stage0", "book"]} at="start" dur={0} />
</Animation>
</Scene>examples/fable-stump/doc.tsx on GitHubremixmake 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 fable-stump.visotalk.