3DGratuit

Holographic Display

Un cadre carré de 120 px, translucide, au bord indigo qui « respire » (halo de 20 à 40 px en 3 s), traversé de haut en bas par une ligne de balayage (2 s) et par un reflet prismatique en diagonale qui tourne (4 s) sans sortir du cadre : une plaque d'hologramme de science-fiction, vide, prête à recevoir votre dessin ou votre logo — CSS seul, zéro JavaScript, hologramme immobile et lisible si l'utilisateur réduit les animations.

CSSHologrammeAnimation

Mis à jour le 31 octobre 2026

Survolez ou cliquez la scène pour interagir

Cet effet est gratuit — la catégorie 3D en contient 50 au total, dont 8 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →

Voir dans le catalogue Compte gratuit : aperçu en direct + 1 effet offert

Exemples d'usage

Les Confins · jeu de rôle SF

Le Mirage

Classe corvette · fiche de vaisseau n° 12

Équipage 6
Saut 3 parsecs
Coque légère, rapide

① La fiche holographique du vaisseau — site d'une association de jeu de rôle de science-fiction

QuandFiche n° 12 de l'univers du jeu : la silhouette du Mirage, corvette de l'équipage, projetée dans le cadre, et ses caractéristiques à côté (équipage 6, saut 3 parsecs, coque légère).

PourquoiBalayage et halo qui respire suffisent à dire « projection holographique » : c'est le décor de l'univers du jeu, et la fiche se lit comme un écran de bord.

RéglagesCadre agrandi à 150 px ; silhouette du vaisseau en svg, premier enfant du cadre, remplie d'indigo à 28 % et tracée en #a5b4fc ; racine sans fond ni hauteur fixe, posée sur un ciel étoilé.

Spectacle de magie

Le Génie d'Ali

Dimanche 15 h · dès 4 ans · 50 min

Réserver des places

② L'apparition du génie — page de réservation d'un spectacle de magie pour enfants

QuandAnnonce du spectacle « Le Génie d'Ali », dimanche à 15 h, dès 4 ans : la silhouette du génie apparaît dans le cadre, posé au-dessus d'une lampe dorée dessinée en CSS, à côté du bouton de réservation.

PourquoiLe scintillement et la ligne qui balaie donnent une apparition légère et crédible, sans vidéo ni image animée, et sans rien d'effrayant pour les plus petits.

RéglagesCadre de 150 px au haut arrondi en dôme (border-radius: 50% 50% 12px 12px) ; génie en svg violet clair ; lampe en CSS sous la racine ; fond violet profond.

Club robotique du collège

Trophées de robotique : 3e place régionale !

Neuf élèves de 4e et 3e, un robot construit dans la salle du club, et Bolt, notre mascotte.

③ La mascotte du club en hologramme — page d'un club de robotique de collège

QuandAnnonce des résultats aux trophées de robotique : Bolt, le robot-mascotte du club, projeté dans le cadre, à côté du titre « 3e place régionale ! » et d'un mot sur les neuf élèves.

PourquoiL'hologramme convient à un club technique : la mascotte paraît projetée par une machine, et l'effet ne demande ni image animée ni JavaScript, donc rien à installer sur le site du collège.

RéglagesCadre de 150 px, bord recoloré cyan (rgba(34,211,238,.45)) ; robot en svg cyan à traits fins ; fond bleu pétrole ; texte du titre en blanc et jaune.

Comment ça marche

La racine .fx-0045-root fait 250 px de haut, fond rgb(26,26,36), et centre .xr-holo-display, qui occupe toute sa surface. Au milieu, .xr-holo-box est le cadre : 120 × 120 px, coins de 8 px, bord de 1 px indigo à 30 %, fond indigo à 5 %, et overflow: hidden. Il contient deux calques, la ligne .xr-holo-scanline et le reflet .xr-holo-prism.

Trois boucles indépendantes font l'hologramme. Le cadre anime son box-shadow en 3 s : un halo indigo de 20 px à 20 %, qui monte à 40 px à 40 % avec une lueur intérieure, puis redescend. La ligne de balayage, 2 px de haut, en dégradé transparent → indigo → transparent, descend du haut au bas du cadre en 2 s (animation de top, de 0 à 100 %), à vitesse constante, et recommence en haut. Le reflet couvre tout le cadre (inset: 0) : une bande diagonale indigo et violette à 10 %, entre 30 et 70 % du dégradé, qui tourne d'un tour complet en 4 s.

Le reflet est un carré qui tourne : à 45°, ses coins dépassent du cadre de plus de 20 px. C'est overflow: hidden sur le cadre qui garde le reflet à l'intérieur ; sans lui, deux pointes de losange apparaissent au-dessus et au-dessous. Le cadre est vide : posez votre contenu (svg, image, texte) comme premier enfant de .xr-holo-box, avant la ligne et le reflet, pour qu'ils passent par-dessus, comme dans les trois exemples ci-dessus.

Accessibilité

Mouvement réduit : sous prefers-reduced-motion: reduce, un bloc limité à .fx-0045-root arrête les trois boucles : halo fixe de 30 px, ligne de balayage posée à mi-hauteur, reflet immobile. L'hologramme reste reconnaissable. Mesuré : 0 % de pixels changés en 0,8 s dans Chromium, Firefox et WebKit, contre 3,2 % en mode normal.
Contenu décoratif : le cadre et ses calques sont des div vides, ignorés des lecteurs d'écran. Le contenu que vous y placez porte l'information : donnez un texte alternatif à l'image, ou aria-hidden="true" à un dessin purement décoratif accompagné d'un texte visible.
Contraste : le cadre est volontairement pâle (bord à 30 %, fond à 5 %) ; ce que vous mettez dedans doit porter son propre contraste. Le reflet et la ligne de balayage ne dépassent pas 60 % d'opacité et ne masquent pas un texte posé dans le cadre.
Rythme : trois boucles lentes (2, 3 et 4 s), sans clignotement ni flash ; la ligne de balayage ne passe qu'une fois toutes les 2 s.

