In this Q&A, we explore the story behind a unique interactive Mother's Day gift: a scrollytelling card that resurrects the memories of a beloved mother through web design. The creator, a developer, combined personal history with modern UI techniques to craft an homage that spans grief, technology, and love. Below, we answer the most pressing questions about this project.
Who was this scrollytelling gift for and why was it created?
This interactive card was created for the developer's mother, who passed away from cancer in 2011. She was born in 1945, the year World War II ended, and as a Jewish person, she narrowly escaped the horrors of the Holocaust. Her early life in post-war Kazakhstan was marked by chaos—she survived a brutal cold-water revival at birth, witnessed PTSD-ridden soldiers wandering hospital wards, and later faced famine and racism. The developer wanted to give her a voice again, not through traditional memorials, but by using his skills in UI design to build a scrollytelling experience that captures her spirit. It’s a way to let her live on through code, just as she taught him to find logic in the illogical.
What was the mother's background and how did it shape her worldview?
Born in a Kazakhstan hospital where civilian patients shared space with traumatized soldiers, her life began in utter disarray. After she emerged from a dangerous birth, doctors subjected her to a baseless shock treatment of cold and hot water. This pattern continued—she survived despite the help, not because of it. As a coping mechanism, she became a pattern-finder, seeking sense in nonsense. She channeled this through three driving passions: photography (framing moments of beauty in chaos), teaching (breaking down stories into logical steps), and computer programming (creating interactive experiences where errors could be debugged, unlike real life). These three pillars became her toolkit for navigating an unfathomable world, and ultimately, the foundation of the developer's own career.
What were the three passions that helped her make sense of chaos?
Her three passions formed a self-reinforcing cycle: Photography let her freeze fleeting moments when chaos temporarily resolved into harmony. Teaching let her use those images to tell stories that could be understood step by step. Computer programming then allowed her to encapsulate those illustrated lessons into interactive experiences—ones where bugs could be fixed and outcomes controlled, offering a stark contrast to the randomness of her early life. Together, these created what the developer now thinks of as pre-web web development: a world where logic, beauty, and interactivity could make sense of the senseless. She used these tools not just to survive, but to educate her son, long before the internet or modern UI existed.
How did the creator turn these passions into a web experience?
He drew inspiration from Roland Franke's deconstructed radial slice transition, which uses scroll-snap events to create eye-catching transitions between scenes. In Franke's demo, a seated figure observes changing landscapes. The developer saw his mother in that figure—always patiently observing the world. So he reimagined the concept as a gamified experience where scrolling triggers visual narratives that illustrate her life: the chaos of her birth, her love of photography, her teaching moments, and her programming legacy. Each slice of the radial transition reveals a new layer of her story. The result is a heartfelt, interactive homage that lets viewers scroll through her life as if they were peeling back time itself.
What technologies were used in this interactive Mother's Day card?
The card relies on CSS scroll-snap events and scroll-state queries, which are currently only fully supported in Chromium-based browsers like Chrome and Edge. The developer built it in CodePen, embedding a live demo along with a video walkthrough narrated by his eight-year-old son—a poignant detail, since his son never met his grandmother. The project primarily uses modern CSS for the transitions and JavaScript for scroll-based updates. While the tech is cutting-edge, the emotional core is old-fashioned: it’s a love letter from a son to his mother, written in the medium she would have appreciated most—code that makes sense of the senseless.
What was the significance of this project for the creator and his family?
The project is deeply personal: it’s the closest the developer's eight-year-old son will ever come to interacting with his grandmother, who died before he was born. Watching his son play with the card brought a bittersweet realization—that through this digital creation, a boy can scroll through his nana's life, trigger her stories, and feel a connection that would otherwise be impossible. For the developer, it’s also a way to process grief. By building something interactive, he can share who she was—not just a series of facts, but a woman whose logic and creativity live on in every line of code. It’s a gift that keeps giving: every scroll is a small act of resurrection.
How does the scrollytelling experience work visually?
Visually, the card uses a radial slice transition: as you scroll, the screen splits into wedge-shaped segments that rotate or expand to reveal the next scene. Each slice is tied to a specific story from her life—like her childhood, her photography, or her programming efforts. The scrolling feels like turning the pages of a living scrapbook, with each motion unlocking a new memory. The background shifts between abstract representations of chaos (hot/cold, dark/light) and moments of clarity (a framed photograph, a clean interface). It’s not just a passive viewing experience; it’s an invitation to explore a life, one frame at a time. The developer promises it works best in Chromium browsers, but even the video demo conveys the magic.