ASTRA
Expérience éditoriale
Un recensement poétique de cent étoiles réelles : un champ stellaire vivant, un catalogue qui défile à l'horizontale et une fiche illustrée pour chaque astre.
Fiche technique
- Type
- Site éditorial one-page
- Périmètre
- Concept, rédaction des fiches, 3D, illustration générative, intégration
- Stack
- HTML · CSS · JavaScript · Three.js · Canvas 2D
- Contenu
- 100 étoiles, 42 constellations, jusqu'à 163 000 années-lumière
01 — Contexte
Montrer qu'un site peut être à la fois un objet d'émotion et une base de données lisible, avec de vraies informations scientifiques.
02 — Défi
Cent fiches, cent visuels : impossible à produire à la main sans alourdir le site. Et un fond animé ne doit jamais coûter en lisibilité ni en batterie.
03 — Réponse
Chaque portrait d'étoile est dessiné par le code à partir de son type spectral. Le site tient dans un seul fichier HTML de 94 Ko, sans image produit.
Ce qui a été construit
Un chargement qui compte les étoiles
Le préchargement recense les 100 étoiles du catalogue avant d'ouvrir le ciel.
Un champ stellaire vivant
6 500 étoiles (3 000 sur mobile) avec un shader de scintillement propre à chacune, des nébuleuses en fusion additive et une caméra qui dérive selon la souris ou le doigt.
Le registre des cent étoiles
Un catalogue horizontal au clavier, à la souris ou au doigt, avec compteur de position et barre de progression.
Des portraits générés par le code
Rigel, supergéante bleue : couleur issue du type spectral, aigrettes de diffraction pour les étoiles chaudes. Le tirage aléatoire est fixé par le nom de l'étoile, donc chaque astre garde toujours le même portrait.
Une échelle de température lisible
Bételgeuse, 3 500 K : le curseur se place sur une échelle de 2 000 à 50 000 K. Distance, magnitude, luminosité et rayon sont renseignés pour chaque fiche.
Les cas extrêmes ont leur propre rendu
Les pulsars reçoivent des anneaux concentriques. La navigation Précédent / Suivant parcourt tout le registre sans refermer la fiche.
Un ciel qui répond à la main
Une section entière laisse le champ stellaire au premier plan : on le fait tourner en bougeant le curseur.
Une signature typographique
Le manifeste se clôt sur « UNCOUNTED », en capitales gravées au pied de la page.
Sur petit écran, moins d'étoiles et un anticrénelage désactivé pour préserver la batterie.
Sous le capot
- Three.js chargé depuis un CDN avec contrôle d'intégrité (SRI)
- Shader de points : taille, couleur et phase de scintillement par étoile
- Portraits en Canvas 2D avec générateur pseudo-aléatoire déterministe (mulberry32) seedé sur le nom
- Rendu suspendu quand une fiche est ouverte ou l'onglet masqué
- Repli sans WebGL, scintillement figé avec prefers-reduced-motion
- Fenêtre modale accessible : piège de focus, Échap, annonce de position pour les lecteurs d'écran
- En-têtes de sécurité déclarés dans vercel.json
Un projet similaire à concevoir ?
Décrivez-nous votre contrainte technique. Nous vous répondons sous 48h avec une approche concrète.