Star horizon

Ce qui est inclus

Un fond spatial animé, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — les deux textures sont embarquées dans le CSS.

Huit couches empilées, de l’arrière vers l’avant : une brume froide, une aurore floutée qui oscille au-dessus de la ligne d’horizon, trois champs d’étoiles qui dérivent à trois vitesses, le disque noir d’une planète avec son liseré allumé, une vignette, un grain de pellicule. Et un emplacement libre par-dessus, pour votre titre.

Tout le mouvement est écrit en CSS. Le script n’est qu’un bonus : coupez-le, le fond dessine et bouge à l’identique.

Fonctionnalités

• Marche sans JavaScript — les dix animations sont des @keyframes. Le script n’ajoute que deux réglages numériques, un ciel généré et la mise en pause hors écran.
• Une variable pour l’échelle — --sh-scale commande la taille des tuiles d’étoiles, le flou de l’aurore, son amplitude et les trois ombres de l’horizon. Le dessin suit, pas seulement le texte.
• Une variable pour la couleur — --sh-glow-rgb tient l’aurore, le liseré et son halo. Deux variantes livrées : --ember et --violet.
• Boucle sans couture — les étoiles défilent d’exactement une tuile par cycle : l’image de fin est l’image de début, mesurée identique au pixel près.
• Il se met en veille — l’animation s’arrête quand le bloc quitte l’écran et quand l’onglet passe à l’arrière-plan.
• Décoratif, et rien d’autre — le ciel est aria-hidden, ne prend pas le focus, ne capte pas le pointeur, s’immobilise sous prefers-reduced-motion et se retire sous couleurs forcées et à l’impression.

Le poser dans une page

Deux fichiers à charger, puis les huit couches :

<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>Votre titre</h1>
  </div>
</div>

Le bloc fait une hauteur d’écran par défaut : --sh-height en décide autrement, et --sh-scale met tout le dessin à l’échelle voulue. Le contenu est à vous — le composant ne lui impose aucun style.

Ce qu’il faut savoir

• Le fond du ciel n’est pas décoratif. Trois couches se mélangent en screen et une en overlay : une fusion n’a de sens que sur une base opaque. Le composant déclare donc son propre noir — ce qui rend le résultat indépendant de ce qu’il y a derrière. Changer --sh-space-rgb change la base de la fusion, pas seulement une couleur de fond.
• Le texte posé dessus est votre affaire. Le dégradé du centre est clair : un titre blanc y perd du contraste. Prévoyez un voile derrière votre contenu, ou baissez --sh-intensity.
• Un défaut de l’original a été corrigé. Le composant Framer dont le dessin est repris fait glisser chaque couche d’une demi-largeur : passé une minute, le champ d’étoiles a quitté la moitié de l’écran, puis revient d’un coup. Ici c’est la texture qui défile, d’exactement une tuile par cycle, à la même vitesse. data-sh-loop="raw" rétablit le mouvement d’origine.
• Le dessin vient d’ailleurs. Les proportions, les couleurs et les durées reprennent celles d’un composant Framer, relevées sur le site en ligne. Le code, lui, est original : le rendu est en CSS quand l’original tenait par une bibliothèque d’animation.