Contra - A professional network for the jobs and skills of the futurePlanning a 32-page picture book? Page 1 opens alone on the right, pages 2–3 form the first full s...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Planning a 32-page picture book? Page 1 opens alone on the right, pages 2–3 form the first full spread, and page 32 closes alone on the left. I built a free browser storyboard so self-publishing authors can map every beat and page turn before illustration begins. Nothing is uploaded or stored—type, review, then print or save as PDF.
Storytime, the Pop-Up Edition: a picture book you can play
My first entry dressed the player as a picture book. This one makes the book do the work, so every part of the metaphor is a real control or real player state.
Chapters are pages. Each chapter becomes a numbered tab on the crayon trail, the scrub preview names the page you are pointing at, and the folded corner of the picture is a button: tap it to turn to the next page (N and P on a keyboard). No chapters in your video? No tabs and no corner.
The star is the player's state. She walks the trail while the story plays, walks faster or slower with the reading speed, and falls asleep when you pause. Reading speed itself is a snail, a pair of footsteps or a rabbit. In bedtime mode the paper turns midnight blue, the picture dims and the star becomes a moon. The last page is "The End".
The book folds to fit. On small players the two-row strip closes into a one-row bookmark that still carries play, time, the trail, mute and fullscreen, and takes about 30% of the picture instead of 45%. Speed, captions and bedtime tuck into a pop-up page that closes with Esc.
It works on any video (try the "Any plain video" switch on the demo), recolours with --media-accent-color, and keeps every control at 44px or more with visible two-tone focus rings, captions lifted above the controls, and a calm mode under reduced motion.
The demo film, The Little Star Walks Home, is my own paper-cut animation that runs from bright day to dark night to test contrast. It streams from Mux, and the same player is live on my own site. Plain HTML and CSS on Video.js v10 components, no build step.
This is such a magical concept! A picture book you can actually play is such a beautiful idea. I love how every part of the metaphor is a real control, chapters as pages, the corner turns them, and a star walks the story home. So playful, so clever, and so thoughtfully designed. Good luck with the challenge!
I designed these typographic layouts as part of my ongoing visual series on scale, grid and rhythm
↳ Master typography & layout - The foundation of timeless web design. Join 350+ designers inside my 13-hour online course https://typomonday.com/course