10sStorybook · HTML / JS
Rainy fox animation
A rainy street scene with a walking fox, umbrella, puddles and window light. Study character poses and layered weather.
Free downloadStarter files
Six small exercises for learning Canvas. These are introductory files from HandDrawnAI.
10s
12sStorybook · HTML / JS
Bird & butterfly animation
A colored-pencil bird follows a butterfly and returns to a flowering branch. Explore takeoff, flight poses and landing timing.
Free download
6sPencil · HTML / JS
Pencil bird animation
A graphite sparrow looks, crouches and hops. An exposure sheet maps whole-body drawings to time, making this a useful pose-study starter.
Free download
7sInk · HTML / JS
Coffee steam animation
Steam rises from a coffee cup beside a croissant and a flower. A small, fixed composition for learning timed curves and gentle motion.
Free download
7sStorybook · HTML / JS
Plant growth animation
A seed grows roots, leaves and a coral flower above a soil cross-section. Adjust staged growth for a nature lesson or a progress metaphor.
Free download
7sPencil · HTML / JS
Paper boat animation
A paper boat rocks on pencil waves beneath a crescent moon. A quiet scene for experimenting with wave phase, bobbing and a limited palette.
Free download01 / 02 / 03
From a template to your own scene
Choose a starting point
Watch the preview and find a composition close to your idea.
Open it locally
Download and unzip the template. Open index.html in a modern browser, then press play.
Change, preview, repeat
Edit colors, timing or poses. Check a few key frames before rendering a longer film.