Sheet 06 · Live

Luna

Real-time moon phase, orbital position and sky panel.

  • React
  • Three.js (r3f)
  • GSAP
  • suncalc
  • GitHub Actions

Imagery

SCREENSHOT_REQUIRED

The sky panel showing the moon at its real current phase, next to the draggable 3D moon.

Two or three hero stills at 2x, plus one 10–20 second silent screen recording of the primary interaction.

What it is

The moon, as it actually is right now. Real phase, real orbital position, and a sky panel that adjusts to where you are. The moon itself is a draggable 3D object rather than an image of one.

Why it exists

Almost every moon-phase widget draws a picture. It picks one of eight images based on a date and shows it.

Computing the position instead means the thing on screen is derived from the same mathematics the sky is, and it is right at times a picture would be wrong — during the transitions between named phases, and at latitudes where the terminator does not sit the way the illustration assumes.

The hard problem

Lunar position is genuinely fiddly. The moon’s illuminated fraction, its phase angle and its apparent orientation in the sky are three different questions, and the last one depends on where the observer is standing.

The decisions

Compute the phase, do not select an image

The renderer takes an illuminated fraction and a phase angle and lights the sphere accordingly, so every intermediate state exists rather than the eight named ones.

The sky panel is geolocation-aware

Orientation depends on the observer. A moon drawn the same way in Colombo and in Reykjavík is wrong in at least one of them.

Direct manipulation

The moon is draggable. If the point is that this is a real object in a real position, it should behave like one.

What I would do differently

There are two sources of truth for the same sky. I wrote custom lunar mathematics, and the project also depends on suncalc, which computes much of the same thing. Right now they coexist, which means either could drift and nothing would catch it.

I would pick one as the authority and turn the other into a test of it — comparing both across a year of dates, and failing when they disagree beyond a tolerance. That converts a redundancy into a guarantee.

All work