Hologram Projection
Un panneau cyan translucide qui flotte et bascule doucement, parcouru de fines lignes de balayage, avec un halo projeté dessous : un hologramme en CSS pur.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le panneau .hlp-panel (200×200 px, coins de 10 px) est rempli d'un dégradé cyan qui passe de 10 % d'opacité en haut à 30 % en bas, bordé d'un trait cyan à 50 %. Son contenu est centré, en gras, couleur #0ff, avec une double lueur (text-shadow de 10 et 20 px).
L'animation hlpFloat le soulève de 10 px en 3 secondes tout en le faisant basculer de 5° vers l'arrière puis de 5° vers l'avant (rotateX). La perspective de 1 000 px posée sur .hlp-stage rend cette bascule visible.
Deux pseudo-éléments complètent l'illusion. ::before couvre le panneau de lignes horizontales d'1 px tous les 2 px, qui défilent en continu (cycle de 0,1 s). ::after dessine 50 px plus bas un halo ovale flou, comme la lumière du projecteur au sol ; il suit le panneau dans son mouvement.
Accessibilité
- Texte réel : le contenu du panneau (« HOLO » par défaut) est du texte HTML, lu normalement. Une image ou un schéma placé dedans garde son propre texte alternatif.
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le panneau reste à plat et immobile et les lignes de balayage s'arrêtent ; tout reste affiché (mesuré : 4 animations en boucle → 0 pour deux copies). - Pas de clignotement : les lignes de balayage sont très pâles (cyan à 10 %) ; leur défilement rapide produit un frémissement, pas un flash.
- Lien ou bouton : la classe peut être posée sur un
<a>; il reçoit alors un contour de focus de la couleur de l'hologramme. Pour un message qui apparaît, ajoutez vous-mêmerole="status". - Lisibilité : la lueur du texte élargit les lettres ; au-dessous de 13 px, réduisez-la dans votre CSS.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151 et Firefox 153 : 0 erreur, bascule 3D visible, deux copies indépendantes, rien qui déborde à 390 px. Dans le WebKit 26.5 de Playwright, le panneau flotte et les lignes défilent ; cet outil n'étant pas une référence fiable pour la 3D CSS, la bascule reste non vérifiée pour Safari.
Sans transformations 3D, le panneau monte et descend sans basculer ; les lignes et le halo restent.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0266-root">
<div class="hlp-stage">
<div class="hlp-panel">HOLO</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 |
|---|---|---|
--hlp-w et --hlp-h |
200px et 200px |
Taille du panneau ; 100% pour suivre le conteneur (jamais plus large que lui). |
--hlp-color |
#0ff |
Couleur du texte, de sa lueur et du contour de focus. |
--hlp-fill-top, --hlp-fill-bottom, --hlp-edge |
cyan à 10 %, 30 % et 50 % | Dégradé du panneau et couleur de sa bordure : changez-les avec --hlp-color pour un hologramme vert ou ambre. |
--hlp-lines et --hlp-floor |
cyan à 10 % et 30 % | Couleur des lignes de balayage et du halo au sol. |
--hlp-lift et --hlp-tilt |
10px et 5deg |
Hauteur du flottement et angle de bascule. |
--hlp-speed |
3s |
Durée d'un flottement complet. |
--hlp-radius |
10px |
Arrondi des coins (la moitié de la hauteur pour une pilule). |
--hlp-bg et --hlp-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour l'intégrer. Laissez environ 60 px sous le panneau pour le halo. |
FAQ
.hlp-panel est centré et flotte avec lui. Un SVG tracé en currentColor prend directement la couleur de l'hologramme.overflow: hidden du parent.--hlp-color pour le texte, puis les variantes transparentes de la même teinte pour le remplissage, la bordure, les lignes et le halo.
