Home · Open source · Writing · Contact

01 · Interactive, one HTML file

Heliograph

A fictional solar observatory in one HTML file. Every visual is drawn at runtime.

MIT licence · One HTML file · WebGL2

Open the live demo · Repository on GitHub

HELIOGRAPH, the Institute of Solar Memory, has photographed the sun every clear day since 1874 from Isla Sombra. None of that is true. The institute, the island, the keepers and the archive are invented, and the page says so in its footer: a fiction, carefully kept.

I built it as a ceiling test for my coding agent: how far it could go on one self-contained page when pushed to its limit. Design and build: Claude Opus 5, directed by me.

No images anywhere and no build step. Every visual on the page is generated by code in one HTML file.

What is in it

  • The star. A WebGL2 fragment shader draws the sun behind the whole page: a photosphere with granulation and sunspots, and a corona traced by raymarching, with bloom, chromatic aberration and grain. It moves and resizes as you scroll.
  • The Instrument. A spectroheliograph drawn in inline SVG that draws itself on. Seven numbered parts explain themselves on hover, click or keyboard focus.
  • The Signature. A solar spectrum on a 2D canvas, its colours computed from wavelength, with fifteen named absorption lines. Drag across it to read them.
  • The Field. Particles moving along a magnetic field of ten alternating poles plus curl noise. Your cursor acts as another pole.
  • The Archive. Six photographic plates painted pixel by pixel from seeded noise, then scratched and dusted. Click one to open it in a lightbox.
  • Totality. The scroll ends on an eclipse, rendered by the same shader.
The Instrument section: a line drawing of a spectroheliograph on a dark ground, a mirror, lenses and prisms on a long bench with numbered parts, and a side panel describing the heliostat.
The Instrument section.

Run it

Open index.html in a browser with WebGL2. There is nothing to install and no server to start. A toggle switches between a dark observation look and a paper-and-ink archive look, and sound, off by default, is synthesised with the Web Audio API.

Limits

It is heavy on the GPU, and a weak or integrated GPU will struggle. Without a GPU it is slow to load.

The numbers are scenery. The sunspot chart is generated, not the historical record, and the astronomy elsewhere on the page has not been audited.

Licence

MIT for the code in the repository. The fonts are Fraunces, Inter and JetBrains Mono, loaded from Google Fonts under the SIL Open Font License.

Also on Reidify: reidify.design/open-source/heliograph/

By Rish Sadh, founder of Reidify, an AI-first design studio in Mumbai.