A personal and technical post combining a tribute to the author's late mother with a walkthrough of a scrollytelling Mother's Day card built using emerging browser APIs. The interactive CodePen demo uses CSS scroll-snap, scroll-snap events (currently Chromium-only), and scroll-state queries to create a day-to-night animated scene with randomized UFO physics. Code snippets show how scrollsnapchanging and scrollsnapchange events enable context-aware transitions between scenes. The post also touches on CSS randomness (coming to Safari) and draws parallels between the author's mother's photography, teaching, and programming philosophy and modern web development.
Table of contents
Try the interactive Mother’s Day cardWhy I made thisGamifying the experience of knowing my mumHow the scrollytelling Mother’s Day card worksIn case you found this while Googling for a conventional Mother’s Day gift idea…Sort: