Coding a Mother’s Day Tribute: A Scrollytelling Interactive Card for 2026

The Inspiration Behind the Gift

My mother was born into a world that seemed determined to prove itself senseless. In 1945, as World War II ended, she entered life as a Jewish baby in a Kazakh hospital where trauma was the norm. Soldiers recovering from PTSD wandered into maternity wards, and the chaotic environment nearly claimed her before she took her first breath. The staff resorted to a medieval temperature shock treatment—dunking her in cold and hot water—which, despite having no scientific basis, somehow worked.

Coding a Mother’s Day Tribute: A Scrollytelling Interactive Card for 2026 — Source: css-tricks.com

This pattern defined her early years: surviving not because of the support around her, but in spite of it. As a result, she developed a lifelong obsession with finding order in chaos—a trait that would later inspire a unique Mother’s Day gift in 2026: a scrollytelling interactive card built with modern web technologies.

My Mother’s Passions: A Blueprint for the Card

To recreate her spirit online, I drew from three interwoven passions that shaped her worldview:

Photography

She would frame moments where the chaos of her surroundings temporarily resolved into beauty. A snapshot of a calm street after a storm, or the quiet symmetry of a leaf—these were her visual anchors.

Teaching

She used those photographs to construct narratives—breaking down complex ideas into logical, digestible steps. Her lessons always started with a compelling image, then unfolded through clear progression.

Programming

Before the web existed, she encapsulated those illustrated stories into interactive experiences. If a programmed interaction failed, the error was traceable and fixable—unlike real life, where the scattershot of chaos often felt impossible to debug.

These passions essentially mapped out a web development skill set decades before HTML was invented. For the 2026 Mother’s Day card, I combined them into a single interactive story that you can experience through scrolling.

The Tech Behind the Scrollytelling Card

The card is built using CSS scroll-snap events and scroll-state queries, which currently work only in Chromium-based browsers. The core inspiration came from Roland Franke’s deconstructed radial slice transition—a Pen that uses scroll-snap to create eye-catching transitions between landscapes while a foreground figure remains seated, watching.

I adapted Franke’s concept to tell my mother’s story. As the user scrolls, snap events trigger smooth transitions between scenes: her birth, her survival, the moment she discovered photography, and the last image I have of her before cancer took her in 2011. The scroll-state queries handle responsive timing, ensuring the narrative unfolds at a pace that feels natural—like turning the pages of a photo album.

You can try the interactive card directly on CodePen (see the embedded demo below). For those on non-Chromium browsers, I’ve included a video walkthrough narrated by my eight-year-old son. It was bittersweet to realize that this card is the closest he has come to interacting with his grandmother, who passed before he was born.

A Personal Touch: Bringing Her Back to Life

The title of this gift—”bringing her back to life the only way I know how: UI mad science!”—is more than a gimmick. Each scroll snap is a homage to her patience in observing the world, then distilling it into something digestible. My son’s voice in the demo adds a layer of continuity: he giggles, points to the photos, and asks questions I cannot answer, because she is not here.

This project taught me that technology can bridge grief and memory. The card doesn’t replace her, but it captures the essence of how she taught me to find logic in chaos—one scroll at a time.

Try the Interactive Mother’s Day Card

Below you’ll find the CodePen embed featuring the scroll-snap interactions. If the embed fails to load, please watch the video demo (also linked) to see the card in action with my son’s commentary.

Note: This project uses experimental CSS features; Chromium browsers recommended for full interactivity.

Tags: