Arun Singh Software engineer · New Delhi
Launch: start a project
← The universeThe list →

The Atlas · Colophon

How the Atlas is built

How this universe is made, and the numbers it is held to. Every figure says where it comes from: this build is computed while the site is built, code is read from the source, and measured comes from a dated run on a named build.

Built 21 Oct 2026

Your visit ·

First view
44.6KB · BrotliThis build · the home page before the scene
Frame rate
59.9fps · p95 16.8 msMeasured 13 Oct 2026 · fc095d1 · mid tier
Lighthouse
99· 100 · 100 · 100Measured 13 Oct 2026 · lowest of 4 routes · performance, accessibility, best practices, SEO · without a GPU, so the static chart
Addresses
51each a prerendered pageThis build · the sitemap

https://the-atlas-3e2.pages.dev/colophon · built 21 Oct 2026

The numbers

Budgets come from the brief and are enforced by scripts in the repository. Each table says where its numbers come from.

Weight

Weight
ItemBudgetThis build
First view of the home page300 KB · held under 45 KB44.6 KB
All code and fonts, textures excluded1 MB (hard limit 1.2 MB)741.7 KB
Planet, Sun and sky textures, loaded after first paint—5.1 MB
The title fonts, subset to the title’s letters—5.1 KB

This build · 21 Oct 2026 · Brotli, fonts as stored · the same measurement as npm run size

The first view breaks down as HTML with inlined CSS 21.2 KB, gate title fonts 5.1 KB, mono font 14.4 KB and entry script 4.0 KB. The 3D code is requested only once the browser reports its largest contentful paint, or after a short cap.

Loading

Loading: Performance, Accessibility, Best practices, SEO
RoutePerformanceAccessibilityBest practicesSEO
/99100100100
/work99100100100
/work/rag-pipeline99100100100
/list99100100100
Loading: LCP, TBT, CLS
RouteLCPTBTCLS
/1.35 snot measurednot measured
/work1.35 snot measurednot measured
/work/rag-pipeline1.65 snot measurednot measured
/list1.8 snot measurednot measured

Measured 13 Oct 2026 · build fc095d1 · Lighthouse 12.8.2 · mobile · simulated slow 4G · 4× CPU · median of 3 runs · npm run perf

Across these routes, total blocking time stays at or under 104 ms and layout shift at or under 0.003.

Lighthouse’s own Chrome has no GPU. Software renderers get the static chart, so these runs measure how fast pages load. The 3D path is measured on a real GPU below.

Frames

Frames
TierViewportMeanp95p99Worst frameMeasured
Mid1440×90059.9 fps16.8 ms16.8 ms33 ms13 Oct 2026 · build fc095d1
High1440×90059.3 fps16.8 msnot measured250 ms13 Oct 2026 · an earlier build, before fix rounds C–D

Measured · each row names its date and build · npm run fps on a real GPU

Boot and memory

From navigation to a ready universe: 481 ms on the mid tier. Diving in and out 50 times grows the heap by 0.0 MB. A 30-minute session of random travel ends with the heap at 10.9 MB (from 9.8 MB), a p95 frame time of at most 16.8 ms and 0 errors.

Measured · boot 13 Oct 2026 · build fc095d1 · memory 13 Oct 2026 · before fix rounds C–D · session 13 Oct 2026 · before fix rounds C–D

Tests

Tests
SuiteResult
Unit232 passed, 0 failed
End to end61 passed, 0 failed, 23 skipped, on Chrome at 1440×900 and 390×844
Accessibility (axe)0 violations on 4 pages at 2 viewport sizes
Visual baselines14
Prerendered pages52 HTML files, 51 addresses in the sitemap (this build)

Measured 13 Oct 2026 · build fc095d1 · npm test, npm run e2e and npm run visual · prerendered pages: this build

Measured on Dell Latitude 5420 · Intel Core i7-10610U · Intel UHD Graphics (CML GT2) · 32 GB · Ubuntu 24.04 · Google Chrome 152, headless, ANGLE/Vulkan.

To reproduce: npm run size, npm run perf, npm run fps, npm test and npm run e2e. npm run record writes their results, with the date and the build, into the data this page is rendered from.

Hierarchy is scale

