Scrollable explainers — principles & patterns

A reusable reference for building long-form scroll-driven explainers. Written from a direct browser teardown of the best current example of the form, but the patterns below are meant to be adapted, not copied. Section 6 is about how to depart from them.

Worked case study: ProPublica — Why Carbon Capture Can't Solve Climate Change — full teardown with scroll map, verbatim text in order, implementation details and screenshots (reference/). Every pattern below is evidenced there. Read that file when you want the detail; read this one when you want the rules.

Add further teardowns as case-study-<slug>.md as we find pieces worth learning from.

---

1 · What the form is

Generically: scrollytelling. Publishers call individual pieces projects (ProPublica), visual stories (NYT, Reuters), visual essays (The Pudding).

The useful definition is behavioural, not visual:

An illustrated world the reader scrolls through, with sentences placed inside it. The drawing carries the explanation; the text labels, paces and lands the numbers.

Two things it is emphatically not:

• Not a long article with pictures. In an article, prose carries the argument and images decorate. Here it inverts.
• Not an interactive infographic. Nothing to click, drag, hover or toggle. Scroll is the only input.

The diagnostic test: delete the graphics. If the argument survives intact, you've written an article, not an explainer. In this form the drawing carries steps the prose deliberately never states.

---

1.5 · The three stages — do not collapse them

Build in three separate, separately-committed stages. The failure mode this prevents is real and easy to fall into: if you write text and visual direction together, the script is never judged as writing. Weak prose gets carried into production because it was never looked at on its own.

Stage files live in explainers/_process/<piece>/, never beside the finished piece — only index.html sits in the piece's own folder. See AGENTS.md > Conventions for the layout.

Pieces ship as scrolling HTML only. If you ever write markdown with inline SVG, never leave a blank line inside a <figure> or <svg> block — it silently turns the rest of the figure into a code block on the published page. See AGENTS.md > Conventions.

The visual register (settled for this repo)

