How the storybook came to life

The current storybook

A puppet-style picture book, animated with JavaScript. Read it together at your own pace in the interactive storybook, or watch the narrated film below.

1. Animate the whole page with Seedance

First, we gave Seedance the illustration and asked it to animate the scene. The scenery moved beautifully, but the child’s small face became muddy and distorted. Watch the face as he runs across the village.

Original Seedance output, before the character was replaced.

2. Give the character his own animation

To improve the face, we animated a larger drawing of the child separately. Then we removed its white background, shrank it to fit the page, and composited it over a separately animated village. Code controlled his path and travel speed so his steps connected more naturally with the ground.

The face was much clearer, and we could keep the trees moving. But each revision still involved generated video and extra compositing work.

Separate character animation layered over the animated background.

3. Move the animation into JavaScript

Cost was the main reason we changed direction. Generating and revising diffusion-model video for every page was too expensive. And the models rarely got everything right in one attempt: a face, a step or a small movement would need another pass.

The finished village scene, animated with JavaScript, with narration and text restored.

We moved to reusable drawings animated with JavaScript. Generated motion could serve as reference, while code handled movement, timing, poses and expression changes. That made it much cheaper to iterate and gave us finer control over what happened on each page.

We landed on a puppet style: illustrated characters moving through layered scenes, with deliberate poses and small expressive gestures. It felt like a storybook coming to life, and it was something we could achieve well with JavaScript.

Try the finished interactive storybook →