Bedtime went the same way every night. “Tell me one about the guy with the shield.” Then thirty seconds of me inventing something badly. The picture books ran out fast, and most of what I found online was either written for adults or ended with somebody’s parents dying.
So the stories live in the repo as plain text files — one folder per character, ten stories each, in order from the origin onward. The app reads them at build time and ships as static HTML. Every story exists in three lengths, so a bedtime that has run long can end on the short one.
Tour
The three screens it has
superhero-stories.vercel.app
Browse
Pick a character, get ten stories
The home screen is a grid split into ensemble teams, then heroes and villains for each universe. Tap a tile and you get that character’s ten stories in order, starting with the origin.
Story Time is the long read-aloud version. Summary is the original 80–100 word story. TLDR is a few lines, for when bedtime has already overrun. Same tabs on every story in the library.
Story Time · Summary · TLDR
Ten stories per character, numbered
superhero-stories.vercel.app/quiz
Quiz
Ten questions, one clue each
Quiz Me deals ten multiple-choice questions across four difficulty tiers. Clue masks the answer out of the explanation and leaves the reasoning; Skip just shows it. Answers are tallied by topic and by character.
Easy, medium, hard, trivia
Clue gives the reasoning, not the answer
Progress stays on the device
How it works
From “I want a story” to lights out
Four taps, in the order a child actually does them. Nothing before the first one.
01
Open it
No sign-up and no account. The whole app is static HTML, so the first thing on screen is the browse grid.
02
Pick a character
Type a name or tap a tile. Ensembles, heroes and villains are grouped separately, with ten stories behind each one.
03
Choose a length
Story Time, Summary or TLDR. One story, three sizes, so the read fits the time that is actually left.
04
Quiz them after
Quiz Me runs ten questions and records what they got right, by topic and by character, in the browser.
Features
What’s actually in it
Original stories
Every story is written for this app. Nothing is adapted or copied out of a comic or a film.
Three reading lengths
Story Time, Summary and TLDR on every story. Pick the one that fits how much bedtime is left.
Ten-question quiz
Multiple choice across four difficulty tiers, drawn from the same characters the stories cover.
Clue, not answer
The clue masks the answer out of the explanation, so the reasoning is still there to follow.
Progress by topic
Right and wrong answers are tallied per topic and per character, kept in your browser.
Surprise Me
One button pulls a random story out of the whole library, for when nobody can decide.
Five tile themes
Dark Gradient, Polaroid, Comic Panel, Minimal Glass and Sticker. The dark one is the default.
Works offline
A service worker precaches the site, so a plane or a dead hotel wifi still gets you a story.
Built with
The stack, and where the data lives
Next.js 16
React 19
TypeScript
Tailwind CSS v4
Framer Motion
Static export
Service worker
Vercel
Static export, hosted on Vercel. There is no database and no backend — the stories are plain .txt files read at build time and baked into HTML. Theme choice, quiz progress and reading history are kept in your browser’s localStorage and never leave the device.
FAQ
Reasonable questions
Is it free?
Yes. No accounts, no ads, no payments and no analytics. It is a personal project sitting on a free hosting tier.
Do I need an account?
No. There is nothing to sign into. The app is static files, so there is no server holding a record of you.
Where does my data go?
Nowhere. Your theme, your quiz progress and which stories you have opened are stored in localStorage on your own device.
Does it work on a phone?
Yes. It ships a web manifest and a service worker, so you can add it to a home screen and read with no connection.
Are these the real comic stories?
No. Every one is original, written to a 7-year-old brief: no death, no tragedy, and villains who cause mischief rather than harm.