Scrollytelling Generator

What is scrollytelling?

Scrollytelling is a sticky visual plus stepping text, paced by the reader’s scroll. How the mechanic works, and how this generator turns paste into a page.

Scrollytelling is not a long page with fade-ins. It is a sequence.

One visual stays on screen — a photo, a number, a quote, a chart. Short beats of text move past it. As each beat enters the viewport, the visual changes. The reader’s scroll position is the remote control. They can slow down or skip; they are never looking at five ideas at once.

Newsrooms use it for investigations. Educators use it for lessons. Analysts use it when a PDF will not be finished. The New York Times “Snow Fall” piece is the usual landmark: the mountain stays, the copy walks.

The three parts

  1. A pinned visual. CSS position: sticky (or a scroll-triggered swap of panels). One thing holds still.
  2. Story steps. Short chunks of text, one idea each.
  3. A trigger. IntersectionObserver is enough. You do not need a scroll listener firing hundreds of times a second.

This site’s export is that pattern in one HTML file: sticky panels on the left (stacked on a phone), stepping sections on the right, an observer to match them.

What this generator does

You paste an article, a CSV/JSON table, or image URLs. An LLM (or a mock adapter when no key is set) writes a structured outline — title, standfirst, beats with a sticky kicker. A template engine renders the outline. You preview it in the page, download the HTML, or host it here.

It is a scrollytelling generator, not a general AI chat. The homepage H1 is the category. “AI” is how the outline is drafted.