Spectrum Gradient
Seize barres DOM en dégradé HSL rotatif — violet vers magenta, hauteurs pilotées par deux sinusoïdes et bruit, zéro canvas, zéro bibliothèque.
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
Seize <div class="bar"> sont injectés dans le conteneur .spectrum-gradient par le script d'initialisation. À chaque tick du requestAnimationFrame, chaque barre reçoit via .style.background un linear-gradient(to top, hsl(h, 80%, 50%), hsl(h+30, 80%, 60%)) recalculé, et via .style.height une nouvelle hauteur entre 10 et 110 px. La transition CSS height 0.05s lisse les sauts entre frames sans surcharger la boucle.
La teinte h de chaque barre suit (i / 16) × 60 + 240 + sin(t × 0,002) × 30. Le terme linéaire répartit les barres sur 60° du cercle chromatique (violet 240° → magenta 300°). Le terme sinusoïdal fait osciller toute la palette de ±30° en ~3 secondes, donnant l'impression que les couleurs respirent ensemble.
Les hauteurs proviennent de getSimulatedAudio(n, time) : pour chaque barre d'indice i, la fréquence locale est 1 + i × 0,5 et la valeur est |sin(t × freq × 0,002) × 0,5 + sin(t × freq × 0,003 + i) × 0,3 + rand × 0,2|, clampée à [0, 1]. Deux oscillateurs sinusoïdaux aux fréquences proportionnelles à l'indice créent des patterns montée/descente décalés ; le bruit aléatoire (20 %) reproduit l'irrégularité d'un vrai signal audio.
Accessibilité
- prefers-reduced-motion absent : le code ne détecte pas
prefers-reduced-motion— le rAF tourne en permanence quel que soit le réglage OS. À ajouter manuellement (voir FAQ). - Le conteneur
.spectrum-gradientne porte niaria-hiddennirole="img"niaria-label— les barres DOM sont accessibles au lecteur d'écran mais sans description sémantique. - L'effet est purement décoratif : aucun élément interactif n'y est attaché, le flux de tabulation clavier n'est pas affecté.
- La transition
height 0.05sreste active quelles que soient les préférences utilisateur — les hauteurs animées ne peuvent pas être désactivées par configuration. - Si l'effet est intégré dans un contexte sémantique, ajouter
aria-hidden="true"sur le conteneur ou unaria-labeldescriptif sur le parent.
Compatibilité navigateur
Requiert CSS flexbox, linear-gradient et requestAnimationFrame — supportés dans tous les navigateurs modernes. Zéro canvas, zéro dépendance externe.
Si JS est désactivé, les 16 barres restent à 10 px de hauteur sans dégradé — le conteneur s'affiche vide mais sans erreur fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="spectrum-gradient" id="spectrumGradient">
<!-- les .bar sont injectées par le JS à l'init -->
</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 |
|---|---|---|
| spectrumBarCount = 16 | 16 | Nombre de barres (constante JS). 8 = aéré, 32 = dense. Ajuster aussi gap CSS si > 24 barres. |
| .spectrum-gradient { height } | 120px | Hauteur max du conteneur (CSS). 200 px pour un hero pleine hauteur, 60–80 px pour un widget compact. |
| .spectrum-gradient .bar { width } | 12px | Largeur de chaque barre (CSS). 8 px = spectre serré, 16–20 px = effet graphique fort. |
| .bars-3d, .spectrum-gradient { gap } | 3px | Espacement entre barres (CSS, règle partagée avec .bars-3d). 1 px = dense, 6 px = aéré. |
| hue offset +240 | 240 | Teinte HSL de départ dans animateSpectrumGradient. 0 = rouge, 120 = vert, 180 = cyan, 240 = violet (défaut). |
| hue range ×60 | 60 | Plage de teintes sur les 16 barres (degrés). 30 = monochrome serré, 120 = dégradé arc-en-ciel large. |
| amplitude ×100 | 100 | Facteur de hauteur dans 10 + data[i] * 100. 40–50 = discret en overlay, 150 = dramatique pleine hauteur. |
| rotation speed 0.002 | 0.002 | Vitesse d'oscillation HSL (Math.sin(time * 0.002)). 0.001 = très lent (~6 s/cycle), 0.005 = rapide (~1 s/cycle). |
FAQ
<div> avec un linear-gradient CSS recalculé à chaque frame par requestAnimationFrame. Aucun canvas, aucune dépendance npm. Copiez le HTML, le CSS et le JS dans votre projet et l'effet est opérationnel.getSimulatedAudio(count, time) dans animateSpectrumGradient par une lecture d'un AnalyserNode.getByteFrequencyData(). Les barres attendent des valeurs dans [0, 1] — normalisez les 16 premières bins du Uint8Array (÷ 255) et passez-les directement.const REDUCE = window.matchMedia('(prefers-reduced-motion: reduce)').matches;. Dans la fonction animate, conditionnez la récursion : if (!REDUCE) requestAnimationFrame(animate); — les barres se figent à leur hauteur courante sans boucler.
