7 Lessons from My Mother That Inspired a Scrollytelling Tribute

This Mother's Day, I wanted to give my mum a gift that truly reflected who she was. Not flowers or chocolates, but a digital experience that captures her logic, her creativity, and her resilience. The result is a scrollytelling experiment — a virtual card that uses scroll-snap events and scroll-state queries to tell her story. It's a fitting tribute for a woman who turned chaos into order, and who taught me that web development is more than code: it's a way to make sense of the world.

Below are seven things you need to know about this project and the remarkable woman who inspired it.

1. Her Birth Was a Miracle of Survival

My mother was born in 1945 in a Kazakhstani hospital where the maternity ward shared space with discharged soldiers suffering from PTSD. Those men wandered in and out, terrifying patients and making labor even harder for my grandmother. When my mother finally arrived, she wasn't breathing. The staff subjected her to a bizarre "remedy" — alternating cold and hot water baths — that had no scientific basis. She survived not because of the help she received, but despite it. This early trauma shaped her lifelong quest to find logic in a world that seemed determined to be senseless.

7 Lessons from My Mother That Inspired a Scrollytelling Tribute — Source: css-tricks.com

2. She Found Meaning in Three Passions

As an adult, my mother channeled her survival instincts into three interconnected pursuits: photography, teaching, and computer programming. Through photography, she captured moments when chaos briefly harmonized into beauty. She used those images as teaching tools to break down complex ideas into digestible steps. And then she encapsulated those illustrated lessons in interactive software — long before the web existed. To me, this was the essence of web development: combining visuals, narrative, and interaction to create understanding.

3. She Inspired My Approach to Development

My mother's method of turning confusion into clarity directly influenced how I build digital experiences. She taught me to observe patiently, to find patterns, and to wrap everything in a story that people can follow. This scrollytelling card uses scroll-snap events to transition between frames — much like the way she would guide me through a lesson, one step at a time. Every scroll is a small revelation, just as every one of her lessons was a small victory over chaos.

4. The Tech Behind the Tribute

The card is built with CSS scroll-snap events and the experimental scroll-state queries. It currently works only in Chromium-based browsers (like Chrome and Edge). The core idea came from Roland Franke's deconstructed radial slice transition, where scrolling triggers smooth transitions between landscapes. I adapted that concept to tell my mother's story, placing her face in the foreground as background scenes shift through her life. The interactivity is deliberate: unlike real life, where we can't rewind or fix mistakes, this digital experience lets you pause, scroll back, and explore each moment.

5. My Son Met His Nana Through the Code

One of the most emotional moments came when my eight-year-old son watched the video demo. He never knew his grandmother — she passed away from cancer in 2011, before he was born. Yet as the scrollytelling unfolded, he commented on her expressions and asked questions about her life. For a brief moment, the code bridged a gap of more than a decade. It was bittersweet to realize that this is the closest interaction he could have with her, but also deeply meaningful.

6. It's a Gift That Keeps On Giving

This isn't a one-time gift. The scrollytelling card can be revisited, shared, and even remixed. I've released the CodePen publicly, so anyone can adapt the technique for their own mothers or loved ones. The underlying technology — scroll-snap events and scroll-state queries — is still evolving, but it represents a new way to tell stories on the web. By sharing the code, I hope to encourage others to create their own digital memorials or celebrations, turning personal history into interactive art.

7. Logic as Love

At its heart, this project is about love expressed through logic. My mother spent her life searching for sense in a senseless world, and she passed that passion on to me. Every line of code, every scroll-triggered transition, is a tribute to her method of survival. She didn't just endure — she transformed chaos into order, and she taught me to do the same. This Mother's Day, I'm not just giving a gift; I'm continuing her legacy one scroll at a time.

If you'd like to experience the card for yourself, try it on CodePen (Chromium browser required). Or watch the video demo with commentary by my son — it's a tour of a life that, thanks to technology, will never be forgotten.