My mum cherished logic as a result of she was born at a time when nothing made sense. She was born in 1945, the yr World Battle II ended, so she dodged a literal bullet as a result of we’re Jewish. However from the primary day of her life, she discovered that famine, racism, and misfortune stored making an attempt to take her away. In 2011, most cancers took her away from me without end. However on a lighter notice, this Mom’s Day I’m bringing her again to life the one method I understand how: UI mad science!
I’ll clarify how my mum impressed this 2026 Mom’s Day scrollytelling experiment — but additionally, how she impressed my method to dev and life. Alongside the way in which, I’ll focus on a few of the tech concerned on this digital Mom’s Day reward. I usually write both inspirational or technical posts — however for Mom’s Day, you’re getting a twofer.
Attempt the interactive Mom’s Day card
Right here’s the CodePen, which makes use of scroll-snap occasions and scroll-state queries, so it would solely work in Chromium-based browsers for the time being.
Alternatively, right here’s a video demo with commentary by my eight-year-old. It was bittersweet to understand that that is the closest he has come to interacting along with his nana, as a result of she handed earlier than he was born.
Why I made this
Mum was born in a hospital in Kazakhstan, the place civilian sufferers shared wards with discharged troopers struggling PTSD. They wandered out and in of the maternity rooms, terrifying the sufferers and making labour even more durable for my grandmother.
When Mum was born, she wasn’t respiration. The workers immersed her in chilly water, then scorching, then chilly water once more — a so-called treatment on the time primarily based on no science. This was the start of a bigger sample in her life: She stored surviving not due to the assistance she obtained, however regardless of chaos disguised as assist.
So, as an grownup, Mum realized to outlive by discovering patterns and sense within the unfathomable. She completed this by combining her three passions:
- In images, she framed moments when the chaos of her environment quickly harmonized into magnificence.
- In instructing, she used these pictures to assist inform a narrative that broke the chaos into logical steps folks may comply with.
- In pc programming, she encapsulated these illustrated teachable moments inside interactive experiences. Not like in actual life, if a programmed interplay goes mistaken, you’ll be able to hint why and resolve the issue.
In different phrases, she educated me by utilizing the talent set I now consider as net improvement—earlier than the online existed.
Gamifying the expertise of realizing my mum
I drew inspiration from Roland Franke’s deconstructed radial slice transition utilizing scroll-snap occasions. Roland’s Pen showcases eye-catching, scroll-triggered transitions between landscapes as a determine sits within the foreground watching. This made me consider the endurance my mum put into observing the world—however then she’d encapsulate every thing briefly, interactive tales I may digest as a younger baby.
I’m symbolizing that have in my Mom’s Day sport with the scroll-triggered time-lapse animation of day to nighttime, stylized with CSS shapes. Utilizing a single scroll gesture, we grasp the gist of a complete day. That have is like the way in which my mum may clarify a giant matter to me in a method that felt like play.
My mum taught me that video video games don’t need to be about blowing issues up. She as soon as used QuickBASIC to construct a images sport lengthy earlier than Pokémon Snap existed. I keep in mind passing a store within the 90s with Armor Alley taking part in in demo mode within the window. I used to be clearly fascinated, however my mum stated, “I don’t prefer it. The helicopter began it,” then she went residence and constructed her images sport for me to play as an alternative.
She as soon as instructed me a narrative about images from her childhood within the Soviet Union. She remembered taking a photograph of a authorities constructing simply because it regarded cool, however a soldier noticed her and confiscated the roll of movie from her digicam. Possibly the lesson was that exposing the truth of one thing might be simply as a lot of a menace as taking pictures issues within the militaristic sense of the phrase.
The violence frequent in video games is a metaphor for the uncertainty and randomness we face in life, however my mum’s images sport taught me that violence isn’t the one method of dealing with that drawback, even in a sport.
My mum impressed the randomness of the UFOs on this experiment together with her capacity to make use of a digicam to seize the fleeting moments of sense in a chaotic world.
The mixture of deterministic scroll-triggered animations with the randomness of the UFOs and textual content physics is feasible utilizing alien know-how I’ve not seen used a lot within the wild: scroll-snap occasions. This emergent module — accessible solely in Chrome and Opera on the time of writing — gives a easy JavaScript API in order that after we model the web page to snap between the day and night time scenes, we will set off habits that isn’t potential in CSS alone, just like the random flight paths of the UFOs, and the Pretext-inspired impact of the UFOs repelling letters because the spaceships fly via the textual content.
Sidenote: Randomness in CSS is coming, nevertheless it solely works in Safari for now.
Right here’s the CSS to allow scroll snapping:
/* The scroll container */
physique {
overflow-y: auto;
scroll-snap-type: y necessary;
}
/* Every snap goal */
.snap-panel {
scroll-snap-align: begin;
scroll-snap-stop: all the time;
}…and the JavaScript to deal with scroll snap occasions:
// scrollsnapchanging fires whereas the consumer is scrolling —
// snapTargetBlock is the panel they're heading towards.
snapScroller.addEventListener('scrollsnapchanging', ({ snapTargetBlock }) => {
markPanelStates({ energetic: selectedPanel, incoming: snapTargetBlock });
if (snapTargetBlock === dayPanel) onScrollingTowardDay();
if (snapTargetBlock === nightPanel) onScrollingTowardNight();
});
// scrollsnapchange fires as soon as a panel has snapped into place —
// snapTargetBlock is the panel now totally in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
selectedPanel = snapTargetBlock;
markPanelStates({ energetic: selectedPanel, incoming: null });
if (snapTargetBlock === dayPanel) onLandedOnDay();
if (snapTargetBlock === nightPanel) onLandedOnNight();
});You possibly can see that dealing with these occasions lets us create context-aware transitions between the 2 scenes, relying on the state of the sport logic when the consumer slides between day and night time and again once more. My mum would all the time give me one other probability to get issues proper.
In case you discovered this whereas Googling for a traditional Mom’s Day reward concept…
Parting phrases: Within the unlikely occasion that your mum just isn’t into avant-garde selfmade digital items that showcase emergent browser options, get her a Kindle or one thing. I purchased my mum a Kindle when she was alive. We’d learn the identical novel individually on our Kindles, then we’d evaluate notes over the cellphone on the times I couldn’t go to.
Blissful Mom’s Day, everybody!
