Helios — a website that follows the sun.

Concept

Light made livable

The brief called for warm optimism without greenwash clichés — California modernism, sunrise gradients, precise engineering underneath. The organizing idea: don't just describe solar, dramatize daylight. Scroll position is time of day. You begin before dawn in cool indigo, the sun rises as you read, and you arrive at the closing call-to-action at bright noon. Every section is timed to where the sun sits in the sky.

Palette — a dawn-to-noon system

Type

Sora for display and the big engineering numerals — a geometric sans with just enough warmth to feel human rather than corporate. Inter for body at comfortable reading sizes. Tabular figures (font-feature-settings:"tnum") keep the counters and calculator numbers from jittering as they animate.

Assets

Original imagery — GPT Image 2

Three images, generated at high quality via the OpenAI gpt-image-2 model, then inspected and kept. The exact prompts:

House at golden hour — 1536×1024

Architectural photography of a modern California-modernism single-story
house at golden hour sunrise, flat roof fully covered with sleek dark
monocrystalline solar panels in a clean grid, warm peach and gold dawn
light raking across white stucco walls and floor-to-ceiling glass, long
soft shadows, low warm sun flare, desert landscaping with agave, calm
optimistic mood, shot on 35mm, shallow depth, palette of warm amber
gold sky blue and cream, ultra sharp, no text no watermark no people

Macro solar cell — 1536×1024

Extreme macro photograph of a monocrystalline solar photovoltaic cell
surface, deep blue-indigo silicon with fine geometric grid of silver
busbar lines, iridescent light refraction, a bright warm golden sun
flare bursting across one corner, dewdrops catching amber light, high
detail texture, cinematic shallow depth of field, palette indigo silver
and solar amber, no text no watermark

Installers at dawn — 1536×1024

Silhouette photograph of two solar installers working on a residential
rooftop at dawn, carrying a solar panel against a vast dawn sky gradient
from pre-dawn indigo to horizon peach, warm rim light outlining figures,
minimal clean composition, distant hills, hopeful cinematic mood,
palette indigo to peach gold, no text no watermark

Techniques

How the motion works

The scroll-driven day cycle

A single fixed backdrop layer holds a vertical gradient whose two colours are CSS custom properties. On scroll, JavaScript computes page progress (0→1) and interpolates between three keyframes — indigo/peach → sky/gold → white/amber — writing the results back as --sky-top and --sky-bot. The whole page temperature rises with the reader.

// interpolate between 3 colour stops by scroll progress
const p = scrollY / (scrollHeight - innerHeight);
const m = mix(p);              // {top:[r,g,b], bot:[r,g,b]}
root.style.setProperty('--sky-top', m.top.join(','));
root.style.setProperty('--sky-bot', m.bot.join(','));

The rising sun

An inline SVG sun (radial-gradient core + 16 procedurally generated rays that slowly rotate) is fixed to the viewport. Its left/top follow a sine arc keyed to scroll — low on the left before dawn, climbing to high overhead by noon — and it scales up as it rises. Stars fade out in the first screenful; parallax clouds fade in as the sky brightens.

// sun climbs a sine arc as you scroll
const sx = lerp(16, 74, p);                  // % across
const sy = 88 - Math.sin(p * Math.PI*0.5) * 74;  // % up

The animated home cross-section

The centrepiece is a hand-authored SVG: house, roof panels, inverter, battery and grid tower, wired together with four bezier paths. Energy is rendered as glowing dots that ride those paths — each frame samples path.getPointAtLength() at an advancing offset. A day/night toggle flips which wires are active and reverses flow direction: by day the roof feeds home, battery and grid; after dark the battery discharges back into the house and the windows light up.

Everything else

• Scroll counters — panels, GWh, CO₂ offset count up with an ease-out cubic when they enter view.
• Savings calculator — three sliders drive a live front-end model (system size, offset %, payback, 25-year savings, CO₂).
• Reveals & micro-interactions — masked hero lines, IntersectionObserver reveals, magnetic-feel buttons, hover lifts, an animated grain layer.
• Accessibility — full prefers-reduced-motion path, semantic landmarks, alt text, focus-visible rings, AA-contrast body text.

Process

Three iteration passes

Ship it

Deploy

Fully static — no build step. Deploy the folder to Cloudflare Pages:

npx wrangler pages deploy . --project-name helios