Frosted Aurora
Trois rubans d'aurore — vert, bleu, violet — dessinés en canvas comme des ondes sinusoïdales additionnées en mode lighter, adoucis par un flou CSS de 22 px, qui ondulent sans fin derrière un panneau de verre dépoli (flou 16 px, saturation 150 %) ; une seule image fixe si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Deux couches dans une scène en 16/10 (.fa-scene, coins de 14 px, fond #05060f). Dessous, un <canvas class="fa-canvas"> qui occupe toute la scène. Au-dessus, le panneau .fa-glass : min(70%, 320px) de large, coins de 22 px, dégradé blanc de 14 % à 4 %, liseré blanc à 25 %, backdrop-filter: blur(var(--fa-blur, 16px)) saturate(150%), ombre portée et reflet intérieur, texte centré à ombres portées. Le flou de 16 px est fort : derrière le panneau, l'aurore n'est plus qu'une lumière diffuse, c'est le « dépoli ».
Le script dessine trois rubans. Chacun a une couleur (60,220,170, 90,150,255, 180,110,255), une hauteur (42, 52 et 60 % de la scène), une amplitude (10, 13 et 9 %), une fréquence (2,1, 1,6 et 2,6 ondes sur la largeur) et une vitesse (0,18, 0,13 et 0,22 radian par seconde). Pour chaque image, il trace le bord haut du ruban comme une sinusoïde par pas de max(6, largeur ÷ 48) px, revient par un bord bas décalé de 22 % de la hauteur, et remplit d'un dégradé vertical transparent → 55 % → transparent. Les trois rubans sont additionnés (globalCompositeOperation = "lighter") : là où vert et bleu se croisent, la lumière s'éclaircit comme une vraie aurore. Les vitesses différentes font que la figure ne se répète presque jamais ; à ces vitesses, une ondulation complète prend 29 à 48 s, un mouvement lent, presque imperceptible d'une seconde à l'autre.
Le flou des rubans est un filter: blur(22px) CSS posé sur le canvas, et pas un ctx.filter dans le dessin : WebKit ignore ctx.filter sans erreur — mesuré dans WebKit 26 (moteur de Safari), on n'obtiendrait que trois bandes ondulées à bords nets au lieu d'une aurore. En CSS, le rendu est le même dans Chromium, l'aurore est douce dans WebKit, et Firefox n'a pas à recalculer le flou dans le canvas à chaque image (sans écran, 23 images par seconde avec ctx.filter, 121 avec le filtre CSS). Changer la taille d'un canvas l'efface : en mouvement réduit, le gestionnaire de redimensionnement redessine donc l'image fixe. Quand l'utilisateur demande moins de transparence, ou si le navigateur ne connaît pas backdrop-filter, le script ajoute .fa-solid à la scène ; -webkit-backdrop-filter sert Safari avant la version 18. Le script lance une boucle par .fa-canvas, chacune à sa taille : plusieurs aurores cohabitent dans une page (retirez les id faScene et faCanvas en dupliquant le bloc). Une variante plus ancienne de cette aurore existe aussi dans la catégorie.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion, le script dessine une seule image (temps 0) et ne lance pas la boucle — mesuré, deux relevés du canvas à une seconde d'écart sont identiques. L'aurore reste visible, figée, y compris après un redimensionnement de la fenêtre (un téléphone qui pivote) : le script redessine alors l'image fixe, mesuré dans Chromium et Firefox. - Transparence réduite et absence de flou : le script pose
.fa-solidquandprefers-reduced-transparency: reducerépond ou quand nibackdrop-filterni sa forme préfixée ne sont connus. Mesuré sous émulation dans Chromium : panneau plein#11142a, liseré à 40 %, aurore baissée à 35 % d'opacité. Firefox 153 et WebKit 26 ne connaissent pas encore ce réglage de transparence. - Contraste : sur ce fond sombre, le texte blanc tient bien. Sans ses ombres portées, mesuré sur le panneau à six instants : 8,81:1 en valeur médiane, 3,18:1 sur la zone la plus claire, quand le ruban vert passe derrière. Le texte de 13 px passe donc sous 4,5:1 par endroits : gardez les ombres (
text-shadowà 55 %) ou montez le dégradé du panneau à 25 % de noir. - Sémantique : le canvas est décoratif — ajoutez-lui
aria-hidden="true"pour qu'il ne soit pas annoncé comme une image vide. Le panneau est undivavec unh3et un paragraphe : remplacez-les par la structure réelle de votre contenu (formulaire, lien, titre de page).
Compatibilité navigateur
Canvas 2D + CSS (filter, backdrop-filter) + 2,1 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : mêmes rubans, même animation, même image figée sous mouvement réduit ; aurore douce partout grâce au flou en CSS. Le dépoli du panneau s'affiche dans les trois (capture d'écran réelle pour Firefox et WebKit, dont les captures automatiques n'affichent jamais backdrop-filter). Le canvas est dimensionné à la taille de la scène au chargement et à chaque redimensionnement de la fenêtre, sans tenir compte de la densité de l'écran : sur un écran Retina il est agrandi deux fois, ce que le flou de 22 px rend invisible.
Sans backdrop-filter, le script pose .fa-solid : panneau plein bleu nuit, aurore atténuée derrière, texte toujours lisible. Sans JavaScript, le canvas reste vide et la scène garde son fond #05060f : le panneau reste lisible sur un fond uni, sans aurore. Sans filter CSS (navigateurs très anciens), les rubans s'affichent à bords nets.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="fa-scene">
<canvas class="fa-canvas"></canvas>
<div class="fa-glass">
<h3>…</h3>
<p>…</p>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Frosted Aurora, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Vitesse (JS — i(o, (r - n) / 1e3 * 1)) |
× 1 : une ondulation en 29 à 48 s | Remplacez * 1 par * 3 pour une aurore vivante (c'est le réglage des scènes), * 0.5 pour un fond presque immobile. |
Couleurs des rubans (JS — color: "60,220,170"…) |
vert, bleu, violet | Trois composantes rouge, vert, bleu sans espace. Pour une aurore rose : "255,110,170". En mode lighter, deux couleurs complémentaires qui se croisent virent au blanc. |
Forme des rubans (JS — y, amp, freq, spd, phase) |
hauteurs 0,42 / 0,52 / 0,6, amplitudes 0,1 / 0,13 / 0,09 | y place le ruban (0 = haut), amp règle la hauteur des vagues, freq leur nombre sur la largeur. Ajoutez un quatrième objet au tableau pour un quatrième ruban. |
Épaisseur des rubans (JS — l = .22 * i) |
22 % de la hauteur de la scène | 0,12 donne des voiles fins, 0,35 des nappes larges qui couvrent la scène. |
Flou de l'aurore (CSS — .fa-canvas { filter: blur(22px) }) |
22px | 12 px laisse voir les crêtes des vagues, 40 px fond les rubans en lueur. Le flou CSS est calculé par la carte graphique, pas par le script. |
Dépoli du panneau (CSS — --fa-blur) |
16px | 8 px laisse deviner les rubans derrière le texte, 24 px n'en garde que la couleur. La variable sert aux deux déclarations, avec et sans préfixe. |
Repli opaque (CSS — .fa-scene.fa-solid) |
panneau #11142a, aurore à 35 % | Pour forcer le repli sur une page précise (impression, mode économie), ajoutez vous-même fa-solid à .fa-scene. |
FAQ
IntersectionObserver qui bascule un drapeau lu au début de chaque image.resize de la fenêtre. Si la scène change de largeur sans que la fenêtre bouge (barre latérale, onglets, accordéon), le dessin est étiré. Remplacez window.addEventListener("resize", t) par un ResizeObserver sur le canvas : new ResizeObserver(t).observe(r).-webkit- pour Safari avant 18. Préférez Frosted Aurora pour une aurore qui ondule vraiment ; Aurora Glass reste plus léger si vous voulez zéro JavaScript.
