Why your landing page should load before the coffee cools

Our hero has a rocket, drifting clouds and twinkling stars, and the page still ships almost no JavaScript. The trick is choosing what the browser has to do.

Draw it, don’t download it

The artwork is inline SVG, so it arrives with the HTML and needs no extra request.

Animate only what’s cheap

Browsers can animate transform and opacity without repainting the page, so that’s all we use:

.rocket {
  animation: hover 4s ease-in-out infinite alternate;
}

@keyframes hover {
  to { transform: translateY(-14px); }
}

Show the headline first

The headline is what visitors came to read, so it appears straight away. The rocket can join it a moment later.

Respect your visitors

Anyone who prefers reduced motion gets a still rocket:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

← All posts