Hand-drawn on paper. Warm paper ground (--paper: #efe9dd), never white. Plain SVG geometry run through feTurbulence + feDisplacementMap so edges wobble and read as drawn rather than machine-ruled. Serif body type, small sans caps for labels. Quantity shown as repeated marks, not bars.

One accent with a job. Terracotta (--mark: #c25c34) is reserved for the constraint — the thing at issue. Everything else is ink or grey. This is not decoration: it means the eye finds the bottleneck before reading a word. Don't spend the accent on anything else.

A fuller paper-collage direction (torn edges, layered stock, photographic fragments) was considered and set aside — it costs legibility on diagrams carrying real numbers and makes each one bespoke rather than composed from shared primitives.

Stage 1 is the one that matters

Write it as prose that stands alone. Read it aloud; if a sentence is hard to say, it is wrong. Then — and this step is not optional — critique it as a world-class non-fiction editor would, in a separate file (_process/<piece>/02-critique.md), and revise.

The critique must be adversarial or it is worthless. Ask specifically:

• Where are the stakes? Who is harmed, by how much, and does the reader meet them? An explanation with no one in it is a maths problem with a roof on.
• Is there a person? Named, specific, present.
• Does the title match the spine, or a section you liked?
• Which paragraphs tell the reader what to conclude instead of letting them conclude it?
• Where does it enumerate rather than argue? Three examples in a row is a list; lists kill momentum. Two read as a pattern.
• Are the concepts named — will the reader finish with a word they can use, or only a feeling?
• How many signposts ("Now the question is…", "Back to the…", "You may have noticed…")? Each costs a screen. Cut most; let the hard cut do the work.
• Is the ending an ending, or a trailer for the next piece?
• What is working — name it explicitly, so revision doesn't destroy it.

Finish the critique with a ranked fix list. Then write v2 against it.

Stage 2 only begins once the script is approved

Do not adjust the prose to suit a drawing. If a visual won't fit the script, that is information about the visual. The script's job is done.

---

2 · The patterns

Nine named patterns. Use them as a vocabulary — "this section needs a Comparison Ladder", "give that a Pinned Stage."

2.1 · Cold Open

What it is: the piece opens with three to five short sentences — one per screen, over a graphic that's already moving — and the headline does not appear until after them. In the case study the H1 arrives 4,000px down the page. The reader has scrolled through four sentences before the article has even told them its name.

Why bother. A normal article opens headline-first: "Why Carbon Capture Can't Solve Climate Change." That tells you the conclusion in the first second, so the rest is just supporting material for something you've already been handed. The Cold Open withholds the conclusion and walks you into it instead:

Global leaders are banking on tech advances to solve climate change. ← screen 1 One leading idea is to capture carbon pollution from the air and then bury it underground forever. ← screen 2 It may sound practical. ← screen 3 There is no conceivable way it can work. ← screen 4

Forty words. The first three sentences describe the idea attractively and in good faith — this is the crucial bit; it is not strawmanned, and by sentence three you're nodding along. Then sentence four breaks it flatly.

The mechanism is pacing, not cleverness. You physically cannot see sentence four while you're reading sentence three, because it's a screen away. The scroll does the withholding.

Why this matters for us specifically: it is prediction-and-violation — set up the reader's expectation, then break it — achieved with zero interaction. No button, no "guess before you scroll" prompt, no quiz. If you were planning to make the reader click to commit to an answer before revealing it, this is the cheaper, more reliable way to get the same effect.

Doing it badly: opening with three sentences of context that nobody would disagree with and no reversal at the end. If sentence four isn't a genuine turn, you've just written a slow headline.

What we found in practice: a cold link needs a landing first. The pattern assumes a reader who arrived from a homepage or a headline and already knows they are in a story. Ours mostly arrive on a bare link, and a reader who lands inside a pinned stage sees a drawing, one sentence, no title and no sign that scrolling is the interaction — so they leave without scrolling. Give the piece a hero screen: kicker, title, dek, a line saying it is a scrolling piece, and a visible scroll cue. That does cost the withheld headline, so let the dek carry a compressed version of the turn. Somewhere to Put It was rebuilt this way on 2026-08-20 and its cold open moved down to follow the framing; the rest of the series followed.

Not every piece needs the hero, though — check what the reader actually lands on. The Wrong Queue opens on a drawn clinic with a queue out of the door and one concrete sentence, which tells you where you are in a second; giving it a hero would have spent the reversal for nothing. It kept its cold open and took only the bar and the cue. The diagnostic is whether the first screen is legible as a story without the title: a drawn place and a specific sentence, yes; an abstract shape and an unintroduced name, no.

A piece that is part of a series needs one line of routing in the hero. The Arrows Nobody Checks opens on a name and a clinic that only part one introduces, so its standfirst says where the clinic comes from and links back. Cheaper than rewriting an opening that works for readers arriving in order.

2.1b · The Stacked Column

Where a pinned stage is telling a story rather than captioning one drawing, let the text blocks accumulate down a column instead of each replacing the last. The reader can see the sequence it has built and read back over it, rather than trusting their memory of a sentence that has now vanished. Opt in with <div class="steps stack">; scroller.js keeps every block up to the live one on screen, dims the ones already read, and marks the live one .cur.

It costs a third of the frame, so it is only on above 1200px — narrower than that, the drawing's labels start rendering below 10px and an unreadable diagram costs more than the sequence gains, so the group falls back to one block at a time. Keep the ordinary position classes (tl, bc, …) on stacked steps; that fallback is what uses them. Use it for the narrative stretches, not for a stage where each caption points at a different part of the same picture. The test is whether the drawing already accumulates. The Arrows Nobody Checks opens on a five-beat chain that looks like an obvious candidate — until you watch it: the boxes pile up and stay, so the drawing is already the record of what came before, and stacking the captions on top of it would only add a wall of text beside a diagram that had said it. Maren's stage was the opposite — the drawing changed state rather than growing, so once a beat had passed there was nothing left of it on screen.

2.2 · The Pinned Stage

The structural workhorse. A tall container holds a viewport-height child that sticks while the container scrolls past. Text steps fade in and out over the pinned graphic.

The container's height is the pacing dial — it decides how long a graphic holds the screen. In the case study these ranged 1,700px (~2 screens) to 4,240px (~4.7 screens).

2.3 · One Screen, One Sentence

In the body stretches, roughly 900px of scroll between text blocks — a full screen of drawing per sentence. If a sentence needs a second sentence to be understood, it is two screens, not a paragraph.

2.4 · Scroll-as-Scale

Make the scroll distance itself be the quantity. The case study draws a pipeline that snakes down through screen after screen while three lines land: "more than double the distance to fly around the earth" → "longer than the country's entire interstate highway system" → "hundreds of thousands of miles." You feel the length because you had to scroll it. The graphic isn't illustrating the number — the scroll is the number.

This is the single most transferable technique in the form and the hardest to fake. Reach for it whenever a quantity is meant to feel excessive.

2.5 · The Comparison Ladder

Never leave a large number as a number. Convert it, repeatedly, into something bodily, each rung on its own screen:

6 billion tons → an area the size of Mexico → 68,000 miles of pipeline → "a brand new geological waste site somewhere on the planet every four days for the next 25 years."

The last rung converts a quantity into a cadence — a rate you can picture happening.

2.6 · The Bare Number Block

Numbers get their own text blocks, two or three words long, with a small caption beneath. The case study's cost comparison is three such blocks — $500 billion / $340 billion / $50 billion, each captioned. The juxtaposition argues; the prose doesn't have to.

2.7 · The Nut-Graph Island

Exactly one region of ordinary paragraph density — three or four paragraphs of 25–45 words, early, right after the title card. It says what was found and why it matters. Then the piece never returns to that density until the sources.

2.8 · The Frame Sequence

How the animation is actually done: pre-rendered image frames swapped on scroll. No canvas, no video, no WebGL. An <img> whose src steps through a numbered sequence, over a shared texture background reused across every stage. Cheap, robust, degrades gracefully, works on any device.

2.9 · Abrupt Stop, Then Receipts

End the body on a short flat line — the case study's is six words, "Carbon capture and storage remains elusive." No summary, no call to action, no flourish. Then hand off to several hundred words of dense, plainly-set Notes on Data Sources. The transparency is the ending; it does more for credibility than a peroration would.

---

3 · The measured baseline

Numbers to calibrate against — not targets to hit exactly. Measured from the case study; full figures there.

The ratio that should reset your instincts: ~1 word per 16px of scroll. A normal article runs ~1 word per 1.5px. This form gives ten times more visual space per word.

---

4 · Build mechanics

The DOM skeleton

<div class="scroll-item">          <!-- tall; height = how long the graphic holds -->
  <div class="sticky-item">        <!-- position: sticky; top: 0; height: 100vh -->
    <div class="sticky-item-container">
      <div class="sticky-item-bg"><img src="paper-texture.jpg"></div>
      <img id="sequence">          <!-- frame swapped on scroll -->
      <svg><!-- charts drawn here --></svg>
      <div class="step-content" id="step-1"><p>…16 words…</p></div>
      <div class="step-content" id="step-2"><p>…16 words…</p></div>
    </div>
  </div>
</div>

.scroll-item  { position: relative; height: 3000px; }  /* the pacing dial */
.sticky-item  { position: sticky; top: 0; height: 100vh; }

The stickiness is pure CSS. JavaScript does one job only: fire an event when a step crosses a threshold, via IntersectionObserver — the Scrollama pattern. Never scrolljack (never hijack scroll physics with JS); it breaks accessibility and readers hate it.

Art direction observed

• Ground: a single flat paper texture (rgb(230,228,229) — pale grey-lavender), reused as the background image of every stage, so the whole piece reads as one continuous surface.
• Palette: near-black ink (rgb(0,0,0), rgb(49,48,45)), a mid grey (rgb(146,144,139)), and two or three flat accent colours used sparingly. Text highlight blocks in dusty pink.
• Style: hand-drawn ink and cut-paper collage. Deliberately naive — childlike factories, scribbled smoke. Nothing slick, no gradients, no 3D. It reads as honest rather than corporate, and it is far cheaper to keep visually consistent than polished vector work.
• Type: two voices only — a heavy display serif at very large size (H1 measured at 144px) for occasional section statements, and a smaller serif for the annotation sentences, set in a narrow measure (~30 characters) so blocks sit inside the illustration rather than spanning it.

---

4.5 · Check it in a browser before calling it finished

Most of what has been wrong with these pages was invisible from the source: captions covering the thing they pointed at, boxes running off the edge of their own drawing, a whole stage letterboxed into the middle third of the frame, a crack drawn through its own label, portrait arrows pointing the wrong way. Drive the built page at 1440×900, 1280×720 and 390×844, step through every trigger, and look at the result.

Script the stepping — it is cheap. The Playwright browsers are already cached in ~/Library/Caches/ms-playwright, so npm i playwright into a scratch directory plus PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 is the whole setup. Two details that cost time to work out:

• Park at triggerTop + 0.3 × viewport to land on a given step. The observer fires a step when its trigger crosses the middle band, so +0.6 overshoots into the next one and you photograph the wrong beat.
• Assemble the shots into a contact sheet — a grid of twelve screens at a glance. That is how the collisions actually get spotted; reading them one at a time, you stop paying attention by the fifth.

Two measurements are worth automating on top of looking: the union of visible SVG elements against the <svg> box, which catches drawings running off their own canvas, and each visible element against the active caption's rect, which catches captions sitting on ink. Neither replaces looking — a fan of arrowheads converging into a smudge, and 5px labels in a thumbnail, only ever showed up in the screenshots.

Verify against production, not the preview: see AGENTS.md on the preview's stale assets.

5 · Checklist

1. ~1,100–1,400 words of body prose. More argument means more drawings, not more sentences.
2. Median ~16 words per block; hard ceiling ~45, and only in the Nut-Graph Island.
3. One screen of graphic per sentence through the body.
4. Zero interactions. The reveal is the scroll.
5. A hero screen first — title, dek, scroll cue — then the Cold Open's 3–5 sentences ending on the thesis. See 2.1.
6. Every significant number gets a Comparison Ladder.
7. One continuous illustrated world, not a set of unrelated figures.
8. Pre-rendered frame sequences, not canvas or video.
9. Abrupt stop, then full sources.
10. Mobile first; honour prefers-reduced-motion; readable with JS off.

---

6 · Adapting this — don't follow it slavishly

The case study is investigative journalism about physical infrastructure. Much of what makes it work is specific to that. Before copying a pattern, check it still earns its place.

What transfers to almost any subject

Cold Open · One Screen One Sentence · Comparison Ladder · Bare Number Block · Nut-Graph Island · Abrupt Stop Then Receipts · zero interactions · the Pinned Stage.

What is subject-specific and may not transfer

• Scroll-as-Scale needs a genuinely large quantity. Don't stretch a page to five screens for a number that isn't excessive — it reads as padding.
• The naive collage style suits a piece attacking a corporate claim. A tender or technical subject may want a different register. What must survive is the restriction: one ground, one ink, two or three accents, two type voices.
• ~40 viewports of scroll works for a linear physical process. An argument that branches — where the reader must hold two ideas side by side — may need a different structure entirely.

Adapt the ratios to your material. The 1:16 word-to-pixel ratio comes from a subject where the physical scale is the argument. A conceptual subject may sit nearer 1:8 and still be in the form. The invariant is not the ratio — it is that the drawing carries steps the prose never states.

When not to use this form at all

• The argument depends on the reader comparing things freely → that's a tool, not an explainer.
• The content is mostly qualitative and quotation-driven → a well-set article is better.
• Nobody can commit to producing ~40 distinct drawings. The art is most of the work — a half-illustrated explainer is worse than a good plain article. Scope the drawing budget before committing to the form.

---

Sources

• Case study: ProPublica — Why Carbon Capture Can't Solve Climate Change — full teardown; live piece; frames in reference/
• NYT — Jeju Air Flight 2216 — same form, paywalled
• Archie Tse (NYT), Why We Are Doing Fewer Interactives, Malofiej 2016 — "If you make the reader click or do anything other than scroll, something spectacular has to happen." NYT click-through on interactive graphics: 10–15%; ~85% ignore tooltips and rollovers
• The Pudding — Easier scrollytelling with position sticky · Scrollama
• Chartbeat scroll-depth data (via Slate, RebelMouse) — ~37s average time on an article; 800–1,500 words → 40–55% completion, 2,000+ → 20–30%