A few days ago I shared how I learned scrollytelling to better communicate my PhD research. My tiny account got almost 300,000 views from just 2 videos (1, 2). I shared the tutorials and open-sourced the code, but the problem is that it was too technical. My blog runs on Astro, a web framework I’ve been using for years, so the tutorial was basically built around that. But not everyone manages their own website or doesn’t have a blog at all. So my tutorial was simply too hard to follow.
And it’s 2026, so people just asked: what’s the prompt? So I did turn my tutorial & source code into a single, ready-to-use prompt.
Instead of asking you to follow all the code, here are the 3 steps to turn your paper (or any paper) into a beautiful scrollytelling web page:
- Drop in the paper, or the data.
- Paste the following prompt.
- Just wait and iterate.
And done.
You can use any of these AI web builders: Lovable, Replit, Emergent, Bolt, AI Studio, v0. I tested it with this legendary paper, and it all turned out stunning!
And here’s the prompt:
I am attaching a scientific research paper. I want you to build an interactive, single-page “Scrollytelling” web application that translates the complex findings of this paper into an engaging, data-driven narrative for a general audience.
Please act as an expert frontend engineer and data journalist. Use modern web technologies (React, Tailwind CSS, and Framer Motion/Recharts/D3 depending on what you support best).
Here are the strict architectural and design requirements for the build:
1. Data and Narrative Extraction (The Content)
First, analyze the attached paper and extract the narrative and data. Do not hallucinate data; only use what is provided in the paper.
- The Core Narrative: Break the paper down into 5 to 8 sequential “Story Sections” (e.g., Introduction, The Problem, Methodology, Key Finding 1, Key Finding 2, Conclusion). Keep the text accessible but scientifically accurate.
- The Data: For each story section, extract the most compelling data point, statistic, or table.
- Data Structure: Extract all the chart data into a clean, separate JSON-like array/object at the top of the file (or a separate file) so it is not hardcoded directly inside the JSX.
2. The Scrollytelling Architecture (The Layout)
Build an immersive, creative scrollytelling layout. You have full creative freedom to architect whichever layout best serves the narrative impact of the paper. Choose from or combine approaches such as:
- Classic Sidecar: A split layout with scrolling text on one side and a sticky visualization on the other.
- Immersive Overlay: A full-screen, sticky background visualization where text blocks scroll over it in elegant, semi-transparent cards.
- Dynamic Interweaving: Layouts where visualizations start inline and expand to full-screen takeovers as the user scrolls, creating dramatic reveals.
- Section-by-Section Morphing: Mixing horizontal scroll sections, full-viewport snaps, or layouts that completely change structure depending on the data being presented.
Ensure ample vertical scrolling space (e.g.,
min-h-[150vh]per section) so the narrative pacing feels deliberate and the visual transitions have time to breathe.
3. Interactivity and State (The Engine)
- Implement an Intersection Observer (or a robust scroll-tracking hook) to detect which “Story Section” in the left column is currently active in the user’s viewport.
- Maintain a React state (e.g.,
activeSectionId) based on the scroll position. - As the
activeSectionIdchanges, the visualizations in the right (sticky) column must smoothly transition, animate, or redraw to reflect the data relevant to the text the user is currently reading.
4. Visualizations & Creative Science Communication
- Think Beyond Standard Charts: Don’t just default to boring bar or line charts. Act as a creative science communicator. Where possible, use visual metaphors, interactive diagrams, or abstract data art to make complex scientific concepts intuitive and memorable for a lay audience.
- Engaging Transitions: The charts and visual elements shouldn’t just instantly snap; they should animate fluidly when the active section changes (e.g., elements morphing, data points flying in, or abstract shapes reorganizing to tell the story).
- Creative Freedom: While the two-column layout is a great starting point, you have the creative freedom to break it if the narrative demands it. For example, you can implement full-screen immersive visual moments, fading text over background graphics, or changing color themes to represent different phases of the research.
5. Premium Design & Aesthetics
- The UI must look like a high-end data journalism piece (e.g., The New York Times, The Pudding).
- Use a curated, harmonious color palette (a sleek dark mode or a very clean, minimalistic light mode with a vibrant accent color). Avoid generic web colors.
- Use modern typography (e.g., Inter, Roboto, or a clean sans-serif) and clear visual hierarchy.
- Add subtle micro-animations (e.g., fade-ins for text, smooth transitions between sections).
- Responsiveness: Ensure the layout is responsive. On mobile devices, stack the layout so the visualization is sticky at the top or bottom of the screen (e.g.,
h-[40vh]) while the text scrolls over/under it.
Output Request:
Please generate the complete, working code for this scrollytelling experience based on the paper provided. Ensure the data arrays and text content are fully populated from the paper’s insights. Provide all necessary code, including components, data structures, and styles, so that I can immediately preview the result.
