Why
In 2020 I found out I was going to become a father, and I thought I would never have time for side projects again. We were in the second lockdown, so I couldn’t share the news in person: the site was the announcement.
What it does
Hand-drawn SVG illustrations, handwritten lettering, animations made by hand in CSS. The whole color scheme lives in a JSON file and changes with the story: blue or pink for the gender reveal, and a different look before and after the birth. There were polls, too. On the day, a commit to GitHub from the delivery room published weight and length and sent push notifications, emails and texts to everyone. Gaia was born on 12 February 2021.
Why Emotion
The site was so graphic that naming CSS classes was hopeless: what do you call the left whisker of a pacifier? CSS-in-JS let me write styles inline, media queries included, interpolate JavaScript variables straight into the styles, and trigger animations from code.
The talk
I turned what I learned into a talk at CSS Day 2022, Tu chiamalo se vuoi EmotionJS (in Italian). The verdict: great for very graphic pages, landings and flows seen once, where you get critical CSS for free; not for generic design systems or editorial sites, where a runtime dependency and painful upgrades cost more than they give. There is no silver bullet.
I later discovered I would have time for pet projects again, but that my daughter was way more fun.
