# PlanetScale homepage

PlanetScale · February 2024
URL: https://www.edgarlr.com/work/planetscale-homepage

Built with the brand team. Animated throughout and built on native web APIs, with a reduced-motion path through all of it.

<Video
  src="https://cdn.edgarlr.com/planetscale-home/pscale-home-hero-cover.mp4"
  poster="https://cdn.edgarlr.com/planetscale-home/pscale-home.png"
  alt="The homepage hero — “The ultimate MySQL database platform” beside a tall gradient panel whose colour drifts from orange through red to blue."
  preload
  width={1920}
  height={1080}
/>

<Video
  src="https://cdn.edgarlr.com/planetscale-home/pshome-customers.mp4"
  poster="https://cdn.edgarlr.com/planetscale-home/pshome-customers.webp"
  alt="The customer highlight row — cards for Attentive, Barstool Sports and MyFitnessPal sliding across, each opening to its quote as it reaches the middle."
  width={1920}
  height={634}
  
/>



<Video
  src="https://cdn.edgarlr.com/planetscale-home/pscale-scroll.mp4"
  poster="https://cdn.edgarlr.com/planetscale-home/pscale-scroll.webp"
  alt="The architecture diagram building on scroll — a single flat slab under “Engineered to meet the most demanding data workloads”, rising into a stack of layers, then labelled Product, Features, Infrastructure, DevOps and Vitess."
  width={1920}
  height={1080}
/>






<Grid>
  <Video
    src="https://cdn.edgarlr.com/planetscale-home/pscale-lightbeam.mp4"
    poster="https://cdn.edgarlr.com/planetscale-home/pscale-lightbeam.webp"
    alt="The “Remove database distractions” section — “Focus on your business, not your config scripts” scrolling up into grouped capability lists for Scalability, Manageability and Workflow."
    width={1080}
    height={1080}
    
  />
  <Video
    src="https://cdn.edgarlr.com/planetscale-home/pscale-vitess.mp4"
    poster="https://cdn.edgarlr.com/planetscale-home/pscale-vitess.webp"
    alt="The Vitess section — “Built on the best of open source” beside a circuit-board illustration carrying the Vitess V, its gradient turning from orange to blue."
    width={1080}
    height={1080}
   
  />
</Grid>


<Video
  src="https://res.cloudinary.com/dhdttwvcp/video/upload/v1711102453/features-carousel_abu40v.mp4"
  poster="https://cdn.edgarlr.com/building-planetscale-homepage/features-carousel_abu40v.webp"
  alt="The features carousel — tabs for Dashboard, Monitoring, Performance, Developer workflow and Operations, each snapping a new screenshot and caption into place."
  width={1772}
  height={1530}
/>

<Video
  src="https://cdn.edgarlr.com/planetscale-home/pscale-home-footer.mp4"
  poster="https://cdn.edgarlr.com/planetscale-home/pscale-home-footer.webp"
  alt="The closing section — “The predictable, powerful MySQL database platform” above sign up and contact buttons, over the word “database” set large and faint behind it."
  width={1920}
  height={654}
/>





I wrote up the process, design decisions and implementation details in
[Building PlanetScale’s new homepage](https://www.edgarlr.com/posts/building-planetscale-homepage).