Star horizon

What's included

An animated space backdrop, in two files: a stylesheet and a script. No dependencies, no build step, no external requests — both textures are embedded in the CSS.

Eight stacked layers, back to front: a cold haze, a blurred aurora swaying above the horizon line, three star fields drifting at three speeds, the black disc of a planet with its lit rim, a vignette, a film grain. And a free slot on top, for your heading.

All the movement is written in CSS. The script is only a bonus: switch it off and the backdrop draws and moves exactly the same.

Features

• Works without JavaScript — the ten animations are @keyframes. The script only adds two numeric settings, a generated sky and the pause when off screen.
• One variable for the scale — --sh-scale commands the size of the star tiles, the aurora's blur, its amplitude and the three shadows of the horizon. The drawing follows, not just the text.
• One variable for the colour — --sh-glow-rgb holds the aurora, the rim and its glow. Two variants ship with it: --ember et --violet.
• A seamless loop — the stars travel exactly one tile per cycle: the closing frame is the opening frame, measured identical to the pixel.
• It goes to sleep — the animation stops when the block leaves the screen and when the tab moves to the background.
• Decorative, and nothing else — the sky is aria-hidden, doesn't take focus, doesn't catch the pointer, holds still under prefers-reduced-motion and withdraws under forced colours and in print.

Dropping it into a page

Two files to load, then the eight layers:

<link rel="stylesheet" href="star-horizon.css">
<script src="star-horizon.js" defer></script>
<div class="star-horizon" data-star-horizon>
  <div class="star-horizon__sky" aria-hidden="true">
    <span class="star-horizon__base"></span>
    <span class="star-horizon__glow"></span>
    <span class="star-horizon__stars star-horizon__stars--far"></span>
    <span class="star-horizon__stars star-horizon__stars--mid"></span>
    <span class="star-horizon__stars star-horizon__stars--near"></span>
    <span class="star-horizon__horizon"></span>
    <span class="star-horizon__vignette"></span>
    <span class="star-horizon__grain"></span>
  </div>
  <div class="star-horizon__content">
    <h1>Your heading</h1>
  </div>
</div>

The block is one screen tall by default: --sh-height decides otherwise, and --sh-scale scales the whole drawing as you wish. The content is yours — the component forces no styling on it.

What you should know

• The sky's background isn't decorative. Three layers blend in screen and one in overlay: a blend only means something over an opaque base. So the component declares its own black — which makes the result independent of whatever lies behind. Changing --sh-space-rgb changes the base of the blend, not just a background colour.
• The text laid over it is your business. The gradient in the centre is light: a white heading loses contrast there. Plan a scrim behind your content, or turn down --sh-intensity.
• One flaw in the original has been fixed. The Framer component whose design is followed slides each layer by half a width: after a minute, the star field has left half the screen, then jumps back. Here it's the texture that travels, exactly one tile per cycle, at the same speed. data-sh-loop="raw" restores the original movement.
• The design comes from elsewhere. The proportions, the colours and the durations follow those of a Framer component, measured on the live site. The code itself is original: the rendering is in CSS where the original relied on an animation library.