01The Concept
HELIOS is a fictional L1 research station streaming the Sun as if the browser were a live instrument. The page is split between two temperatures: cold mission-control restraint and an incandescent object that refuses to sit still. The interface stays quiet: black field, amber hairlines, clipped labels, tabular numbers. The star gets the menace: turbulence, glare, dark umbrae, corona streamers, and telemetry-coupled flare stress.
The copy is invented but operational. Active-region IDs, cadence notes, light-delay numbers, watch-desk thresholds, and observer signatures give the station a working culture. The page does not explain itself onscreen; it treats the viewer like someone stepping up to an already-running console during hot watch.
02Core Visual Techniques
renderSun() in main.js draws one fullscreen
triangle. The fragment shader raymarches a sphere SDF in map(), then domain-warps
drifting fbm() so the photosphere boils instead of sliding like a texture.
ramp() maps heat into #ff6a00, #ffc45e, and #fff3d6.
Limb darkening, pulse() network lanes, filament scars, and active-region masks make
the surface feel dangerous rather than decorative.
Missed rays compute closest approach to the sphere, then layer exponential
falloffs, fbm streamers, angular ray gates, prominences, and a faint shock ring. Mouse
parallax comes through uMouse; uBoot choreographs ignition.
tick() runs bounded random walks for flare index, wind,
sunspots, Bz, proton flux, and Kp. drawSpark(), setBz(), and setKp() keep the
panels live while uFlare feeds the shader.
setFlareStage() turns each .flare-step into an instrument
control: hover, focus, click, or keyboard activation moves the SVG heat bloom, updates
data-stage, and rewrites the model note without adding another animation loop.
Reduced-motion users get a rich static frame, and all requestAnimationFrame work stops when the hero is offscreen or the document is hidden.
styles.css supplies the instrument shell: .hero-scan lays down scanlines and grid
marks, .spectral-rail adds channel readouts, .cond-grid forms the data wall,
.flare-fig stages the SVG stroke draw, and .log-console anchors the watch desk. The load
moment is singular: header, feed label, wordmark, lede, spectral rail, and HUD rise while the
shader brightens through uBoot; after that, motion settles into slow rotation and flare
pulses.
03Palette & Type Tokens
#050505
#ff6a00
#ffc45e
#fff3d6
25% amber
Unbounded carries the display wordmark, Archivo keeps body copy cool and legible, and Space Mono gives every value a measured instrument voice.
The palette is narrow, not flat: #050505 is the dominant field, #ff6a00 handles danger and heat, #ffc45e draws rules and labels, and #fff3d6 marks white-hot emphasis. Depth comes from opacity, glow discipline, scanlines, and shadow rather than extra hues.
04Reproduce This
Prompt an AI agent like this:
Ask the agent to verify the result with phone, tablet, and desktop screenshots, then judge the pictures before declaring the build finished. The signature technique only counts if the Sun still looks alive at every width.