Scrollbook

Context & Goal

For this school project, our brief was simple but ambitious: encourage teenagers to read more. Many teens associate reading with static, text-heavy pages that feel outdated compared to the rich, visual experiences they get from games, social media and streaming platforms. With Scrollbook, we set out to answer a question: how can we use modern web technology to make reading feel as immersive as the media they already love?

Our goal was not to replace books, but to create a bridge: an interactive preview experience that makes classic stories feel exciting and approachable again.

Concept

Scrollbook is a web experience where the scroll becomes the main storytelling device. As the reader moves down the page, the narrative is supported by timed animations, transitions and visual cues that highlight key moments, emotions and shifts in atmosphere.

To make the concept tangible, we chose two iconic titles that already resonate with different kinds of readers:

• The Lord of the Rings — epic fantasy, rich world-building and sweeping journeys.
• The Shining — psychological horror with a strong sense of tension and mood.

Each book gets its own scroll-based chapter that focuses on mood, pacing and immersion, rather than gamification or overwhelming visuals. The story remains central; the interaction is there to support it.

Roles & Responsibilities

As a team of 2, we were responsible for everything from concept to implementation: UX, UI, interaction design and development. Our focus was on front-end architecture, smooth animations and ensuring that the interactive elements remained performant and accessible.

Technology Stack

We built Scrollbook with a modern stack suited for interactive storytelling:

• Nuxt.js to structure the project, handle routing and give us a solid Vue-based framework.
• Vanilla JavaScript for custom logic and fine-grained control over scroll interactions.
• ScrollMagic to orchestrate scroll-based scenes, triggers and timelines.
• CSS for layout, typography and motion design, including transitions and subtle hover states.

This combination allowed us to combine declarative components with low-level control over animation timing and scroll behavior.

Interaction & Experience Design

For The Lord of the Rings, we leaned into grand, cinematic motion. As the user scrolls, scenes transition from peaceful Shire greens to darker, more dramatic environments. Parallax movement, fades and scale changes follow the rhythm of the narrative. The goal is to give a feeling of stepping into a journey — without ever turning it into a game.

For The Shining, we focused on tension and unease. The animations are slower and more restrained: shadows lengthen, colors desaturate, and subtle motion suggests that something is “off” even before the text says so. The scroll becomes a way to build suspense, mirroring the pacing of a horror novel.

Across both experiences, we kept a few principles in mind:

• The text must always remain readable and central.
• Animations should support the mood, never distract from the story.
• Performance and smoothness are crucial; stutters break immersion immediately.

Implementation Details

Using ScrollMagic, we defined scenes that are tied to specific scroll positions. Each scene controls a combination of CSS classes, transforms and opacity changes, allowing us to chain micro-animations together into a coherent narrative flow.

Nuxt.js 2 provided routing and a clean component structure. Each “chapter” of a book is split into reusable sections, so we can iterate on layout and motion without breaking the whole page. JavaScript handles the glue: linking ScrollMagic scenes to DOM elements, syncing animation states and ensuring that everything responds smoothly as the user scrolls.

On the styling side, we paid special attention to typography and contrast. Since our target audience is teenagers reading on various devices, we optimized for legibility, comfortable line lengths and high-contrast color palettes that still match each book’s tone.

Challenges

One of the main challenges was balancing interactivity with readability. It’s easy to over-design: too many effects quickly turn the experience into a demo rather than a story. We had to iterate multiple times on pacing, animation speed and density. Some of the earlier versions were visually rich but made it harder to focus on the text — those were dialed back.

Performance was another key challenge. Scroll-based animations can become janky on lower-powered devices if not implemented carefully. We optimized by:

• Limiting heavy effects.
• Reusing transitions where possible.
• Minimizing layout thrashing.
• Keeping our DOM and CSS structure as lean as possible.

Outcomes & Learnings

User tests with classmates and younger students showed that the interactive format made the books feel “cooler” and “more like a movie,” while still encouraging them to read the text. Many users mentioned they were more curious about the full story after experiencing the Scrollbook previews.

From a development perspective, Scrollbook taught us how powerful scroll-based storytelling can be when treated thoughtfully. We learned to:

• Use animation as a storytelling tool, not just decoration.
• Embrace a component-based architecture even in experimental projects.
• Think carefully about performance from the very first design decisions.