I built a running-car animation in the hero
When you open the top page of this site, "Reinvent Notes," a car running across the screen catches your eye. It is a key visual I built from scratch for the Docusaurus hero: I componentized SVG line art with React and drive the tire rotation and the background parallax entirely with CSS.
I used no flashy animation library — just svgr (bundled with Docusaurus) and pure CSS. It also follows the theme's light / dark switch, and for people who have prefers-reduced-motion enabled, it shows a still image.
I wrote this article with the goal that even someone who just started Web development can follow it to the end. So I explain from the basics, in order — "what is an SVG," "what is viewBox," "what is CSS mask" — and read the implementation on top of that foundation. It gets long, but I broke down each mechanism so it makes sense, so feel free to skip to whichever chapter interests you.
I adjusted the design after publishing, so I updated the text to match the current implementation. There are three main changes: I split the buildings into two layers and punched out the windows; I drew the street's signs, streetlights, and so on as line art like the car; and I fixed a problem where the background jumped at the loop seam. The third one in particular is a complete rewrite of the "infinite loop" chapter.