My mum cherished logic as a result of she was born at a time when nothing made sense. She was born in 1945, the 12 months World Struggle 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 attempting to take her away. In 2011, most cancers took her away from me ceaselessly. However on a lighter word, this Mom’s Day I’m bringing her again to life the one manner 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 number 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.
Strive the interactive Mom’s Day card
Right here’s the CodePen, which makes use of scroll-snap occasions and scroll-state queries, so it’s going to 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 grasp that that is the closest he has come to interacting together 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 tougher 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 based mostly 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 pictures, she framed moments when the chaos of her environment quickly harmonized into magnificence.
- In educating, she used these photographs to assist inform a narrative that broke the chaos into logical steps individuals may comply with.
- In laptop programming, she encapsulated these illustrated teachable moments inside interactive experiences. Not like in actual life, if a programmed interplay goes unsuitable, you may hint why and remedy the issue.
In different phrases, she educated me through the use of the ability set I now consider as net growth—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 all the things in brief, interactive tales I may digest as a younger little one.
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 manner 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 pictures 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 pictures sport for me to play as an alternative.
She as soon as advised me a narrative about pictures from her childhood within the Soviet Union. She remembered taking a photograph of a authorities constructing simply because it seemed cool, however a soldier noticed her and confiscated the roll of movie from her digital camera. Perhaps the lesson was that exposing the truth of one thing may be simply as a lot of a menace as capturing issues within the militaristic sense of the phrase.
The violence widespread in video games is a metaphor for the uncertainty and randomness we face in life, however my mum’s pictures sport taught me that violence isn’t the one manner of dealing with that drawback, even in a sport.
My mum impressed the randomness of the UFOs on this experiment together with her capability to make use of a digital camera to seize the fleeting moments of sense in a chaotic world.
The mix 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 — obtainable solely in Chrome and Opera on the time of writing — gives a easy JavaScript API in order that once we model the web page to snap between the day and night time scenes, we will set off conduct that isn’t doable 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 by means of 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: at all times;
}…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({ lively: 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 absolutely in view.
snapScroller.addEventListener('scrollsnapchange', ({ snapTargetBlock }) => {
selectedPanel = snapTargetBlock;
markPanelStates({ lively: selectedPanel, incoming: null });
if (snapTargetBlock === dayPanel) onLandedOnDay();
if (snapTargetBlock === nightPanel) onLandedOnNight();
});You’ll be able to 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 at all times give me one other likelihood to get issues proper.
In case you discovered this whereas Googling for a standard Mom’s Day reward concept…
Parting phrases: Within the unlikely occasion that your mum just isn’t into avant-garde do-it-yourself 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 examine notes over the cellphone on the times I couldn’t go to.
Glad Mom’s Day, everybody!
