Star horizon
Three star fields drifting at three speeds, an aurora swaying above the curve of a planet, a film grain. Eight layers, one stylesheet, no dependency.
An animated space background, entirely in CSS: the script only adds three things — two numeric settings, a generated sky, and a pause when the block leaves the screen. Switch it off and nothing moves out of place. The same page without JavaScript.
--sh-glow-rgb carries the colour of the aurora, of the rim of
the horizon and of its halo. The two variants below change that alone, plus
the two greys of the haze.
--ember
--violet
data-sh-stars="seeded" replaces the original texture — eight
repeated dots — with a field drawn at random and spread out:
data-sh-density gives the number of stars per tile,
data-sh-seed the sky. Each of the three layers gets its own
draw, where the original repeats the same constellation at three sizes. It is
the only place where the script changes the drawing.
density 70 · seed 1712
data-sh-speed and data-sh-intensity are two
numbers, not two variables: they go through the original's curves — the drift
slows as speed^0.7, the aurora widens its sway as
speed^0.4, and the light is damped beyond 1 so that a setting of
100 does not blow everything out at once.
speed 4
intensity 12
data-sh-loop="raw" restores the drift of the Framer component
this one is taken from: the whole layer slides by half a width instead of
scrolling its texture by one tile. Watch the left edge after a minute — the
star field has left half the screen, then comes back in one jump. It is that
flaw, and that alone, which the default mode corrects.
loop raw · speed 26, to see the jump without waiting
data-sh-motion="off" freezes everything: it is also what the
component renders under prefers-reduced-motion, and what the
original rendered with no animation. On the left, the same thing as a short
strip — --sh-height decides the height, and
--sh-scale the scale of the drawing.
motion off · scale 9px
motion off · intensity 0.35