Idea
Add a subtle aurora to the live city sky, reusing the domain-warped "spectral gradient" technique built for the cold-boot landing backdrop (app/src/components/LandingBackdrop/LandingBackdrop.tsx). Flowing gem-hued bands drifting slowly across the upper sky, faded down so it complements the scene rather than dominating it. Fits the enchanted-forest / glowing-rune / holographic vocabulary.
Where it lives
The sky is a single inverted icosphere with one fragment shader that already runs every frame, follows the camera, and passes through the HDR/bloom pipeline:
app/src/city/components/sky/sky.frag.glsl
app/src/city/components/sky/index.ts
Approach
- Drop the same fbm domain-warp into
sky.frag.glsl, but with the view direction as the domain (instead of screen UV), so color wraps the sky as flowing bands.
- Add on top of
uSkyColor, confined to a region (e.g. a band up from the horizon) and faded so it reads as an aurora, not a full wash.
- Animate off the existing
uTime (already advanced per frame in tick()).
Decisions / watchouts
- It changes the live city view — the aurora sits behind the buildings for every project, all the time. Intended, but it's a core aesthetic change, not a landing tweak.
- Bloom amplifies it — the sky goes through the bloom pass, so even a faint aurora can glow-bomb if it crosses the bloom threshold. Needs tuning to sit under bloom.
- Theme + settings fit — feed the gem colors in as uniforms (resolved from the
--cc-gem-* tokens, re-read on theme change) to stay theme-aware, and add a schema-driven SKY control (aurora enable + intensity) to match the settings convention. A hardcoded subtle value is a faster first pass.
Origin
Came out of the feat/projects-backdrop work, where the landing backdrop moved from CSS radial blobs to a WebGL domain-warped gradient to get the flowing-swirl look.
Idea
Add a subtle aurora to the live city sky, reusing the domain-warped "spectral gradient" technique built for the cold-boot landing backdrop (
app/src/components/LandingBackdrop/LandingBackdrop.tsx). Flowing gem-hued bands drifting slowly across the upper sky, faded down so it complements the scene rather than dominating it. Fits the enchanted-forest / glowing-rune / holographic vocabulary.Where it lives
The sky is a single inverted icosphere with one fragment shader that already runs every frame, follows the camera, and passes through the HDR/bloom pipeline:
app/src/city/components/sky/sky.frag.glslapp/src/city/components/sky/index.tsApproach
sky.frag.glsl, but with the view direction as the domain (instead of screen UV), so color wraps the sky as flowing bands.uSkyColor, confined to a region (e.g. a band up from the horizon) and faded so it reads as an aurora, not a full wash.uTime(already advanced per frame intick()).Decisions / watchouts
--cc-gem-*tokens, re-read on theme change) to stay theme-aware, and add a schema-drivenSKYcontrol (aurora enable + intensity) to match the settings convention. A hardcoded subtle value is a faster first pass.Origin
Came out of the
feat/projects-backdropwork, where the landing backdrop moved from CSS radial blobs to a WebGL domain-warped gradient to get the flowing-swirl look.