Laser Beam
Trois faisceaux laser aux couleurs de l'arc-en-ciel qui s'étirent et se rétractent tour à tour dans un cadre sombre, derrière un mot lumineux.
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
La boîte .lsb-box (300×200 px, fond #050510, coins de 16 px) cache ce qui dépasse. Elle contient trois faisceaux horizontaux .lsb-beam : un de 4 px au milieu, deux de 2 px à 30 % et 70 % de la hauteur. Chacun est peint d'un dégradé qui passe du transparent au rouge, orange, jaune, vert, cyan, bleu, violet, magenta, puis de nouveau au transparent.
Autour de chaque faisceau, deux copies floues de la même couleur (::before à 15 px de flou, ::after à 30 px) font le halo. L'animation lsbMove (3 s) le rétracte à 30 % de sa longueur, un peu à gauche du centre et à demi-transparent, puis l'étire sur toute la largeur, pleinement lumineux. Le faisceau du haut est décalé d'une demi-période, celui du bas d'un quart : les trois n'atteignent jamais leur pleine longueur au même moment.
Le mot .lsb-text (« LASER ») passe au-dessus des faisceaux, en blanc avec une lueur blanche, cyan et magenta. Il est facultatif : sans lui, il ne reste que les faisceaux. Les faisceaux ne balaient pas l'écran de haut en bas, ils restent à leur hauteur.
Accessibilité
- Texte réel : le mot est du texte HTML lu normalement ; les trois faisceaux sont masqués aux lecteurs d'écran (
aria-hidden="true"). - Mouvement réduit : avec
prefers-reduced-motion: reduce, les faisceaux restent étirés sur toute la largeur et ne bougent plus (mesuré : 6 animations en boucle → 0 pour deux copies). - Pas de clignotement : la luminosité varie de moitié en 1,5 s, progressivement ; aucun éclat brusque.
- Contraste : le mot blanc sur
#050510dépasse 19:1 ; sa lueur colorée ne gêne la lecture qu'à très petite taille. - Aucune interaction : rien ne réagit au survol, au clic ni au clavier.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, rien qui déborde à 390 px, faisceaux figés en mouvement réduit. Version minimale fixée par la propriété inset des halos.
Sans filter, les faisceaux s'affichent en traits nets sans halo ; leur mouvement est conservé.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0270-root">
<div class="lsb-box">
<div class="lsb-beam" aria-hidden="true"></div>
<div class="lsb-beam lsb-beam-2" aria-hidden="true"></div>
<div class="lsb-beam lsb-beam-3" aria-hidden="true"></div>
<span class="lsb-text">LASER</span>
</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 |
|---|---|---|
--lsb-w et --lsb-h |
300px et 200px |
Taille de la boîte ; 100% pour suivre le conteneur (jamais plus large que lui). |
--lsb-panel |
#050510 |
Fond de la boîte ; transparent ou une teinte translucide pour poser les faisceaux sur une image. |
--lsb-spectrum |
dégradé arc-en-ciel à bouts transparents | Couleur des faisceaux et de leurs halos : un dégradé de rouges pour un lecteur de codes, de verts pour un écran de jeu. |
--lsb-main et --lsb-side |
4px et 2px |
Épaisseur du faisceau central et des deux faisceaux latéraux. |
--lsb-speed |
3s |
Durée d'un cycle ; le décalage des faisceaux latéraux suit automatiquement. |
--lsb-text et --lsb-font |
#fff et 1.5rem |
Couleur et taille du mot central (retirez .lsb-text pour n'avoir que les faisceaux). |
--lsb-radius |
16px |
Arrondi des coins de la boîte. |
--lsb-bg et --lsb-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour l'intégrer à votre page. |
FAQ
--lsb-spectrum par un dégradé d'une teinte, en gardant les bouts transparents, par exemple linear-gradient(90deg, transparent, #ff2a2a 15%, #ff6a5a 50%, #ff2a2a 85%, transparent). Les halos reprennent la même couleur..lsb-text accepte n'importe quel texte court, comme un nom de marque ou un pourcentage mis à jour par votre script. Il reste toujours au-dessus des faisceaux.
