A website that shows the real distances in space. You scroll sideways from the Sun to Proxima Centauri, and every pixel is 500 km.
The project
Among the stars puts the solar system on one horizontal line. You start at the Sun and scroll past the planets, their moons, the dwarf planets and 17 spacecraft. The trip ends at Proxima Centauri, the nearest star to the Sun.
Every gap on the line uses the same scale of 500 km per pixel. That makes the trip 80 billion pixels long, and most of it is empty space. The site does not move objects nearer together, so you see how far apart they are.
My first agentic project
This is the first project where artificial intelligence (AI) agents wrote most of the code. Before it, my view of AI for software was negative. The code I got from the tools was often wrong or of low quality, and the fixes cost me more time than the tools saved. Then a friend told me that the models had improved a lot. I started this private project to find out if that was true.
My friend was right. Claude Opus wrote code that I could review and merge, as long as the architecture and the rules were clear. At the start, the rules were not clear. I began with one instructions file and a folder of story files. When the agent did something that I did not want, the instructions had a gap, and I wrote a rule for it.
In the first 9 days, I changed the instructions 14 times. The new rules were about commits, code style, architecture patterns, and the accuracy of the data before the looks. After four weeks, I turned the steps that I repeated into skills: one to write a story as a GitHub issue, one to make a release and one to deploy. That taught me that the rules are part of the architecture, the same as the code.
The project also changed my role as an architect. Before this project, my work was a mix of engineering and architecture. With the agents, the code takes much less time to write. So I spend a larger part of my time on the design: how a project must work, and where its boundaries are. I use the same approach with my team at Moba, where the whole team works with the rules that we write down.
The project is far from perfect. It was my first project with agents, so the code still has many learning mistakes.
How I built it
The site is a SvelteKit app with one page. When the page opens, SvelteKit loads the facts for all 55 objects and calculates the position of each object on the line. After that, the page does no more distance math. The components get the positions and draw them.
I cut the work into stories. The agent wrote a draft of each story, and I corrected it until it described what I wanted. Then the agent built it, and I reviewed every pull request before the merge.
The server
The site runs on a virtual private server (VPS) at TransIP. A GitHub release starts the deploy: a workflow logs in to the VPS over SSH, builds the site and restarts it. The analytics run on a self-hosted Umami, without cookies.
I have years of experience with CI/CD, mostly with GitLab and Amazon Web Services (AWS). The strategy and the logic of a deploy pipeline were clear to me. GitHub Actions and a private VPS were new, and I did not know the details of these platforms. The agent saved me a lot of time, because I did not have to find out how each tool works. That made the switch to another platform easy. This site is a private project with low risk, so it was a good place for me to learn.
The saved time has a cost: I learned less about these platforms than I would on my own. As a developer, I think we must always know what runs on our servers. An agent can open a port or put a key in the wrong place, and I am the one who must see it. On a project with more risk, I take the time to learn the platform first.
A trip of 80 billion pixels
A browser cannot make an element that wide: Chrome and Firefox stop at about 33.5 million pixels. So the page itself does not scroll.
The scroll position is one number in Svelte state. Each object moves to its real position minus that number. The site does not render objects that are more than 2,000 pixels off screen.
The mouse wheel, a trackpad, a swipe and the arrow keys all change that number. The bar at the bottom flies you to a planet. A flight takes between 4 seconds and 1 hour. It speeds up, slows down and shows its speed as a multiple of the speed of light. The address bar keeps your place, so you can share a link to it.
Planets that turn
The planets turn on the same scale as the distances, from the real length of a day on each planet. Venus turns the other way, as it does in real life.
Each surface is a flat strip as wide as the circumference of the planet. The stylesheet moves two copies of the strip behind a round mask, so the planet looks like a globe. The axial tilt turns the whole disc, so Earth leans 23.4°.
The start of each spin comes from the clock. When a planet scrolls off screen and comes back, it looks as if it did not stop.
Exact numbers
All facts are in one JSON file. For each of the 55 objects, it has the radius, distance from the Sun, orbital period, day length, axial tilt and temperature. Every distance on the page comes from this file, to scale and with no exceptions.
The card of each planet shows these facts and links to its NASA page. Where science is not sure, the card says so. The tilt of Ganymede changes between 0° and 0.33° over the centuries, so the card shows the midpoint and tells you why.
