Back to portfolioVisit live site

Daylight

A single page that shows how much daylight any day of the year has at your location, where the sun actually is in the sky while you look at it, and - if you want it - why.

  • TypeScript
  • Next.js
  • React
  • Tailwind CSS
  • AWS S3 + CloudFront
  • Terraform
The Daylight app showing the sun's path over a horizon, a 24-hour daylight ring reading 14h 34m, and a panel of sunrise, sunset and solar-noon times for New York.
The main view: the sun's arc, the 24-hour daylight ring, and every key sun time for the day.

Overview

Daylight traces the sun's whole 24-hour path - up across the sky, down past the horizon, and on under your feet - and places the sun at its real position for the current moment. Leave the tab open through sunset and it sinks with the real sun as the sky darkens; scrub through the year and every day is measured against the longest one.

It grew out of a long-standing love of astronomy, and it's built to be learned from, not just glanced at. Turn on 'Learn' and every meaningful point on the visual - sunrise and sunset, solar noon, the sun's arc, twilight, the night path - becomes a marker you can tap for a plain-language tooltip explaining exactly what it means. The exact figures in the side panel are annotated the same way, so nothing is left as a bare number.

There's a second reading of the same day too: a 24-hour ring, gold for daylight, with a hand at the current time. And for anyone who wants the subject rather than the software, a companion essay draws the astronomy behind the app - why day length changes, why the earliest sunset isn't the shortest day, what sunrise really means - computed for your own saved location, not a stock example.

Everything runs in the browser. There's no backend, no API key and no tracking: every sun calculation is done on-device from your latitude and longitude, and your location never leaves it.

Highlights

  • Full 24-hour sun-path visualisation plus a 24-hour daylight ring, both live to the current moment
  • A 'Learn' mode that turns every point on the visual - sunrise, solar noon, the sun's arc, twilight - into a tappable tooltip explaining it in plain language
  • Scrub through any day of the year and compare it against the longest day
  • Exact sunrise, sunset, solar noon, twilight and peak-sun figures, each annotated rather than left as bare numbers
  • A companion 'Learn' essay on the astronomy, drawn for your own saved location
  • Search any city or use your device location - everything computed on-device, nothing sent to a server
  • Fully static export on AWS S3 + CloudFront, Terraform-managed, and installable as a PWA that keeps working offline - accessible by default

A closer look

  • The sun-path view with Learn mode on: dashed markers sit on each key point of the sun's arc, and an open tooltip titled 'Sun's path' explains that the glowing edge traces the sun's arc across the sky from sunrise to sunset.
    'Learn' mode annotates the visual: tap any point on the sun's path for a plain-language explanation.
  • A diagram from the companion essay: the Earth shown at its December and June orbital positions around the Sun with its axis fixed, the northern end leaning away then toward the sun, and the January/July distances marked to show distance barely changes.
    The companion essay draws the astronomy in full - here, why the Earth's tilt, not its distance, drives the seasons.
Back to portfolio