The site map is the universe: 4 galaxies are the sections, planets are pages, chapters are pins on a planet’s surface, and a chapter can hold single pages. How deep you are on screen is how deep you are in the site.

The atlas as five levels, each with its own address. The universe is the atlas itself, a galaxy is a section, a planet is a page, a country is a chapter and a state is a single page; each path extends its parent’s, for example /, then /work, then /work/rag-pipeline, then /work/rag-pipeline/the-build, then /work/rag-pipeline/the-build/ingest-chunking.UNIVERSETHE ATLAS/GALAXYSECTION/workPLANETPAGE…/rag-pipelineCOUNTRYCHAPTER…/the-buildSTATESINGLE PAGE…/ingest-chunking
The five levels, each an address of its own. The example runs from the atlas down to one single page.

Each of the 46 objects has its own address and prerendered page: 4 galaxies, 15 planets, 21 chapters and 5 single pages under the universe.

Navigation is a pure state machine with three verbs: scroll steps one stop, drag orbits, click reads. Nothing opens by itself; a property test runs 2,000 random sequences to check it. Browser history mirrors the chain of ancestors, so Back always means one level up, exactly like Esc.

One camera, one path

The rig follows van Wijk and Nuij’s smooth and efficient zooming and panning (van Wijk & Nuij 2003): centre and view width move together along the optimal path in the space of views, so a long move zooms out, pans while it is far, and zooms back in. Its curvature ρ (rho) is 1.25.

Van Wijk and Nuij’s optimal path between two views, A and B, of the same width: view width on a logarithmic scale against the position of the centre. Instead of panning at a constant zoom, the camera zooms out, pans while it is far, and zooms back in.CENTREVIEW WIDTH (LOG)CONSTANT ZOOMABOPTIMAL PATH
Two views of the same width, far apart. Panning at a constant zoom would sweep the whole way at close range; the optimal path rises, crosses, and settles.

Yaw and pitch are measured in the subject’s frame. Planets with chapters are tidally locked to their galaxy’s core with the chapters on the lit face.

One animation loop drives everything: GSAP’s ticker calls the frame. The engine and the interface announce what happens on window events: atlas:travelstart, atlas:arrive, atlas:travelcancel, atlas:introphase, atlas:panel, atlas:sound, atlas:motion, atlas:decade, atlas:pause, atlas:pref, atlas:soundcue, atlas:live, atlas:signal-open, atlas:downbeat, atlas:duck, atlas:form, atlas:list and atlas:caption. The landing title, the captions and the score subscribe to them; none of them reaches into the engine.

Scale hand-offs

One world, one continuous move, with no scene cuts. The layers fade as functions of one number, the camera’s distance from the Sun.

Landmarks along the journey on a logarithmic axis of distance from the Sun: sun, sol a point, our galaxy, universe, wall, apex. Below it, the distances over which milky way, sol tag, other universes fade in and out.LOG DISTANCE FROM THE SUNSUNSOL A POINTOUR GALAXYUNIVERSEWALLAPEXMILKY WAYSOL TAGOTHER UNIVERSES
The beats on one logarithmic axis, and below it the distances over which each layer fades in and out. Nothing switches at a threshold.

Windows

Windows
LayerFades inFades out
The Milky Way, seen from outside250–9004,500–8,000
The SOL tag1,500–2,5006,000–9,000
The other universes853,546–2,845,153stays

Code · WINDOWS in src/engine/intro.ts · distances from the Sun in world units · smooth steps in log distance

The scale is artistic. Around the Sun, the Sun is one world unit in radius, and our whole universe is 948,384 units in radius. The real observable universe is about 93 billion light-years across (Planck Collaboration 2020, A&A 641, A6; Lineweaver & Davis 2005, Scientific American), so the scene compresses reality about 6.7 × 10¹¹ times, measured in nominal solar radii (IAU 2015).

Beyond the wall the other universes are an artist’s impression, drawn with restraint: thin luminous membranes, a foam of many smaller ones around the nearest, and a few pairs whose walls cross on a collision ring, the kind of event sought in the first observational tests of eternal inflation (Feeney et al. 2011). The nearest neighbours’ interiors are cellular Worley webs (Worley 1996). Distance and angles run through timed knots on monotone cubic splines, which add no overshoot between knots (Fritsch & Carlson 1980).

