Skip to content

Aurora in the city sky (domain-warped gradient) #102

Description

@thalida

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

  1. 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.
  2. 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.
  3. 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.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or requestnice-to-haveDeferred-but-real work; not urgent

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions