Interactive Scrollytelling: A Virtual Mother's Day Gift for Mum (2026)

In this Q&A, we explore the creation of a unique scrollytelling Mother's Day gift for 2026—a tribute to the author's mother. Born in 1945 at the end of World War II, she survived immense chaos and later inspired the author's approach to life and development. The interactive card uses modern web technologies to let users scroll through her story. Below, we answer common questions about the project, its inspiration, and the technical details behind it.

What is the scrollytelling gift for Mother's Day 2026 and why was it created?

The gift is an interactive scrollytelling card built with scroll-snap events and scroll-state queries. It was designed specifically for Mother's Day 2026 to virtually bring the author's mother back to life. The author, a UI developer, wanted to honor his mum—who passed away in 2011 from cancer—by sharing her story through a cinematic, scroll-driven experience. The card only works in Chromium-based browsers because of the experimental CSS features used. It combines narrative and technology, allowing the user to explore her life through animated transitions and snap points. The author describes it as “UI mad science” and a personal way to reconnect with his mother, especially since his eight-year-old son never got to meet her. The project serves both as a tribute and as a technical exploration of modern web capabilities.

Who was the author's mother and what made her life remarkable?

The author's mother was born in 1945 in a hospital in Kazakhstan—the year World War II ended. She was Jewish, so her birth timing literally saved her from the Holocaust. However, her early life was marked by chaos: the hospital shared wards with discharged soldiers suffering PTSD, and she wasn't breathing at birth. Staff used a dangerous “remedy” of alternating cold and hot water immersion, which had no scientific basis. She survived despite, not because of, the help she received. Throughout her life, she faced famine, racism, and misfortune, but she developed a survival strategy: finding patterns and sense in the unfathomable. She pursued three passions—photography, teaching, and computer programming—to frame moments of beauty, break chaos into logical steps, and encapsulate lessons in interactive experiences. This skill set, which the author later recognized as web development, allowed her to create meaning from disorder.

How did the author's mother survive chaos and find patterns?

Her survival strategy was built on a combination of three passions:

• Photography: She framed moments when the chaos of her surroundings temporarily harmonized into beauty, capturing those fleeting harmonies.
• Teaching: She used her photographs to tell stories that broke down chaos into logical, understandable steps.
• Computer programming: She encapsulated those illustrated teachable moments within interactive experiences. Unlike real life, a programmed interaction could be debugged—problems could be traced and solved.

These three lenses allowed her to impose order on an unpredictable world. The author notes that this approach mirrors modern web development: using visuals to tell a story, structuring content logically, and building interactive interfaces. Her ability to find patterns became a core lesson she passed to her son, influencing both his personal philosophy and his professional work as a UI developer.

What technical aspects make this scrollytelling card work?

The card relies on CSS scroll-snap events and scroll-state queries, which are experimental features currently only supported in Chromium-based browsers. Scroll-snap events trigger animations when the user scrolls to specific snap points, creating a cinematic, step-by-step narrative. The author drew inspiration from Roland Franke’s deconstructed radial slice transition, which uses a similar scrolling mechanism to transition between scenes. The card is hosted on CodePen and includes a video demo narrated by the author’s eight-year-old son. Because the technology is not yet standardized, the project serves as both a personal gift and an experimental tech demo. The author notes that the scroll-state queries allow for detecting the user’s scroll position and dynamically updating the content, making the experience feel like a guided story rather than a static page. Fail gracefully—users on non-Chromium browsers see a static version or the video demo.

How did the author's son interact with the gift?

The author’s eight-year-old son provided the video demo commentary for the scrollytelling card. This was a bittersweet moment because his son never met his grandmother—she passed away in 2011, years before he was born. The demo shows the son explaining the interactive transitions and the story of his nana, offering a personal connection across generations. The author describes it as the closest his son has come to interacting with his grandmother. By having his son narrate, the author turned the technical demo into a family heirloom, blending technology with emotional legacy. The video also serves as a fallback for users whose browsers don’t support the scroll-state features, ensuring the story is accessible even without the full interactive experience.

What inspired the visual design of the scrollytelling experience?

The visual design was inspired by Roland Franke’s Pen showcasing deconstructed radial slice transitions using scroll-snap events. In that Pen, a figure sits in the foreground watching landscapes change, with smooth transitions triggered by scrolling. This resonated with the author because it reflected his mother’s patience in observing the world. He imagined her sitting calmly, watching life’s chaos, and then encapsulating it in short, interactive stories. The radial slice transition visually mimics the idea of breaking a scene into fragments and reassembling it—much like his mother’s approach to finding patterns. The author adapted this concept to tell a biographical narrative, replacing landscapes with chapters of his mother’s life. The result is a scrolling journey that feels both poetic and technical, honoring her legacy through code.

How does the author connect his mother's passions to modern web development?

The author explicitly sees his mother’s three passions—photography, teaching, and computer programming—as the precursors to web development. Photography corresponds to visual design (framing elements, aesthetics). Teaching corresponds to content strategy and storytelling (breaking complex ideas into digestible steps). Programming corresponds to interactive development (making those steps clickable or scrollable). Because she used these together long before the web existed, she effectively taught him the core skills of modern UI development. The author’s scrollytelling card is a direct application of this philosophy: it uses visuals (snap transitions), a logical narrative (scroll-driven chapters), and interactivity (scroll events) to tell her story. In the author’s view, his mother was a web developer avant la lettre, and this project is a homage to her prescient approach.