Beyond our universe nothing is drawn with depth, so the scene needs neither a logarithmic depth buffer nor a floating origin.

Light and matter

Linear light, tone-mapped with AgX (Sobotka) on every tier that draws the scene; mipmap bloom and dithering on high and mid, neither on low.

Procedural galaxies: one spiral-arm model drives both the shader and the star sampler.

The sky: the Milky Way panorama by ESO / S. Brunier (CC BY, in the credits below) with point sources removed and its levels set for the sky shader, plus 8,000 crisp procedural stars on mid (4,000–12,000 by tier); until it has loaded, the Solar System Scope Milky Way map stands in. Star colours are blackbody colours from a fitted curve (Helland 2012).

The commit stars are DEMO DATA until a GitHub account is connected.

Planet maps arrive after first paint, one galaxy at a time, decoded off the main thread.

The score

There are no audio files. Sound stays off until you turn it on, and the audio context is created only inside that click or key press. The score is generated live with the Web Audio API (W3C 2021), in D Lydian.

The score’s signal graph. drone, wind, whistlers, partials, pads, bells are summed into one bus, which runs through a glue compressor into the limiter and out. Each layer also sends to a reverb whose impulse response is generated, and its return joins the bus. The interface tones, and the generated swell of a warp jump, join at the limiter.BUSGLUE COMPLIMITEROUTDRONEWINDWHISTLERSPARTIALSPADSBELLSREVERB · GENERATED IRSENDRETURNUI TONES
Every layer meets one bus, one glue compressor and one limiter; the reverb is a send, its impulse response computed in the browser.

Layers

  • Drone
  • Pads
  • Solar wind: filtered pink noise (Kellet)
  • Bells
  • Whistlers: falling tones shaped like the radio whistlers that lightning sends through the magnetosphere (Storey 1953)
  • Partials

The reverb’s impulse response is generated in idle time. Opening a reading panel ducks the score; a hidden tab suspends it.

Ways in

  • Every page is text.
  • The LIST (L), also at /list without JavaScript.
  • Keyboard: the up and down arrows travel (tap or hold); Page Down/Up and Space glide a stop; Home and End go to the start of the path and to its last mapped stop; the left and right arrows turn the view; Enter reads the page in view or glides on; Esc closes; 1–4 jump to a section; W, A, S and D fly off the path and B returns to it; / searches; L lists; H hides the interface.
  • Screen readers: arrivals are announced, and the panel heading takes focus.
  • Reduced motion: travel becomes a cut, titles fade.
  • No GPU: the static chart.
  • No JavaScript: every page, the LIST, this page and both forms work.
  • Contrast: the dim text colour on the page background measures 5.65:1, the muted one 7.30:1, computed from the tokens at build.
  • Checked: axe reports 0 violations on 4 pages at 2 viewport sizes (measured 13 Oct 2026 · build fc095d1).

Four tiers

The tier is decided at boot from what the browser reports: no WebGL2 or a software renderer gets none; Save-Data, very little memory, very few cores or a weak mobile GPU get low; a touch screen gets mid; a discrete GPU gets high; an integrated one, like the Intel laptop these numbers come from, gets mid. Unknown means mid.

Any page takes ?tier=high, ?tier=mid, ?tier=low or ?tier=none to force one.

What each tier draws
TierPixel ratio capMSAABloomStars per galaxyCommit starsSky starsTexturesIdle frame cap
high24×yes16,0006,00012,0002k60 fps
mid1.52×yes9,0003,0008,0002k30 fps
low1offno4,5001,2004,0001k30 fps
noneA static SVG chart, full page content

Code · TIERS in src/perf/tiers.ts and SKY in src/universe/sky.ts · stars per galaxy at density one

A frame monitor watches the p95 frame time: when it stays over budget the drawing buffer drops its resolution a step, and it climbs back once there is headroom.

How it is checked

