Skip to content
Website

playdeltav.space

Every rocket launch on Earth, counting down live

playdeltav.space is Delta-V’s companion site. It has live launch countdowns, the International Space Station’s position as it moves, live distances to every planet, 60 rockets, an almanac for every day of the year and a merch shop.

playdeltav.space, the live site

Fig. 01The playdeltav.space console, counting down every launch on Earth.The screenshot links to the live site.

01Brief

The problem

Delta-V is a game where you build a spaceship and fly it between planets, so we wanted its website to be about real spaceflight too. The tricky part is that most of the numbers on it go out of date within seconds, and each one goes stale at a different speed.

rockets, each with its flight history
60
days in the almanac, one page each
366
seconds between space station updates
10

The live site has more than 500 pages, and the rockets in the registry have flown more than 5,000 times between them.

02Process

The build

01ALMANAC PAGE DESIGN

366DAYS

Dia. 01One page design makes a page for every day of the year, 366 of them counting the leap day. Each day lists what happened on it and links to the launches and rockets involved.
  1. Each number refreshes on its own schedule

    The space station travels about 77 kilometres in ten seconds, so its position is fetched again every ten seconds. If it were held for a minute, the page would show the station 460 kilometres behind where it really is. Launch times, planet positions and the almanac each refresh on their own schedule for the same reason.

  2. Planet positions worked out live

    Planet distances are worked out from each planet’s orbit when you load the page, so it can say where every planet is right now and why that differs from the average distance people usually quote. The globes are drawn before the page is sent, so there are no map pictures to download.

  3. Rockets, an almanac and a launch list

    There are 60 rockets with their flight histories, a 366-day almanac of what happened on each date and a list of upcoming launches you can add to your calendar. It all comes from one set of data, and every page links to the pages related to it, so the site shows up for a lot of very specific searches.

  4. A real Shopify shop

    The supply depot is a real Shopify shop, with products, a cart and Shopify’s own checkout. Products are managed in Shopify as usual, and the shop’s design is entirely ours.

  5. Share images and calendar files

    Each launch gets its own share image, launches can be added to your calendar, and search engines hear about new pages straight away.

03Pages

These are screenshots of the live site.

Fig. 02The live page, where each reading refreshes on its own schedule.
Fig. 03The planets page, with each distance worked out when you load it.
Fig. 04The launch list, which you can filter, with a calendar file for every launch.
Fig. 05The rocket registry, with 60 vehicles and the flights each one has made.
Fig. 06The supply depot, a Shopify shop with our own design and Shopify’s checkout.

04Stack

What it runs on

Application
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • Framer Motion
Live data
  • Launch Library
  • ISS telemetry
  • Geomagnetic index
  • Close approaches
Computation
  • Orbital elements
  • d3-geo
  • TopoJSON
Commerce
  • Shopify Storefront API
  • GraphQL
Sharing
  • Share images
  • Calendar files
  • IndexNow
  • Resend

Next project · Product

A free link in bio, made in Canada