Scrollytelling Narrative · 2026 Design Direction

SCENE 01 · BRANCHING UPFRONT

Pick a perspective

Pudding's IVF interactive lets the reader choose Parent vs. Child path. Each path uses distinct color accent throughout. This is the "branching upfront" pattern — same dataset, two emotional registers.

PATH A · #4A6B3D

The reader's perspective

You're the one scrolling through the data. The narrator addresses you directly. Color accent: forest green throughout.

PATH B · #C95F4F

The subject's perspective

You're inside the story being told. The data refers to your past. Color accent: rust bloom throughout.

    Picking a path changes the accent color of every scene below ↓
  

SCENE 03 · MAP-STAYS-PINNED, TEXT SCROLLS

A persistent visual anchor

NBC Detroit Segregation Wall, Bloomberg Manhattan Mansions, Pudding Happy Map. Fixed visual on one side; text drives scroll on the other; the visual updates as text scrolls past.

1930

The wall is built

The map stays in place. The text scrolls. The reader experiences chronology by scrolling — the visual is the anchor; the text is the time. Markers appear as you scroll past.

1955

Demographics shift

A second marker appears. The reader didn't click — they scrolled. The narrative builds the visual.

2019

Present-day legacy

The third marker. Now the full picture is visible. The reader has assembled the history through scroll.

SCENE 04 · SCROLL-AS-TIME

2026

YEAR · INCREMENTS WITH SCROLL POSITION

Stuff NZ Pandemic pattern: scroll position equals date. Counter increments visibly. The reader experiences the passage of time at their own pace.

SCENE 05 · GUIDED-THEN-EXPLORE

First the narrative builds the artifact.
Then the reader explores it.

Bloomberg Big Take pattern. The scroll-driven narrative builds a network diagram, dataset, or map. After the guided sequence, the reader gets free-exploration mode.

→ FREE-EXPLORE MODE · GUIDED SEQUENCE COMPLETE

REFERENCE 01 · PALETTE (VARIANT A · EDITORIAL-AUTHORITY)

Three palette variants per content

This direction is architecture-first, so palette is variant-driven. Variant A (NYT/Bloomberg editorial) shown here. Variants B (Apple product-launch) and C (Pudding-editorial) follow same architectural rules with different color anchors.

bg-narrative

#FFFFFF

bg-scene

#0A0A0A

text-primary

#1A1A1A

text-narrator

#6B6B6B

data-cool

#00A0DC

data-warm

#FF6B35

highlight-dot

#FFE066

REFERENCE 02 · TYPOGRAPHY

Editorial authority + JetBrains Mono labels

Editorial display: Tiempos Headline (Bold) or Cheltenham (NYT-classic) at 48-96px. Body: Tiempos Text or Söhne at 18-20px (LARGER than other directions for long dwell time). Caption: Söhne Mono for numbers / dates / source citations.

MOODBOARD SUBSTITUTE: Source Serif 4 (Google Fonts, optical-size variable font) carries editorial display + body. JetBrains Mono for caption.

REFERENCE 03 · FIVE SIGNATURE MOVES

Architecture patterns demonstrated above

SIG 01

Scroll-locked section pinning

Page pins for 1.5-3s at threshold while inner animation completes. Demonstrated in Scene 02 — three sub-headlines fired by scroll position.

SIG 02

Branching upfront

User picks perspective on first scroll; each path uses distinct color accent throughout. Demonstrated in Scene 01 — pick Path A or Path B.

SIG 03

Map-stays-pinned narrative

Fixed visual anchor with text driving scroll; map updates as text scrolls past. Demonstrated in Scene 03 — markers appear as you scroll.

SIG 04

Scroll-as-time counter

Chronological narrative shows visible counter (date / year / event count) incrementing with scroll. Demonstrated in Scene 04 — year increments with scroll position.

SIG 05

Guided-then-explore endpoint

Narrative builds an artifact (graph / map / dataset); reader gets free-exploration mode at end. Demonstrated in Scene 05 — the network diagram is the artifact.

REFERENCE 04 · ANTI-PATTERNS

What this architecture refuses

✕"Above the fold" thinking — this aesthetic ASSUMES long scroll

✕Auto-scrolling (user must control scroll velocity)

✕Excessive scroll hijacking that prevents normal scroll

✕Smooth-scroll libraries that fight native scroll

✕Mobile that doesn't preserve scroll architecture (not just shrink)

✕Audio that auto-plays with sound on first scroll

✕Animations that fire repeatedly on scroll back (use IntersectionObserver once: true)