How this dawn was built.

The whole site is a single sky. A fixed WebGL canvas sits behind every section and renders an aurora that never repeats; the page content floats above it in glass and type. Scroll position is the sun: at the top you are in deep night violet, mid-page the sky turns to deep teal, and by the time you reach the contact section the sun has physically risen in the shader and the page reads in daylight ink.

Nothing on the page is an image. The aurora, the stars, the shooting stars, the cirrus clouds and the sun are all procedural — computed live by a fragment shader. No AI-generated imagery is used anywhere; the sky is mathematics.

The structure follows the night: arrival (night), the studio motto, six services as a constellation of glass orbs, three projects as lights on a far horizon, and finally contact at dawn — because an invitation should arrive with the morning.

The palette is a journey, not a set

Three anchor colors define the scroll timeline. Everything else is interpolated between them inside the shader, so the palette has infinite in-between moments.

Text ink flips once, from moonlight ivory #EFE9F8 to deep ink #2B1633, at 72% scroll — timed so the flip happens while the shader is already bright behind it. A soft radial “morning haze” sits behind the contact copy as a legibility guarantee, disguised as weather.

Type

Both families are self-hosted via Fontsource. No CDN fonts, no layout shift surprises.

The aurora shader

One fullscreen triangle, raw WebGL 1, one fragment shader, three uniforms: uRes, uTime, and uProg — smoothed scroll progress from 0 (night) to 1 (dawn). The foundation is value-noise fbm:

float fbm(vec2 p) {
  float v = 0.0, a = 0.5;
  mat2 r = mat2(0.8, -0.6, 0.6, 0.8);  // rotate each octave
  for (int i = 0; i < 5; i++) {
    v += a * noise(p);
    p = r * p * 2.03;
    a *= 0.55;
  }
  return v;
}

An aurora curtain is built from four ingredients, all driven by fbm: a horizontal bend that warps x so the arc snakes across the sky; a broad brightness wave along the arc; sharpened rays (noise taken to a high power) for the vertical folds; and a wandering base altitude the curtain hangs from. The vertical envelope is the auroral signature — a bright lower rim that decays upward:

float base = 0.30 + 0.20 * fbm(vec2(uv.x * 1.1, t * 0.025));
float h = uv.y - base;
float env = smoothstep(-0.02, 0.07, h) * exp(-max(h, 0.0) * 2.7);

Three curtain layers at different scales and time multipliers overlap into depth. Color is a two-stop ramp — emerald core at the rim, violet fringe above — and both stops are themselves interpolated by uProg, so the aurora cools from emerald/violet to cyan/blue as the sky turns teal, then dissolves entirely as dawn arrives and hands the sky to rose-gold cirrus and a rising sun disc.

Scroll-hue interpolation

The sky itself is three vertical gradients — night, teal, dawn — blended by smoothstep weights of uProg. Stars live on a hashed grid, twinkle on per-star phase, drift slowly west, and fade out between 35% and 72% scroll. A shooting star fires on a nine-second cycle with a 55% chance, night only. Banding is killed with a ±1/255 hash dither.

Motion choreography

Scroll progress is lerped (smooth += (target - smooth) * dt * 3.2) so the sky always arrives a beat after you do. DOM motion follows the same philosophy: headline lines rise out of overflow-hidden wrappers with a blur that clears — light through fog — on 1.2s expo-out curves. Parallax is depth-tagged (data-depth) and computed in one rAF pass. With prefers-reduced-motion, the shader renders a single still frame (repainted on scroll so the palette journey survives), parallax is off, and reveals are instant.

1. Scaffold a static Astro project; self-host @fontsource/gloock and @fontsource-variable/hanken-grotesk.
2. Put a fixed, full-viewport <canvas> behind main at z-index: -1, with a CSS-gradient sky layer beneath it as the no-WebGL fallback.
3. Draw one big triangle and write the fragment shader: value noise → fbm → three curtain layers → hashed-grid stars → sun disc and cirrus gated behind a dawn weight.
4. Feed it smoothed scroll progress and blend three sky gradients (night / teal / dawn) with smoothstep weights; interpolate the aurora's color stops with the same progress value.
5. Flip a data-phase attribute on <html> at 72% scroll to swap ivory ink for dark ink, and verify contrast at every point of the journey — especially mid-teal.
6. Keep the DOM quiet: glass orbs with backdrop-blur and a gradient rim, one grain overlay at 5% opacity, long expo-out reveals. Restraint is the identity.