# Building PlanetScale's new homepage Writing · March 2024 URL: https://www.edgarlr.com/posts/building-planetscale-homepage A deep dive into the process, design decisions, and technical implementations involved in building PlanetScale's new homepage In February, we launched a new [PlanetScale homepage](https://www.edgarlr.com/work/planetscale-homepage). This was such a fun project to work on and collaborate with the brand team before all the recent changes, that I wanted to dive into the process, design decisions, and all technical implementations involved in this project. ## Animating in view Multiple elements are animated across the page when they enter the screen. Almost all were built by combining CSS transitions, data attributes, and intersection observers. The `useIntersectionObserver` hook returns a `ref` for the element to observe, and an `inView` value passed to the element as `data-animate` attribute. Using tailwind we can check for when the value is `true` and change the styles to final values using CSS transitions to animate each element accordingly. ```tsx const AnimatedElement = ({ children }: { children: ReactNode }) => { const { ref, inView } = useIntersectionObserver({ threshold: 1, margin: '0% 0px -50%', // Triggers only onces it hits the middle of the screen }) return ( {children} ) } ``` In elements above the fold, the `useIntersectionObserver` hook was doing some unexpected flashing related to a mismatch with the initial state. Adding a prop for the initial value fixed it. ```tsx /initialValue/ export function useIntersectionObserver({ // ... initialValue = false } = {}) { const [inView, setInView] = useState(initialValue) //.. } ``` The `data-animate` attribute also stops loop animations after each left the viewport. ```css .meshGradient[data-animate='false'] .waves, .meshGradient[data-animate='false'] .blob { animation-play-state: paused; } ``` Something I read about in the [Crafting the Next.js Website](https://rauno.me/craft/nextjs#styling-data-attributes) article, and I've found extremely useful is using data attributes as an alternative to merging and flattening classes with something like [clsx](https://github.com/lukeed/clsx). Data attributes are really convenient while working with Tailwind, it reduces style conflicts, and the linter will pick duplicated classes more effectively since all classes can be on the same line. ```tsx /data-active/ /data-[active=true]/ /group-data-[active=true]/ const Component = ({ active, description, children }) => (
{children} {description}
) ``` ## Hero composition For the hero, [@ceciliorz](https://twitter.com/ceciliorz) wanted us to build something that felt like the next iteration of the PlanetScale gradient. Something that along with the pixel grid stars, could slightly give the vibe of Aurora Borealis. Since this component starts above the fold, I also wanted to make it as light and composable as possible so we can progressible enhance it. The hero is composed of multiple layers, each layer has different animation loops: