Manzoomeh

Overview

Manzoomeh (منظومه, “system”) is a small interactive solar system that runs entirely in the browser. The sun sits at the centre, eight planets orbit at different speeds, and clicking any planet opens its identity card — diameter, orbital period, and the handful of facts a curious visitor actually wants.

It began as a fun project, but the constraint that made it worth finishing was the one that makes it a useful portfolio piece: no framework, no 3D engine, no backend. Just Vite, the DOM, and a data file. The result is a page that loads instantly, works on a phone, and is short enough that the whole thing can be read in one sitting.

The brief

• One page, no server, no build step beyond vite build.
• Planets move at recognisably different speeds, so the page feels alive without being a simulation.
• Click a planet to open its fact sheet; click elsewhere to dismiss it.
• Persian interface, right-to-left, with Persian numerals where they belong.
• Deploy as static files with no configuration.

Approach

The first decision was to separate the planet data from everything else. Each planet is an object in its own module — name, colour, orbital radius, period, facts — and both the orbit rendering and the fact sheet read from that object. Adding a planet or correcting a fact means editing one line, not hunting through markup.

The second decision was not to scale. A solar system drawn to true scale is almost entirely empty space: the planets are specks, the distances are unreadable, and the page stops being an invitation to explore. So the orbits are spaced for legibility and the periods are relative rather than exact. That trade-off is the honest one for a page whose job is curiosity, not simulation, and it is the kind of decision that is easy to get wrong by trying to be accurate.

Orbits are driven by a single animation loop rather than a library. Each planet’s position is a function of elapsed time and its period, so the motion stays consistent when the tab is backgrounded and resumed — no accumulated drift from per-element timers. The fact sheet is plain DOM: a click handler reads the planet’s data attribute, fills a panel, and toggles it. No router, no state management, no component tree.

Vite earns its place here for the development loop and the build, not for the runtime. The output is static files that can be dropped on any host.

Stack

Vite for development and the production build, with the rendering and interaction written directly against the DOM — no UI framework and no graphics library.

Outcome

Manzoomeh is live and linkable, and it does the thing a personal project should do: it takes a small idea and finishes it. It is also a reminder that “frontend” does not have to mean a framework and a dependency tree. The parts that took the longest were not the animation but the Persian typography and RTL layout — getting the fact sheet to read naturally in both directions was more instructive than the orbital maths.

If I extend it, the next step is a scale toggle: the same page with a “true distances” mode, so the difference between the readable view and the real one becomes the point rather than a footnote.

View the website →