Scrollytelling Demo
This page demonstrates the scrollytelling engine. As you scroll through the narrative, the visualization on the left will update to reflect the current step in the story.
Welcome to the Story
Scrollytelling combines narrative text with dynamic visualizations. As you scroll, the chart updates to reflect each part of the story.
This technique is powerful for data journalism and complex explanations where you want to guide readers through information step-by-step.
Establishing the Baseline
Let's start by looking at the actual growth trajectory. From 2020 to 2025, we see steady progress — but is it enough?
The blue line shows what actually happened: consistent growth, but perhaps not as fast as we hoped.
The Projected Path
Now let's add the projected growth curve. This shows what analysts expected based on early trends and optimistic assumptions.
Notice how the two lines diverge over time. The gap between expectation and reality grows wider each year.
Mind the Gap
The growing gap between actual and projected performance tells an important story. It's not just about falling short — it's about understanding why reality diverged from expectations.
Was the projection too optimistic? Did unforeseen challenges emerge? This is where the real analysis begins.
Drawing Conclusions
Scrollytelling lets us build understanding incrementally. Each step adds context, and the visual updates reinforce the narrative.
This demo shows the basic capabilities. In practice, you might use more complex visualizations, animations, and interactive elements.
Technical Notes
This scrollytelling engine is built on react-scrollama and provides:
- IntersectionObserver-based step detection
- Progress tracking within each step
- Reduced motion support for accessibility
- Flexible layouts (left, right, full)
- Step variants for visual variety
See the source code in src/components/scrollytelling/ for implementation details.