Real-Time Solar System
An experiment in how much real astronomy fits inside a hero section — and in getting a paragraph of text to flow around moving objects it cannot see.
- Built with
- Three.js · R3F
- Epoch
- J2000
- Year
- 30 seconds
- Bodies
- Sun + 8
Real orbital periods, not decoration
Each planet carries its actual sidereal period — 87.969 days for Mercury, 60,190 for Neptune — and its mean longitude at the J2000 epoch (1 January 2000, 12:00 UTC). Angular position is derived from the elapsed time since that epoch, so when the page loads the planets are arranged the way the real ones are, then advance from there at one Earth year per 30 seconds. Radii use true ratios against the Sun, scaled up for visibility, because at honest scale Mercury would be a fraction of a pixel.
A tilted ecliptic and a moving Sun
The Sun is not parked at the origin. It travels a slow circular path while the planets are carried along with it, and the orbital plane is tilted roughly 60° to that path — a nod to the helicoidal picture of the solar system moving through the galaxy rather than orbiting a fixed point. The result is that orbits sweep through depth instead of spinning flat against the camera.
Text that gets out of the way
This is the part worth the trouble. Every other frame, each body is projected from world space into screen space along with its apparent radius, and those circles are published to a small subscription store. The text layer reads them during layout: for each line it computes the horizontal chord the planets carve out at that line's vertical centre, then asks the line-breaker for a line that fits the remaining width, shifted clear. Paragraphs open up and close around the planets as they drift past.
Why it isn't the front page any more
It was, for a while. But painting a headline into a canvas means it cannot be selected, read by a screen reader, or indexed — and a portfolio's first screen is the wrong place to spend that. Here the technique has room to be what it is: a demonstration. The landing page now runs a different scene built around real DOM text.
Planet colours follow NASA/JPL visible-light references. Scroll back up and watch Mercury — it laps the inner system every few seconds.