Compatibilité navigateur

CSS seul : animations de box-shadow, de top et de transform: rotate(), dégradés linéaires, aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (le moteur de Safari) : même rendu, reflet gardé dans le cadre, même arrêt sous mouvement réduit. Non vérifié sur un vrai Safari.

Chrome✓ Complet

Firefox✓ Complet

Safari✓ WebKit 26 mesuré, Safari non vérifié

Edge✓ Complet

Mobile iOS✓ Non vérifié sur un appareil

Android Chrome✓ Complet

Aucune propriété récente : tous les navigateurs actuels affichent le cadre, son halo, la ligne de balayage et le reflet. Sans animations CSS, il reste un cadre indigo translucide avec une ligne en haut et une bande diagonale.

Le code

Copiez les trois blocs dans votre page. Aucune dépendance.

HTML

<div class="fx-0045-root">
  <div class="xr-holo-display">
    <div class="xr-holo-box">
      <div class="xr-holo-scanline"></div>
      <div class="xr-holo-prism"></div>
    </div>
  </div>
</div>

CSS

.fx-0045-root,
.fx-0045-root *,
.fx-0045-root *::before,
.fx-0045-root *::after {
  box-sizing: border-box
}

.fx-0045-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.xr-holo-display {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.xr-holo-box {
  width: 120px;
  height: 120px;
  position: relative;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.05);
  /* Keeps the rotating prism reflection inside the frame */
  overflow: hidden;
  animation: xrHoloPulse 3s ease-in-out infinite;
}

.xr-holo-scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
  animation: xrScanline 2s linear infinite;
}

.xr-holo-prism {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(99, 102, 241, 0.1) 45%, rgba(168, 85, 247, 0.1) 55%, transparent 70%);
  animation: xrPrism 4s linear infinite;
}

@keyframes xrScanline {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}

@keyframes xrHoloPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4), inset 0 0 20px rgba(99, 102, 241, 0.1);
  }
}

@keyframes xrPrism {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Reduced motion: still hologram, scanline at mid-height, steady glow */
@media (prefers-reduced-motion: reduce) {
  .fx-0045-root .xr-holo-box {
    animation: none;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3), inset 0 0 10px rgba(99, 102, 241, 0.05);
  }

  .fx-0045-root .xr-holo-scanline {
    animation: none;
    top: 50%;
  }

  .fx-0045-root .xr-holo-prism {
    animation: none;
  }
}

JavaScript (fx-0045)

Personnaliser

Options passées à l'API ou attributs data-* :

Option / propriété	Défaut	Effet
Taille du cadre (CSS — `.xr-holo-box`)	120 × 120 px	Agrandissez jusqu'à 200 px environ : la ligne et le reflet suivent, ils sont en pourcentages. Au-delà, le halo de 40 px paraît mince ; augmentez-le dans `xrHoloPulse`.
Couleur (CSS — bord, fond, halo, ligne, reflet)	Indigo rgba(99,102,241,…) et violet rgba(168,85,247,.1)	Remplacez la même teinte dans les cinq endroits : cyan `34,211,238` pour un écran technique, vert `74,222,128` pour un terminal rétro.
Vitesse du balayage (CSS — `xrScanline 2s`)	2 s par passage	1 s donne un scan nerveux, 4 s un balayage calme. La ligne descend à vitesse constante (`linear`).
Respiration du halo (CSS — `xrHoloPulse 3s`)	3 s, halo de 20 à 40 px	Allongez à 5 s pour un objet au repos ; montez l'opacité du halo pour un fond plus clair.
Contenu (HTML — dans `.xr-holo-box`)	Cadre vide	Placez un svg, une image ou un texte en premier enfant, en `position: absolute`, pour que la ligne et le reflet passent par-dessus. Un contenu transparent ou en traits fins garde l'aspect projeté.
Fond et hauteur (CSS — `.fx-0045-root`)	rgb(26,26,36), 250 px	Retirez le fond et la hauteur fixe pour poser l'hologramme dans votre page ; il reste visible sur fond sombre, beaucoup moins sur fond blanc.

FAQ

Comment mettre un logo ou une image dans l'hologramme ?

Ajoutez-le comme premier enfant de .xr-holo-box, en position: absolute (par exemple inset: 14%), avant .xr-holo-scanline et .xr-holo-prism : la ligne et le reflet passent alors par-dessus, ce qui donne l'effet de projection. Un svg en traits fins et remplissage translucide rend mieux qu'une photo opaque.

Pourquoi le cadre est-il en overflow: hidden ?

Le reflet est un carré de la taille du cadre qui tourne sur lui-même : à 45°, ses coins dépassent de plus de 20 px. Sans overflow: hidden, deux pointes de losange apparaissent au-dessus et au-dessous du cadre. Le revers : un contenu que vous voudriez faire dépasser du cadre sera coupé ; posez-le alors à côté du cadre, pas dedans.

Est-ce que l'effet coûte cher à animer ?

Il anime top (la ligne) et box-shadow (le halo), deux propriétés que le navigateur redessine à chaque image, contrairement à transform. Pour un cadre de 120 px, c'est sans importance. Si vous affichez des dizaines d'hologrammes, remplacez l'animation de la ligne par transform: translateY() et gardez un halo fixe.

Fondamentaux

Design & Visuels

Animations & Scroll

Galerie & Plus