Neon Glow Bars
15 barres DOM cyan / rose / violet pulsent sur une simulation audio double-sinus — halo néon CSS 3 couches (5–40 px) piloté par un unique rAF, aucun canvas.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque barre est un <div> de 10 px de large avec border-radius: 5px 5px 0 0. Le néon est rendu entièrement en CSS : un box-shadow triple couche de la même couleur — 10 px (halo interne), 20 px (diffusion), 40 px (bloom large) — que le JS réécrit à chaque frame pour faire respirer l'intensité avec le signal. Aucun canvas, aucun SVG.
Le signal simulé vient de getSimulatedAudio(15, time, 1.5) qui produit pour chaque barre i la valeur |sin(t × freq × 0.002) × 0.5 + sin(t × freq × 0.003 + i) × 0.3 + rand × 0.2|, avec freq = 1.5 + i × 0.5. Deux sinusoïdes à vitesses de phase différentes par barre créent une forme d'EQ convaincante sans AudioContext ; le bruit aléatoire à 20 % ajoute la micro-variation organique.
L'intensité du halo vaut 0.5 + data[i] × 0.5 (plage 0.5–1.0). Les rayons du box-shadow sont multipliés par cette valeur : 0 0 ${10×intensity}px color etc. Quand la barre est basse, le halo est atténué à moitié ; au pic, il atteint son plein bloom de 40 px. La hauteur de la barre suit 10 + data[i] × 100 px (plage 10–110 px) dans un conteneur de 120 px.
Le CSS ajoute transition: height .05s sur chaque barre, ce qui lisse le saut entre deux frames rAF sans calcul JS supplémentaire. La boucle principale — un unique requestAnimationFrame partagé — appelle animateNeonBars(time) avec le timestamp DOMHighResTimeStamp, ce qui rend l'animation stable quel que soit le framerate de l'écran.
Accessibilité
- prefers-reduced-motion absent : le code ne contient pas de vérification de cette media query — l'animation tourne en continu même si l'utilisateur a activé « Réduire les animations » dans son OS. À ajouter manuellement pour respecter WCAG 2.1 SC 2.3.3 :
if (window.matchMedia('(prefers-reduced-motion:reduce)').matches) return;avant lerequestAnimationFrame. - Pas d'aria-hidden sur le conteneur
.neon-bars— les lecteurs d'écran traversent les barres sans annonce utile. Ajouteraria-hidden="true"dès que les barres sont purement décoratives. - Pas de role ni aria-label sur la scène. Selon le contexte, encapsulez dans
role="img"avec unaria-labeldescriptif (ex. « Visualiseur audio simulé »). - Les barres ne portent pas de texte — aucun problème de contraste sur les éléments animés eux-mêmes. Vérifier le contraste du contenu textuel overlay appliqué en sus (ratio ≥ 4,5:1 WCAG AA).
- Aucune interactivité clavier sur les barres — elles ne captent pas le focus et n'interceptent pas les événements clavier.
Compatibilité navigateur
Nécessite CSS box-shadow, requestAnimationFrame et DOM manipulation — supportés dans tous les navigateurs modernes. Pas de canvas ni de WebGL.
Si JS est désactivé, les barres HTML initiales restent affichées statiquement avec leurs styles inline. Aucune erreur, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="neon-bars" id="neonBars" aria-hidden="true">
<!-- Barres créées par JS — 15 × alternance cyan / pink / purple -->
<div class="bar cyan"></div>
<div class="bar pink"></div>
<div class="bar purple"></div>
<!-- … 12 autres barres … -->
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| CSS .neon-bars .bar.cyan { background: … } | #06b6d4 | Couleur de remplissage et teinte du halo des barres cyan. Changez en même temps le background et les couleurs du box-shadow (3 occurrences). |
| CSS .neon-bars .bar.pink { background: … } | #d946ef | Couleur des barres rose. Remplacez les 4 occurrences (#d946ef) pour changer la teinte complète. |
| CSS .neon-bars .bar.purple { background: … } | #8b5cf6 | Couleur des barres violet. Même principe — 4 occurrences dans le CSS. |
| CSS .neon-bars { height: 120px } | 120px | Hauteur du conteneur = plafond de la barre la plus haute. Augmenter pour un effet plus spectaculaire, réduire pour une intégration discrète. |
| CSS .neon-bars { gap: 6px } | 6px | Espacement horizontal entre les barres. À 2–3 px les barres se rapprochent pour un effet dense ; à 10–12 px le rendu est plus aéré. |
| JS neonBarCount = 15 | 15 | Nombre de barres créées. Plage utile : 8 (discret) à 32 (spectre dense). Modifier avant la création DOM (ligne const neonBarCount dans la section Audio Visualizer). |
| JS getSimulatedAudio(…, 1.5) | 1.5 | 3e argument = fréquence de base des sinusoïdes. 0.5 = mouvement très lent et ondulant, 3.0 = agité et nerveux. N'a pas d'effet sur la couleur. |
| JS const intensity = 0.5 + data[i] * 0.5 | 0.5 + data[i] * 0.5 | Formule d'intensité du halo. Remplacer par 0.8 + data[i] * 0.2 pour un bloom fort en permanence ; 0.2 + data[i] * 0.8 pour un halo très contrasté pic/creux. |
FAQ
getSimulatedAudio() superpose deux sinusoïdes à vitesses de phase différentes par barre, plus un bruit aléatoire à 20 %. Pour brancher un vrai analyser FFT, remplacez les valeurs retournées par celles d'un AnalyserNode.getByteFrequencyData() normalisées entre 0 et 1.requestAnimationFrame(animate) par const rafId = requestAnimationFrame(animate) — puis appelez cancelAnimationFrame(rafId) quand nécessaire (unmount de composant, sortie de vue, etc.).neonBarCount est lu à l'initialisation. Pour reconfigurer : videz le conteneur (neonBars.innerHTML = ''), ajustez la constante, recréez les barres avec la boucle for d'initialisation. La boucle rAF déjà active reprendra l'animation sur le nouveau DOM sans relance.
