Star horizon

A background that breathes

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.

See the settings Read the manual

Star horizon

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.

Two tints, one variable

--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

A denser sky

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

Faster, stronger

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

The original motion

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

Held still, and as a strip

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