XR Environment
Un décor de salle d'attente virtuelle : ciel en dégradé nuit, 40 étoiles placées au hasard qui scintillent chacune à son rythme, sol quadrillé incliné en perspective sur les 40 % du bas, et deux carrés dégradés, violet et rose, qui flottent au-dessus de l'horizon. Une ambiance « espace virtuel » en CSS et 14 lignes de JavaScript — pas de casque, pas de WebXR, aucune interaction.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0050-root (fond #0a0a0f, 300 px de haut au minimum) contient le décor .xr-environment (toute la largeur, 300 px au minimum, overflow: hidden), peint d'un dégradé vertical #0a0a2e → #1a1a3e → #2a2a4e. Le sol .xr-env-ground occupe les 40 % du bas, souligné d'un filet indigo ; il porte une perspective de 300 px, et son quadrillage .xr-env-grid-floor (lignes indigo à 10 % tous les 30 px) est couché par rotateX(60deg) depuis son bord haut : les lignes se resserrent vers l'horizon. Les deux objets .xr-env-obj sont des carrés de 30 px aux coins arrondis, posés à 30 % et 60 % de la largeur, juste au-dessus de l'horizon (42 % du bas), qui montent et descendent de 10 px en 3 s, le second décalé d'une seconde.
Le script crée 40 .xr-env-star de 2 px dans chaque .xr-env-stars trouvé sous une racine .fx-0050-root : position au hasard sur toute la largeur et les 60 % du haut, scintillement (opacité de 0,3 à 1) d'une durée tirée entre 1,5 et 3,5 s et d'un départ décalé de 0 à 3 s, si bien qu'aucune étoile ne bat en même temps que sa voisine. Chaque étoile reçoit aussi une opacité fixe au hasard, que l'animation recouvre et qui sert quand le mouvement est réduit. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : deux copies de l'effet sur une page ont chacune leurs 40 étoiles, et 0,35 à 0,41 % des pixels changent en 0,8 s.
Les positions étant tirées au hasard, le ciel change à chaque chargement : c'est voulu pour un fond d'ambiance, mais deux captures ne sont jamais identiques. Le nom du catalogue dit « XR » : rien ici ne parle à un casque ni à WebXR, les « objets 3D » sont des carrés plats et le ciel est un dégradé, pas une skybox. C'est l'image d'un hall virtuel, faite pour une page web. Coût faible : 42 petites animations d'opacity et de transform, aucune boucle JavaScript une fois les étoiles posées.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0050-rootarrête le scintillement et le flottement : le ciel reste piqué d'étoiles d'éclats différents (l'opacité fixe tirée par le script) et les deux carrés attendent immobiles au-dessus de l'horizon. Mesuré : 0 animation et 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit. - Décor : aucun texte, aucune information, aucune interaction ; les étoiles et les carrés sont des
divvides que les lecteurs d'écran ignorent. Le texte que vous posez par-dessus (horaire, titre, consigne) reste du texte normal, comme dans les scènes ci-dessus. - Scintillement : 40 points de 2 px dont l'opacité varie doucement sur 1,5 à 3,5 s, jamais en même temps : pas de clignotement d'ensemble ni de flash, la luminosité générale de la scène ne bouge pas.
- Contraste du texte posé dessus : le ciel va de
#0a0a2eà#2a2a4e; un texte blanc y dépasse 13:1 (calculé sur la teinte la plus claire). Les étoiles blanches occupent les 60 % du haut : un petit texte gris clair s'y perdrait, préférez un texte blanc assez gros ou posé sur une carte, comme dans la scène 3.
Compatibilité navigateur
CSS (dégradés, animations d'opacity et de transform, perspective et rotateX pour le sol, inset) + 14 lignes de JavaScript (création des étoiles), aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : sol incliné, 40 étoiles par copie, deux copies indépendantes, arrêt en mouvement réduit. Dans WebKit 26, étoiles, objets et arrêt sont identiques, mais le WebKit de Playwright aplatit toute 3D CSS : le sol incliné sur Safari n'a pas été vérifié sur un vrai Safari.
Sans JavaScript, le ciel reste vide d'étoiles : dégradé, sol et objets flottants restent. Sans transformations 3D, le quadrillage du sol reste droit, sans fuite vers l'horizon. Les versions minimales viennent de la propriété inset du calque d'étoiles : avec top: 0; right: 0; bottom: 0; left: 0 à la place, l'effet descend à des navigateurs bien plus anciens.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0050-root">
<div class="xr-environment" style="width:100%;min-height:300px;">
<div class="xr-env-stars"></div> <!-- 40 étoiles ajoutées par le script -->
<div class="xr-env-obj" style="left: 30%; background: linear-gradient(135deg, #6366f1, #a855f7); animation-delay: 0s;"></div>
<div class="xr-env-obj" style="left: 60%; background: linear-gradient(135deg, #ec4899, #f43f5e); animation-delay: 1s;"></div>
<div class="xr-env-ground">
<div class="xr-env-grid-floor"></div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Nombre d'étoiles (JS — i < 40) |
40 par décor | 80 donne un ciel dense, 15 un ciel de ville. Au-delà de 200, pensez au coût : chaque étoile est une animation. |
Zone des étoiles (JS — Math.random() * 60 + '%' pour top) |
les 60 % du haut | Gardez-la au-dessus de l'horizon (60 % tant que le sol occupe 40 %), sinon des étoiles tombent sur le sol. |
Rythme du scintillement (JS — 1.5 + Math.random() * 2 et Math.random() * 3) |
durées de 1,5 à 3,5 s, départs de 0 à 3 s | Des durées de 3 à 6 s donnent un ciel plus calme ; resserrées autour de 1 s, il grésille. Gardez un départ au hasard : des étoiles synchronisées clignoteraient ensemble. |
Objets flottants (HTML — style en ligne de chaque .xr-env-obj) |
2 carrés de 30 px, à 30 % et 60 %, violet et rose | Changez left, background et animation-delay dans le style en ligne ; ajoutez-en d'autres en copiant la ligne. Pour un décalage dès le chargement, préférez un délai négatif (-1.5s). |
Sol (CSS — .xr-env-ground 40 %, perspective: 300px, rotateX(60deg), quadrillage 30 px) |
40 % de la hauteur, 60°, lignes indigo à 10 % | Une perspective plus courte (200 px) et 70° donnent un sol plus fuyant ; des lignes plus opaques (50 à 75 %) et colorées donnent l'allure néon de la scène 2. |
Ciel (CSS — background de .xr-environment) |
#0a0a2e → #1a1a3e → #2a2a4e | Tout dégradé vertical convient ; gardez le haut sombre pour que les étoiles blanches restent visibles. |
FAQ
Math.random() : position, opacité, durée et départ du scintillement. Pour un ciel identique à chaque visite, remplacez Math.random() par un petit générateur à graine (une suite de nombres toujours la même), ou écrivez les étoiles une à une dans le HTML.
