IMPLEMENTATION NOTES

Serious machinery for a green sun.

Solaris Pea is a static website with the operating temperament of a 500-year infrastructure authority. The spectacle is generated in the browser from geometry, mathematics, shaders, and an unreasonable commitment to the premise.

APPLICATIONStatic Vite build
SCENEThree.js + custom GLSL
ASSET PIPELINEProcedural browser assets

The Green Sun

The sphere is not a model downloaded from an asset library. Each nearby pod is a tiny lathed mesh drawn through a Three.js InstancedMesh. Its cloud position, final surface position, orientation, color, and construction rank live in GPU attributes.

A custom vertex shader moves thousands of pods from a dispersed nebula into a golden-spiral sphere. Farther pods become camera-facing sprites generated from a small canvas texture. Both layers share the same scroll-controlled assembly, construction, and ignition values, so they behave like one object while carrying very different rendering costs.

Collapse, orbital commerce, and ignition are independent scene modules. The final corona is a transparent sphere driven by animated fractal noise and a Fresnel rim rather than a video or texture sequence.

Scroll is the control system

The document and the WebGL scene never reach into each other. ScrollTrigger writes normalized values between zero and one into a small shared state object; the render loop reads those values once per frame.

  1. The visitor moves through a chapter.
  2. Its scroll trigger updates one continuous state value.
  3. Scene modules interpret that value as assembly, collapse, commerce, construction, calm, or ignition.
  4. The same timeline can be scrubbed forward or backward without replaying a queue of animations.

The architecture is intentionally uneventful. A 500-year project should not depend on one section of the website finding another section’s private method.

How a name becomes a pea

The registry does not store 52 sextillion records. It does not store names at all. A name is normalized in the browser, hashed with SHA-256, converted to a large integer, and reduced into the valid pea address space:

normalized = NFKC(lowercase(trim(name)))
digest     = SHA-256(normalized)
pea_UID    = integer(digest) mod 52,000,000,000,000,000,000,000

The operation is deterministic: the same normalized name always produces the same UID. That UID also generates the display cultivar, installation year, and surface coordinate. The shared URL carries the name and UID so another browser can recompute the hash and verify that they belong together.

Contribution is deliberately local. Moving the pea to the shell records the ceremony in local browser storage; there is no account system and no server pretending to grant exclusive ownership. Sharing identifies a pea. It does not create a security.

The impossible-address-space interaction was inspired by Nolen Royalty’s Every UUID and the accompanying implementation write-up.

The Pea Atlas and certificate

The powers-of-ten atlas does not build a second Green Sun. A second camera and renderer draw the homepage’s existing Three.js scene—the same instanced pod geometry, sprite LOD, shaders, distribution, fog, and starfield—into the Atlas viewport. The pea UID derives a reproducible surface vector. Scroll applies its yaw, pitch, and roll one axis at a time while increasing camera magnification, then continues into the centered pod and pea. The five scale entries provide accessible jump points; the DOM version remains only as the no-WebGL fallback.

A shared atlas URL carries name, pea, and an atlas replay flag. The receiving browser recomputes the name’s SHA-256 mapping, rejects a mismatched UID, then replays the descent. No atlas session or ownership record is kept on a server.

The stewardship certificate is also generated in the browser. JavaScript builds a self-contained SVG from the verified pea record, escapes every user-derived string, and draws that SVG to a 1200 × 1500 canvas when a PNG is saved or shared. A certificate link repeats the same name–UID verification before regenerating it. Its seal, cultivar, coordinate, status, and color are reproducible from the record; both SVG and PNG are created without a backend.

Performance is part of the fiction

The renderer chooses a quality tier from pointer type, memory hints, and GPU information. The selected tier determines pod counts, sprite counts, stars, post-processing, and pixel ratio. A warm-started frame watchdog can lower the tier if the device remains slow.

Rendering is capped at a cinematic 30 frames per second. High quality enables bloom and vignette; lower tiers keep the same narrative with fewer instances and no post-processing. Instance ordering is shuffled so lowering the drawn count still covers the whole sphere instead of exposing one polar cap.

Touch devices receive a vertical timeline and no cursor effects. Reduced-motion visitors receive one static assembled frame, instant text, and no audio. If WebGL cannot start, CSS supplies the starfield and every chapter remains readable.

Sound without sound files

The optional ambience is synthesized with the Web Audio API. Two low oscillators, a slowly modulated filter, short pod plinks, and an ignition rumble provide the entire soundtrack. Audio begins only after an explicit visitor action and stays disabled for reduced motion.

The result is a compact static deployment: HTML carries the institution, CSS carries the legibility, JavaScript carries the choreography, and the GPU carries several thousand peas at once.

Find your pea →