Interactive story maker: tell a story through scroll, taps and small charts
An interactive story makes the reader do a little of the work: scroll and a chart builds, tap and a quote expands, choose and the story follows your path. Done well, it explains something a flat article can't. Done badly, it's an article that fights the scroll bar. Anticode can build one as an app from your text and data, and this page covers how to plan it so the interaction serves the story.
When interaction earns its place
Interaction helps when the reader needs to see something change: a number growing over years, a before and after, a process with stages, a choice with consequences. It doesn't help a story that is mainly argument or quotation, and no interactive story maker can rescue one that has nothing to show. A useful test: if you removed every interactive part, would the reader miss something they needed to understand? If not, write a well-designed article instead.
Three patterns, and what each is for
| Pattern | How it works | Good for |
|---|---|---|
| Scrollytelling | A graphic stays fixed while text steps scroll past it; each step changes the graphic | Data stories, explaining a process, annual reports |
| Reveal and expand | A readable article with tap-to-open details, footnotes, quotes and small charts in line | Long reads and reports where most readers skim |
| Branching choices | The reader makes decisions and the story follows a path | Training scenarios, brand stories, explainers about trade-offs |
Combining patterns is possible, but one primary pattern per story keeps it readable. The scrollytelling design page goes deeper on that pattern alone.
Plan it as a storyboard
Before you describe anything to Anticode, write the story as numbered steps, each with its text and what the visual does at that moment:
- Step 1. "In 2015, the river had nine fish species." Visual: an illustrated river with nine fish.
- Step 2. "By 2020, four were gone." Visual: four fish fade out; a small line chart appears.
- Step 3. "Then the weir came down." Visual: the weir in the drawing opens; water lightens.
- Step 4. "Last year, seven species were counted." Visual: three fish return; the chart line rises.
- Step 5. A closing paragraph, the sources and a way to act or learn more.
This forces the hard decisions early: how many steps (fewer than you think), what each visual change is, and where the data comes from. Paste the storyboard and the data into your request.
Make it readable for everyone
- Text first. Every step's text should make sense on its own. Someone who can't see the graphic should still get the story.
- Reduced motion. Anticode's design gate checks published apps for reduced-motion support. For a scroll-driven story, that means the graphic switches between states without sliding or zooming when a reader has asked their device for less motion.
- Phones. The fixed-graphic layout often breaks on small screens. Ask for the graphic to sit above each step's text on phones, and test it at phone width.
- No scroll hijacking. The page should scroll at the reader's speed. Effects that take over the scroll wheel frustrate people and break on touch screens.
- Sources visible. Under charts and at the end, not hidden behind a tap.
Building it
A request can be as simple as the storyboard plus direction: "Build this five-step scrollytelling piece from the storyboard below, for our river trust's annual report. Illustrations drawn in a flat, watercolour-like style in greens and blues. A small line chart of species counts from the data below. Sources at the end. Graphic above text on phones." Your own photos can be added with the build; images from elsewhere on the web can't load in the app.
Read the result as a reader would, on a phone first, then refine with change requests one step at a time.
Limits
- Frozen data. The app has no network, so charts show the data you gave it. Say when the figures were collected.
- No embedding. It's published as its own page; it can't be placed inside a news site's article or a CMS page elsewhere. Link to it.
- No reader comments or shared votes. A "what would you do?" choice can show the reader's own path, but not what other readers chose, since apps don't share data between people.
- No video or audio from other sites. Streaming embeds can't load; your own uploaded video can be placed in a step.
- English interface. Anticode's builder and the pages it generates are in English.
Questions people ask
How long should an interactive story be?
Usually five to twelve steps. If it needs more, it's probably two stories, or an article with a few interactive moments.
Can the story branch based on the reader's choices?
Yes. Write each path as its own storyboard and give the choice points. Keep the number of endings small so you can test every path.
Can it collect readers' email addresses at the end?
Ask for a newsletter or contact form at the end. Sign-ups reach you through Anticode's form pipeline; an email address is required.