Build Your Interactive
Modules 1 through 5 are the complete curriculum. Module 6 is for participants who want to build the most ambitious output type in the storytelling toolkit: an editorial-tier scrollytelling interactive at a public URL. You will use Claude Code to populate a pre-built starter kit with your own data and narrative.
Requires comfort with Claude Code or a willingness to direct AI through code generation in a terminal.
How to Build
Seven steps from concept to live URL.
Study the reference
Open Vanishing Earth and read through it as a reader before building as a creator. Then study one of the NYT, Guardian, or Bloomberg examples. Notice how scrolling controls the pace, how data reveals at the moment of maximum impact, and how the visual tone matches the value frame.
Create your own copy of the starter kit
GitHub templateGo to the starter kit on GitHub and click "Use this template" → "Create a new repository". This creates a clean copy under your own GitHub account — your own codebase, your own story. Do not clone the original repository directly.
Find your data
You need 3 to 5 verified data points — one hero metric per section. Your Ground Truth Document from Module 5 is the ideal source. If you are starting fresh, use one of the four real climate datasets from the Live Lab: each has sources, a hero metric, and a verified brief ready to go.
Plan your build here
Do this before buildingOpen the Build Planner and complete all four exercises. Map your Story Spine beats to scroll sections. Choose your visual tone from your value frame — this generates the CSS variables. Run the pre-flight checklist. The playground builds your Claude Code prompts automatically from your inputs.
Set up Claude Code
Claude Code recommendedInstall Node.js 18+, then Claude Code globally. Authenticate with your Claude Pro account. You can also use Cursor's inline chat or any AI code editor — but Claude Code in the terminal gives you the most control and the prompts in this playground are written for it.
Open your repo and build with Claude
Clone your copy of the repo to your machine. Run pnpm install, then pnpm dev to see the template in your browser. Open Claude Code with the claude command from inside the project folder. Paste the prompts from Step 4 — one at a time. Review in the browser after each one. Budget 3 to 5 rounds of review per section.
git clone https://github.com/YOUR-USERNAME/YOUR-REPO cd YOUR-REPO pnpm install pnpm dev # In a second terminal: claude
Deploy to Vercel
Free on Vercel Hobby tierPush your changes to GitHub. Connect your repository to Vercel — it detects the Qwik framework and deploys automatically. Every future push to main triggers a new deploy. Follow the step-by-step guide for the full walkthrough including custom domains.
What this module covers
Scrollytelling Mechanics
Scroll as narrative pacing. Progressive data revelation. Typography and visual hierarchy as emotional calibration.
The Pipeline Feeds the Interactive
Ground Truth becomes the data layer. Story Spine becomes section structure. Value frame becomes visual tone.
The Starter Kit
Qwik + D3 + Tailwind with scroll mechanics and deployment pre-built. Edit one file and the entire page updates.
Playground
Starter Kit
Vanishing Earth
The worked example and cloneable template. Five tipping-point ecosystems. Edit one file — everything else is pre-built.