Fireflies
Huit lucioles CSS flottent aléatoirement sur fond sombre — trois animations de dérive indépendantes croisées à un scintillement d'opacité pulsé, zéro JavaScript.
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
L'effet repose sur trois keyframes de flottement (fireflyFloat1, fireflyFloat2, fireflyFloat3) et une keyframe de pulsation (fireflyGlow), toutes déclarées en CSS pur — aucun requestAnimationFrame, aucun DOM manipulé. Chaque keyframe de flottement définit quatre points de passage (25 %, 50 %, 75 %, 100 %) avec des translations différentes (±10 à ±25 px en X et Y) pour simuler un vol naturel et imprévisible.
Chaque .firefly combine deux animations simultanées : une animation de dérive (durée 5 s à 9 s, direction normale ou reverse) et l'animation de pulsation (fireflyGlow — opacité 0,2 → 1 → 0,2, durée 1,5 s à 3 s avec des animation-delay décalés de 0 à 1,2 s). Ce croisement de fréquences crée l'impression que chaque luciole bat à son propre rythme.
L'aspect lumineux est obtenu par double box-shadow : un halo intérieur (rgba(255,255,170,.8) 0 0 6px 2px) et un halo extérieur diffus (rgba(255,255,170,.4) 0 0 12px 4px) sur un point de 4×4 px avec border-radius: 50% et couleur #ffa. Quand l'opacité descend à 0,2 via fireflyGlow, le halo devient quasi invisible — la luciole « s'éteint ».
La répartition spatiale est codée en dur via des règles .firefly:nth-child(n) qui assignent à chaque élément sa position initiale (top/left en %), sa combinaison d'animations et ses durées. Ajouter une 9e luciole nécessite uniquement une nouvelle règle :nth-child(9) sans modifier les keyframes.
Accessibilité
- prefers-reduced-motion non géré : le code ne contient pas de
@media (prefers-reduced-motion: reduce). Les animations tournent même si l'utilisateur a demandé une réduction du mouvement. À corriger si l'effet est déployé dans un contexte accessible. - Aucun attribut ARIA sur le conteneur ou les points —
.fireflies-containern'a pas derole,aria-labelniaria-hidden. Pour un usage décoratif, ajouteraria-hidden="true"sur le conteneur est recommandé. - Les points
.fireflyne sont pas focusables (pas d'interaction clavier ou souris). L'effet est purement décoratif — aucun lecteur d'écran ne naviguera vers ces éléments. - Contraste : la lueur jaune (#ffa) sur fond sombre (#0a0f1a) est visible en vision normale. Aucun texte n'est intégré dans l'effet — le ratio de contraste textuel dépend du contenu overlay que vous ajoutez.
- L'animation tourne sans fin (
infinite) et sans mécanisme de pause exposé — une implémentation complète devrait prévoir un bouton pause pour satisfaire WCAG 2.2.2.
Compatibilité navigateur
Nécessite CSS Animations Level 1 (@keyframes, animation) et box-shadow — supportés depuis 2012 dans tous les navigateurs. Zéro dépendance JavaScript.
Sans support des animations CSS, les <code>.firefly</code> s'affichent comme des points jaunes fixes avec leur halo box-shadow. Visuellement cohérent, sans mouvement.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="fireflies-container">
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
</div>
<!-- Contenu overlay facultatif -->
<span class="fireflies-label">Votre texte</span>
</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 |
|---|---|---|
| .firefly { background } | #ffa | Couleur du point central de la luciole. Changez en hex ou hsl — la box-shadow doit être mise à jour en cohérence. |
| .firefly { box-shadow } | rgba(255,255,170,.8) 0 0 6px 2px, rgba(255,255,170,.4) 0 0 12px 4px | Double halo lumineux : premier rayon = lueur serrée (halo inner), deuxième = diffusion externe. Augmentez les rayons (6px/12px) ou les opacités pour un éclat plus intense. |
| .firefly { width / height } | 4px / 4px | Taille du point lumineux. Montez à 6–8 px pour des lucioles plus visibles sur fond clair, descendez à 2 px pour un effet pointilliste délicat. |
| keyframes fireflyFloat1/2/3 (translate) | ±10 à ±25 px | Amplitude de dérive spatiale. Doublez les valeurs pour un vol plus ample, réduisez à ±5 px pour un hover quasi immobile. |
| .firefly:nth-child(n) { animation-duration } | 5 s – 9 s (flottement) | Durée du cycle de dérive par luciole. Allongez à 10–15 s pour un mouvement méditatif, raccourcissez à 3–4 s pour un effet nerveux. |
| keyframes fireflyGlow (opacity 50%) | 1 | Opacité maximale au pic de la pulsation. Réduire à 0,6 atténue l'éclat ; monter à 1 (défaut) donne la luminosité maximale. |
| .firefly:nth-child(n) { animation-duration } | 1,5 s – 3 s (glow) | Vitesse de pulsation par luciole. Valeurs courtes (< 1 s) → clignotement haché ; valeurs longues (4–6 s) → respiration lente. |
| Nombre de .firefly | 8 | Ajoutez des <div class="firefly"></div> dans le HTML et leurs règles :nth-child(n) en CSS. Pool recommandé : 5 (discret) à 20 (dense). |
FAQ
@keyframes, animation et box-shadow uniquement. Aucun script, aucune dépendance npm. Il peut être copié dans n'importe quel projet (framework ou HTML nu) sans modifier le JS existant.background: #ffa dans la règle .firefly et mettez à jour les deux valeurs rgba de la box-shadow avec la même teinte. Par exemple, pour des lucioles vertes : background: #afffa0 et rgba(170,255,160,...).<div class="firefly"></div> supplémentaires dans le HTML et les règles CSS correspondantes (.firefly:nth-child(9) { top: …; left: …; animation: … }). Réutilisez fireflyFloat1/2/3 avec des durées différentes pour que chaque nouvelle luciole ait un comportement distinct.
