A full-bleed WebGL backdrop of a light rising on the edge of a world, seen from just above the surface. The construction is one light and one circle, and everything visible falls out of those two. The core is a saturating light with two falloff regimes, because a picture of a star has two in it and one term cannot serve both: close in, the square is what blows the middle out to white, and far out the square has long since vanished and the linear term is the entire glow, carrying light a third of the way across the frame instead of leaving a tight ball on a black field. The denominator is softened by the source own radius rather than by an arbitrary epsilon, which is the statement that the light has a size, and is what makes the function bounded and the centre finite without a guard bolted on. Above the core sits a haze field of 3D value noise sampled on a ring whose radius is the logarithm of the distance to the light, so a tendril widens as it climbs instead of staying a hair, and sampling on a ring rather than on an angle means there is no seam to hide. Its contrast is a presence response: at rest the field is pulled most of the way to its own mean and reads as one smooth dome, and the tendrils are what the pointer buys. The rim is deliberately not the same law as the core. Light running along the limb is not light crossing empty space -- it skims a surface the whole way and every length of surface takes its cut, a loss that compounds per unit travelled, so it is an exponential rather than a power of the distance, and it gets its own reach control. The scene is composed exactly once, and the horizon occludes the light going in rather than the colour coming out: at the antialiased edge that distinction is the whole first row of pixels, because a fifth of a radiance that saturates is still white whereas a fifth of white is grey. Everything is measured in stage heights with the origin on the horizon apex, which makes the framing height-locked for free -- the glow keeps its share of the frame at any width, and a wide stage flattens the horizon, which is what a planet edge crossing a wide frame actually does. The engineering the effect needs to survive is in place: every thin feature is floored against a device pixel so the rim stays a hairline on a phone instead of dissolving into the dither, the drift is integrated from elapsed time rather than read off the clock so a backgrounded tab resumes where it left off, a still scene stops the render loop entirely instead of redrawing an identical frame, the buffer is sized to a pixel budget applied as an area so a clamp never squashes the aspect, and a machine without WebGL gets a horizon rather than a hole in the page. Sky, core, mid and deep colours, horizon height, curvature, glow size, brightness, haze density and reach, rim width, rim reach and rim brightness, drift speed and pointer response are all editable, and the export is one self-contained HTML file that fetches nothing at all.
Effect · HTML / CSS / JS · All tools