A 3D CSS astrovisualization platform. css.earth renders celestial bodies as real HTML and CSS 3D geometry through PolyCSS, without WebGL or canvas. It turns open space data into browser-ready textures, meshes and scene files, loaded into one model of the universe.
Explore the live version: css.earth 🔭
Join chat.polycss.com for support and community discussions.
Space agencies and observatories publish decades of public data, but it is buried in archives, formats and papers that are hard to access for the general public. css.earth mounts that data in the 3D DOM, with every pixel traceable to the original source.
Other universe browsers already exist, and many of them inspired this platform: NASA's Eyes on the Solar System, OpenSpace, Celestia, Stellarium and Google Earth. The difference is that css.earth does not need WebGL: it runs in any modern browser, which makes it easier to open and share. It even works without JavaScript!
Every object has its own URL and they all share one camera, so you can fly from Saturn to another galaxy without leaving the page. There are 495 bodies so far, plus the nebulae and galaxies below.
The Sun, the eight planets, 5 dwarf planets, 99 moons, 311 asteroids, 32 comets and 17 other trans-Neptunian objects, all on their orbits. Where a mission photographed a body, its surface comes from that mission's images; the rest are shown as shape models.
Stars whose surfaces have been imaged, such as Betelgeuse and R Doradus, and planetary systems beyond the Sun, such as WASP-43, HD 189733 and TRAPPIST-1.
The Orion Nebula, the Crab, the Lagoon and the Helix, built as 3D volumes, plus the Pleiades cluster. Beyond them: the Milky Way, the Large Magellanic Cloud, Andromeda, Triangulum, the Local Group and the nearby universe.
Each object has datasets assigned: the 495 bodies carry 1,035 views between them. A view can be a true-colour or single-filter photograph, an enhanced- or false-colour mosaic, a thermal, infrared, ultraviolet or radar map, topography, or an interior model.
The data comes from 63 spacecraft, landers and telescopes, including:
- Planetary missions: MESSENGER, Cassini, Galileo, Juno, Dawn, New Horizons, Voyager 1 and 2, Rosetta, Hayabusa and Hayabusa2, OSIRIS-REx, NEAR Shoemaker, DART and LICIACube, Magellan, the Viking orbiters and landers, LRO, MRO and Mars Odyssey.
- Space telescopes: Hubble, Webb, Spitzer, Herschel, Chandra, WISE, Gaia and Hipparcos.
- Ground-based facilities: ESO's VLT, VLTI, VISTA and VST, ALMA, the VLA and VLBA, and the Arecibo and Goldstone radars.
Preparation reads these products from their public archives, such as NASA's PDS, USGS Astrogeology, MAST, the ESO and ALMA archives and JAXA's JLPEDA, and records each one in src/sources/ (3,478 source records). Each body's README names the products behind its views, how they were processed and their known limits.
Preparation reads archive formats directly with in-house TypeScript readers. The FITS, PDS, SPICE and photometry readers are checked against independent reference implementations in tools/oracles/.
- FITS and PDS: FITS images and tables, including Rice-compressed ones, with their sky orientation, and PDS3 and PDS4 labels (
tools/fits.mts, PDS labels). - SPICE: kernels, clocks, frames and pointing, used to place a spacecraft's camera for each photograph (
tools/spice/). - Surface imagery: image decoding, shape-model reduction, UV mapping and texture atlases (surface preparation, colour preparation).
- Photometry: Hapke and disc models that separate a surface's brightness from its lighting and viewing angles (
tools/photometry/). - Interferometry: calibration and image reconstruction for stellar surfaces from raw VLTI and ALMA observations (interferometric imaging).
- Eclipse mapping: exoplanet maps fitted from raw JWST light curves (eclipse mapping).
- Nebulae and galaxies: 3D volumes and galaxy fields from surveys and catalogues (prepared nebulae, galaxies).
- Rendering: every body is a PolyCSS mesh of HTML elements, placed with CSS
matrix3d(...)and painted from prepared texture atlases. No canvas or WebGL. - Preparation: Node reads the original products, checks each against its pinned hash, and writes the textures, geometry, orbits and page text, each recording its sources.
- Objects: each one is a package under
src/objects/<id>/. One registry, one shell and one camera serve them all. - Delivery: prepared files are stored in R2;
pnpm setup:assetsfetches them before Astro builds the site for Netlify. - Runtime: the browser loads prepared state and moves the camera. It never derives geometry or textures.
Use Node.js 24 (or 22.18+) and pnpm 10. Install dependencies, download the prepared assets once, and start the dev server:
pnpm install
pnpm setup:assets
pnpm devpnpm install builds the shared packages, the renderer and the preparation tools. pnpm setup:assets downloads the prepared browser images and each object's baked scene files, which Git does not track. pnpm dev serves the site on port 4210.
To work on one object, use pnpm setup:assets --object=mars and open /mars/. For a production build, run pnpm build, then pnpm preview.
Re-preparing an object from its original sources needs more: pnpm prepare:checkout restores the pinned source downloads, and some conversions call Python 3 with numpy. You do not need that to work on the shell, the renderer or the docs.
- Adding a body: package layout and the preparation steps.
- Provenance and documentation contract: how sources, credits and evidence are recorded.
- Documentation index: surface preparation, interferometric imaging, eclipse mapping, navigation, performance and more.
- Contributing: setup, which checks to run and where things live.
- Celestial skill: the workflow agents follow for body work.
css.earth source code is MIT licensed. Scientific data, imagery and prepared derivatives keep the terms and attribution of their sources. Each object's README lists its exact provenance, presentation limits and credits, for example Mars and Saturn. NASA and other source credits do not imply endorsement.