ScrollStories transform academic writing into immersive visual narratives. By combining scholarly depth with dynamic scrolling, they invite readers to experience research as a journey—guided by full-screen images, creative typography, and layered design.
Perfect for public humanities projects, digital history, or visual essays, ScrollStories make complex ideas accessible and engaging. Whether showcasing research findings, historical narratives, or cultural analysis, this format offers a powerful way to share scholarly work that feels both elegant and alive.
ScrollStories use components that respond to scrolling, creating a cinematic reading experience. The core techniques are background images with scrolling text overlays, backgrounds that switch as you scroll, and side-scrolling text panels that move horizontally while an image stays fixed. You can mix these freely with standard page elements—images, pull quotes, footnotes—to build a narrative rhythm that suits your content.
Each technique is documented with examples you can copy and modify. But the fastest way to learn is to look at the sample essays below, find effects you like, and adapt them.
We’ve created three template essays at increasing levels of complexity. Each uses the same content but demonstrates progressively more features. Open one, read through it, then duplicate the file and start replacing our content with yours.
The simplest ScrollStory. Section headings, body text, images with captions, pull quotes, and footnotes—a clean, straightforward layout that works well for a first attempt or for narratives that don’t need heavy visual effects.
Everything Seedling does, plus background images with text overlays and more varied layout patterns. This is where a ScrollStory starts to feel cinematic without requiring much extra effort.
The full range of what’s possible: background switching on scroll, side-scrolling text panels, and complex multi-section layouts. If you want to see every feature working together, start here and strip out what you don’t need.
Every Xanthan template includes a folder with all three sample essays, so you already have working examples to build from. If you don’t have a site yet, follow the getting started guide. Otherwise, duplicate a sample essay file, start editing, and consult the editing guides as questions come up.
If something isn’t working, see Troubleshooting.