Building the animated hero

In this part we will work on building out the main hero of the homepage, including all of its amazing micro animations. And believe it or not, all of these animations are done with plain old CSS animations!

Code on Github
🧑‍💻 🎥
... Almost ready!

What you'll learn

This video is part of a multi part series in which we are going to rebuild Linear's homepage with Next.js 13 and Tailwind. Part one is all about setting up Next.js and Tailwind, and creating the main page structure, the main navigation (including a nice animation on mobile), and the footer. In the next parts we will slowly work down the page and start adding more and more details.