Superhero Storiesbedtime stories

Bedtime stories

Superhero bedtime stories, written for a seven-year-old.

Built for my kids, who wanted a new superhero story every night. Every story is original, runs 80–100 words, and never turns sad or scary.

  • 482 stories
  • Free, no account
  • Installs to a home screen, reads offline
  • Static Next.js export
Superhero Stories home screen with universe tiles, a search box and the ensemble character grid

What it is

A story library that ends the nightly negotiation

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

Marvel heroes browse grid showing thirty-one character tiles, each with an avatar and label

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.

  • Search by name
  • Five ensemble teams
  • Heroes and villains listed separately
Black Panther origin story open on the Story Time tab, marked story one of ten

Reading

Three lengths of the same story

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
Quiz question one of ten with four multiple choice answers, a clue button and skip

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.