Bringing Mum Back Through Code: A Scrollytelling Tribute for Mother's Day 2026

Mother's Day 2026 is just around the corner, and one developer has crafted an extraordinary digital tribute that merges personal history with cutting-edge web technology. This interactive scrollytelling experience not only honors a beloved mother but also demonstrates how creativity and code can preserve memories in a deeply engaging way. Here we explore the story behind the gift, the inspiration drawn from a remarkable woman, and the technical innovations that bring it to life.

What exactly is this scrollytelling Mother's Day gift for 2026?

This gift is an interactive, scroll-driven web page that tells the story of the developer's mother through a combination of visuals, animations, and text. It uses scroll-snap events and scroll-state queries to create smooth, narrative-driven transitions as the user scrolls. The effect was inspired by Roland Franke's deconstructed radial slice transition, which uses scroll-triggered cuts between scenes. In this tribute, each scroll reveals a new chapter—from the mother's challenging birth in a Kazakhstan hospital in 1945, through her survival of chaos and cancer, to the lasting lessons she taught her son. The card is built with CodePen and currently works only in Chromium-based browsers due to reliance on experimental CSS features. A video demo is also available, featuring commentary from the developer's eight-year-old son who never got to meet his grandmother.

Who was the mother who inspired this tribute, and what was her story?

The developer's mother was born in 1945, the year World War II ended. Her birth took place in a Kazakh hospital where wounded soldiers with PTSD wandered freely among maternity wards, terrifying patients. She arrived not breathing, and the hospital's “remedy” was to plunge her into cold water, then hot, then cold again—a nonsensical procedure. Throughout her life, she survived not because systems helped her, but despite them: famine, racism, and misfortune all tried to take her. In 2011, cancer finally succeeded. But before that, she had become a woman who found patterns and meaning in chaos, a skill she passed down to her son. She combined photography to capture beauty in disorder, teaching to break down complex ideas into logical steps, and computer programming to create interactive experiences that made learning safe. The developer realized only later that her approach was essentially web development before the web existed.

Why did the developer choose to create an interactive card rather than a traditional gift?

The developer wanted to bring his mother back to life in the only way he knew: through UI mad science. Traditional gifts felt inadequate for someone who taught him that every problem can be deconstructed and solved—a lesson she modeled through her three passions. An interactive, scroll-driven experience mirrors her own method of observing the world, finding patterns, and then packaging that understanding into digestible stories. The developer draws a parallel: his mother used photos and code to make sense of chaos; he uses scroll-snap events and scroll-state queries to make her memory interactive. The card also serves a poignant purpose: it allows his eight-year-old son to interact with the grandmother he never knew. The video demo shows the boy narrating, making the gift a bridge across time. In a way, the card becomes a tangible expression of how her logic and love continue to shape his life and work.

What technical approach powers this scrollytelling experience?

The core magic comes from scroll-snap events and scroll-state queries. The developer adapted Roland Franke's concept of a deconstructed radial slice transition, where a foreground figure remains fixed while background landscapes swap in and out as you scroll. Here, each scroll position triggers a new “slice” of the mother's story—from her birth, through her teaching career, to the cancer diagnosis. The radial effect is achieved using CSS clip-path animations tied to scroll progress. The developer notes the project currently requires Chromium-based browsers (like Chrome or Edge) because scroll-state queries are experimental and not yet standardized across all browsers. The code is hosted on CodePen for others to fork or inspect. A fallback video demo shows the intended experience for those on other browsers. The project emphasizes how modern CSS and JavaScript can transform a simple scroll into a narrative journey, making the user an active participant in the story.

How did the developer's mother influence his approach to development and life?

His mother taught him that life is messy, but you can find order through observation, logic, and storytelling. As a photographer, she framed fleeting moments of beauty. As a teacher, she used those images to explain complex subjects step by step. As a programmer, she built interactive lessons that let him experiment safely—mistakes were traceable and fixable. The developer says this combination is essentially web development: you gather data (photography), structure it for users (teaching), and make it interactive (programming). Her experience surviving a chaotic world instilled in him a belief that even the most tangled problems can be unraveled if you apply logic and patience. In his tribute, he channels that philosophy: the scrollytelling card is a controlled environment where the chaos of loss is shaped into a coherent, interactive narrative. It's not just a gift; it's a living lesson from a woman who turned survival into an art form.

How can others experience this virtual Mother's Day gift for themselves or someone else?

Visit the CodePen link provided in the original article. The card is fully interactive if you use a Chromium-based browser (Chrome, Edge, Opera). Simply scroll through the page to see the radial transitions and story unfold. For those on other browsers, a video demo with narration by the developer's son captures the same emotional journey. The developer encourages anyone inspired by the concept to fork the CodePen and personalize it for their own mother or loved one—change the photos, rewrite the story, adjust the scroll triggers. The underlying code uses scroll-snap events and scroll-state queries, which are easy to adapt with basic CSS and JavaScript knowledge. The gift shows that you don't need expensive materials to create something deeply meaningful; all you need is a story, some code, and the willingness to experiment. This Mother's Day, consider making your own digital tribute—because sometimes the best way to remember someone is to let them live in an interactive experience.