Animated thumbnails

I recently re-built our component overview site with fully animated thumbnails to set a new tone in our product experience.

The component overview site is the second most clicked site on our website. In other words, it's one of the first touch points users start to engage with our product. This is why we invested a lot of effort into creating such a unique experience. It's a playful way for users to learn how our components work while it has high potential for virality and word-of-mouth.

I created all thumbnails using HTML/CSS with TailwindCSS for styling and Framer Motion for animation effects. Additionally, I used a little bit of SVG via Figma for the chart components.