How to Over-Engineer a Baby Announcement
12th August 20205 minute read
How did you start the pandemic? Just 2 days before the start of the UK-wide lockdown back in March I was sat in my lounge one morning, trying my best to understand what was happening to the world when I got a shout from my wife, Lucy, from upstairs. I found her outside the bathroom beaming from ear-to-ear, holding a certain prophetic message inscribed in chemistry, that in 9 months time, we would be parents.
As the world was descending into chaos we had a secret to keep for a while, but eventually we would need to tell our friends and family. Here began the baby announcement plans.
I’m a software engineer, and I do love to solve problems with technology, so much so that I knew this baby announcement malarkey needed, no, deserved to be massively over engineered.
I began by brainstorming. After ruling out my dabbling in robotics, and concluding my recent foray in becoming a mobile game publisher as a Christmas present for my brother was a step too far, I decided to ground things a little by continuing my venture into pixel-art and storytelling.
Undoubtedly, the best game of all time is Pokemon. Specifically, the original Pokemon Red/Blue release on the gameboy original. The graphic style, fade-in animations, storying telling through “speech boxes”, and that unforgettable introduction scenes - it was a groundbreaking visionary masterpiece for it’s day. I wanted to emulate that success in my own graphical retelling our own journey and this new chapter. This is the style I wanted to aim to capture the feel of;
After deciding on our key points; meeting each other, getting engaged, married, buying our first home, and now this new chapter I story-boarded them before reaching out to an old artist friend, Archipix to turn my vision into reality, and boy did he deliver! Individual assets were animated into 6 key frames and delivered as jpegs in true 16 bit colour art - I intended to bring that old Pokemon style art to full life.
Now the real challenge began. I had the plan, the story board, assets and the all important motivator - a 2 week deadline. I decided a microsite as the best delivery medium, primarily because it’s so easily shareable over a mobile app. Now I needed to bring these animations to life in the form of a webpage that is equally impactful on all devices, from mobile, tablet to desktop. Furthermore I needed a tech stack that is going to enable me to manage the scene transition and other page interactions, and finally a way of managing the animations beyond the minor 6 keyframe animations such as a falling chimney, fade effects etc.
Having worked on a small variety of React/React Native projects and wanting to seize the opportunity to further develop my working knowledge of the framework, I chose React as the frontend framework for the job. In all honesty, I know this probably is an overkill for this type of project, but equally when I’m working on “unimportant” projects, deciding to use it at a learning opportunity is a very worthwhile reason.
I chose to use:
After deciding on our key points; meeting each other, getting engaged, married, buying our first home, and now this new chapter I story-boarded them before reaching out to an old artist friend, Archipix to turn my vision into reality, and boy did he deliver! Individual assets were animated into 6 key frames and delivered as jpegs in true 16 bit colour art - I intended to bring that old Pokemon style art to full life.
Now the real challenge began. I had the plan, the story board, assets and the all important motivator - a 2 week deadline. I decided a microsite as the best delivery medium, primarily because it’s so easily shareable over a mobile app. Now I needed to bring these animations to life in the form of a webpage that is equally impactful on all devices, from mobile, tablet to desktop. Furthermore I needed a tech stack that is going to enable me to manage the scene transition and other page interactions, and finally a way of managing the animations beyond the minor 6 keyframe animations such as a falling chimney, fade effects etc.
Having worked on a small variety of React/React Native projects and wanting to seize the opportunity to further develop my working knowledge of the framework, I chose React as the frontend framework for the job. In all honesty, I know this probably is an overkill for this type of project, but equally when I’m working on “unimportant” projects, deciding to use it at a learning opportunity is a very worthwhile reason.
I chose to use:
- react
- react-router for navigation
- react-cookie for a basic persistent storage of state (if someone shares the last scene the new user is sent to the start, others are sent to the scene the router determines),
- CSS3 animations, to animate the scenes
- ness-css for some of the retro-style animations
- Baby Announcement site:
- https://loading.mckirgan.com
- Code on Github:
- https://github.com/kirgy/baby-announcement
Let's connect
Designed, coded & copyright NybbleMouse Limited, copyright 2023. Company number: 09769539