PlanetScale homepage

PlanetScale

PlanetScale homepage

PlanetScale’s new homepage: an animated hero, a scroll-driven diagram, a responsive comparison table and a native-scroll features carousel — each with a reduced-motion counterpart.

Client
PlanetScale
Date
Site
planetscale.com
The PlanetScale homepage, showing the hero above the fold.

Hero

The layers the hero is composed of, each on its own animation loop.

Diagram

A tooltip being used to show longer texts on hover within a table cell.
Tooltips carry the longer copy so every cell keeps the same rhythm.
Sticky containers and intersection observers, pulled apart.

Comparison table

Three tables side by side. The first, for mobile, has two columns with headings on top of each row. The second, for tablet, has three columns with row headings on the left. The third, for desktop, has four columns with heading rows on the left.
The same table restructured for mobile, tablet and desktop.
Table headings, animating their gradient background-position on scroll.
Native scroll snap, no carousel library.

Reduced motion

Animation
A list of logos displayed in a two-row layout, horizontally centered.Motion reduced
The customer logo marquee reflows instead of scrolling when motion is reduced.
Animation
Motion reduced
Multi-level diagram animations collapse to fades.
The comparison table at three breakpoints.
Comparison table
A tooltip inside a table cell.
Tooltips
Customer logos in a two-row layout.
Customer logos
A cropped grid — every tile forced to the same shape.

I wrote up the process, design decisions and implementation details in Building PlanetScale’s new homepage.