Each check is a script in the repository:

  • npm run size: the transfer budget, the same measurement as the figures above.
  • npm run perf: Lighthouse on the key routes, one at a time.
  • npm run fps: a scripted journey on a real GPU, with the frame times’ p95 and p99.
  • npm test: the unit tests, including the navigation law and this page’s own rules.
  • npm run e2e: the browser tests on a desktop and a phone viewport, axe included.
  • npm run visual: frozen screenshots against approved baselines.
  • node scripts/qa-shots.mjs: deterministic screenshots for review (27 states at 5 sizes, 13 Oct 2026 · build fc095d1).
  • npm run build:strict: the launch gate. It fails while a placeholder remains or a measurement on this page predates the code it describes.
  • npm run record: writes the results above, with their date and build, into the data this page is rendered from.

No measurement on this page is typed in by hand.

Stack

  • three.js r180, WebGL2, custom GLSL; postprocessing 6.39.5.
  • GSAP 3.15.0, the one loop.
  • Vite 6.4.4 and TypeScript 5.9.3, strict.
  • Fastify 5.12.5 for the forms and the stars’ feed.
  • Caddy with precompressed files and a hash-pinned CSP.
  • Cormorant and IBM Plex Mono under the SIL OFL.

This build · versions from package-lock.json

References

  1. van Wijk, J. J. & Nuij, W. A. A. (2003). Smooth and efficient zooming and panning. IEEE Symposium on Information Visualization (InfoVis 2003).
  2. Fritsch, F. N. & Carlson, R. E. (1980). Monotone piecewise cubic interpolation. SIAM Journal on Numerical Analysis 17(2), 238–246.
  3. Sobotka, T. AgX. The picture formation used by Blender 4.0, as implemented in three.js and postprocessing.
  4. Helland, T. (2012). How to Convert Temperature (K) to RGB: Algorithm and Sample Code. Blog post.
  5. Worley, S. (1996). A cellular texture basis function. Proceedings of SIGGRAPH 96, 291–294.
  6. Feeney, S. M., Johnson, M. C., Mortlock, D. J. & Peiris, H. V. (2011). First observational tests of eternal inflation. Physical Review Letters 107, 071301.
  7. Storey, L. R. O. (1953). An investigation of whistling atmospherics. Philosophical Transactions of the Royal Society A 246, 113–141.
  8. Kellet, P. Pink noise filter. The “refined” method. musicdsp.org archive.
  9. W3C (2021). Web Audio API. W3C Recommendation. www.w3.org/TR/webaudio (opens in a new tab)
  10. Ewen, H. I. & Purcell, E. M. (1951). Observation of a Line in the Galactic Radio Spectrum: Radiation from Galactic Hydrogen at 1,420 Mc./sec.. Nature 168, 356.
  11. Hellwig, H., Vessot, R. F. C., Levine, M. W., Zitzewitz, P. W., Allan, D. W. & Glaze, D. J. (1970). Measurement of the unperturbed hydrogen hyperfine transition frequency. IEEE Transactions on Instrumentation and Measurement 19(4), 200–209. The line at 1 420.405 751 768 MHz.
  12. Cocconi, G. & Morrison, P. (1959). Searching for Interstellar Communications. Nature 184, 844–846. The proposal to listen near 1 420 Mc/s.
  13. Kraus, J. D. (1979). We Wait and Wonder. Cosmic Search 1(3), 31–34. The Ohio State “Wow!” signal of 15 August 1977.
  14. International Astronomical Union (2015). Resolution B3 on recommended nominal conversion constants. The nominal solar radius; with IAU 2012 Resolution B2, the astronomical unit.

Credits

Designed and built by Arun Singh in New Delhi.

Not affiliated with NASA, ESA, ESO or CelesTrak. Images and data are used under their licences.

Phase 2 sources

The living-universe pieces cite these on their cards. They are the sources of the real numbers; the simulated and fictional pieces say so wherever they appear.

Pulsars

Periods and positions of the pulsars come from this catalogue.

Satellites

Live orbits are drawn from the latest element sets and propagated with SGP4.

Simulated transients

Supernovae, novae, radio bursts, gamma-ray bursts and kilonovae in the endless field are SIMULATED. The real phenomena they are drawn after are cited here.

Black holes and jets

The distances and sizes on the active-galaxy cards.

Mergers and nebulae

The distances and sizes behind the merger simulations (an ARTIST’S IMPRESSION of the encounter) and the nebula clouds.

Laniakea

The flow of galaxies toward the Great Attractor is an ARTIST’S IMPRESSION built from these cited numbers.