YOUR SKY · --:--
This valley is painted live, by one equation whose only input is your clock. No photographs, no textures, no video — sun, stars, water and weather are computed per-pixel, per-frame, from the minute you happen to arrive. It will never look exactly like this again.
Four acts
The day here isn't four hand-made scenes — it's one continuous function, and these are just four points on it. Each card below is painted with the exact palette math the shader runs at that minute. Click one and watch the sky above sweep through every hour in between.
The engine
Every frame, the page reads new Date(), converts it to decimal hours, and hands it to the GPU as a single number: uDay. One sine wave turns that number into solar elevation — how high the sun stands — and three derived scalars key every visual decision on this page.
dayI says how much daytime — it fades the sky from ink to blue, whitens the clouds, wakes the lake. tw spikes only while the sun crosses the horizon — it is the amber in the sunset, the rim light on the ridges, even the tint of the buttons you're looking at. nightI switches on the stars, the milky way, the fireflies.
The instrument panel here is live — drag the scrubber in the sky above, or click a palette minute below, and watch the scalars respond.
// the entire interface between JS and the painting
uniform vec2 uRes; // canvas resolution
uniform float uTime; // seconds — clouds, water, twinkle
uniform float uDay; // hours 0..24 — the star of the show
uniform vec2 uPar; // mouse parallax, eased in JSse = sin((uDay − 6) / 24 · τ) — the amber dot is the sun, the pale one is the moon, running twelve hours out of phase.
Anatomy
The whole scene is a single GLSL fragment shader on one full-screen triangle — raw WebGL 1, no libraries. Per pixel, per frame, it composes these layers from nothing but math:
A horizon-to-zenith gradient blended between night and day endpoints, with twilight amber injected on the sun's side of the frame — sunsets glow where they should.
Two discs on the same sine, twelve hours out of phase. The moon is two offset circles subtracted into a crescent, roughened by one octave of crater noise, ringed by a 22° halo.
Two hashed star grids — coarse and fine — each star with its own twinkle frequency, plus a structured galactic band with bright dust and dark lanes cut by fBm.
Ridged fBm — noise folded with abs() — stacked five deep. Nearer ridges are darker, sharper and parallax faster; the fog between them is literally the sky's horizon color.
The upper scene re-sampled with a mirrored, noise-wobbled coordinate — a true reflection — plus a glitter path of thresholded noise that tracks the sun by day, the moon by night.
Fireflies drift over the meadow after dark; a meteor may streak once per eleven-second window. Then vignette, film grain and a gentle pow(col, 0.92) lift finish the frame.
Field notes
If your OS asks for calm, the render loop is replaced by on-demand frames: the sky still matches your clock, it just stops shimmering.
The canvas watches its own frame times; if the average slips past 55 ms it quietly steps internal resolution down 30% until it flows again.
Lost WebGL contexts rebuild themselves; machines without WebGL get a hand-tuned CSS dusk instead of a blank page.