Heat Haze
Dégradé coucher-de-soleil déformé en temps réel par un filtre SVG feTurbulence animé — l'air chaud tremble sur la scène, 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
La scène repose sur deux couches CSS empilées : .heat-container dessine un dégradé linéaire coucher-de-soleil (orange #ff6b35 → ambre → beige → brun #8b7355) et .heat-road ajoute une route sombre en bas (40 % de hauteur, dégradé brun clair → brun foncé). Aucun canvas, aucune image externe.
La distorsion est produite par un filtre SVG défini hors du JSON et référencé via filter: url(#heatHazeFilter) sur .heat-haze-overlay. Ce filtre enchaîne deux primitives : <feTurbulence type="fractalNoise"> génère une carte de bruit cohérent 2D (fréquences de base 0.015 × 0.04, 2 octaves), puis <feDisplacementMap in="SourceGraphic" in2="noise" scale="20"> déplace chaque pixel du canal R (axe X) et G (axe Y) proportionnellement à la valeur de bruit — le résultat est une déformation ondulante douce.
L'animation est pilotée par SVG SMIL : un élément <animate attributeName="baseFrequency"> niché dans <feTurbulence> fait osciller la fréquence entre 0.015 0.04 et 0.02 0.055 sur un cycle de 6 secondes (repeatCount="indefinite"). Ce changement de fréquence déplace le patron de bruit dans les deux axes, simulant le mouvement de l'air chaud. Zéro requestAnimationFrame, zéro JavaScript.
Le texte .heat-content est positionné en z-index: 2 au-dessus de toutes les couches et reçoit un text-shadow semi-opaque pour rester lisible sur le gradient.
Accessibilité
- prefers-reduced-motion absent : le filtre SVG SMIL (
<animate>) ignore la media queryprefers-reduced-motion. L'animation tourne même si l'utilisateur préfère réduire les mouvements — pour respecter cette préférence, supprimer ou suspendre l'élément<animate>via JavaScript au chargement. - Le conteneur n'expose pas de
roleni d'aria-label— le texte.heat-contentdans le DOM est la seule information accessible aux lecteurs d'écran. - Aucun élément interactif dans l'effet : pas de bouton, pas de lien, pas de focus piégé. Navigation clavier non affectée.
- Le texte blanc sur fond gradient obtient un contraste ≥ 4.5:1 sur la partie la plus sombre (brun #8b7355), et ≥ 3.1:1 sur l'orange vif — la zone road respecte WCAG AA pour les textes larges (18 px+ bold).
- L'overlay
.heat-haze-overlayn'a pas d'aria-hidden: comme il est vide (aucun contenu textuel, aucun rôle sémantique), les AT l'ignorent naturellement.
Compatibilité navigateur
Requiert SVG Filters (feTurbulence + feDisplacementMap) et SVG SMIL animations — supportés dans tous les navigateurs modernes. La propriété CSS filter: url() fonctionne sans préfixe depuis Chrome 53, Firefox 35, Safari 9.1, Edge 79.
Sans support SVG Filters, <code>filter: url()</code> est ignoré silencieusement — la scène affiche le dégradé et le texte sans distorsion. Aucune erreur JavaScript.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<svg style="position:absolute;width:0;height:0" aria-hidden="true">
<defs>
<filter id="heatHazeFilter" x="-5%" y="-5%" width="110%" height="110%" color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.015 0.04" numOctaves="2" seed="3" result="noise">
<animate attributeName="baseFrequency" dur="6s" values="0.015 0.04;0.02 0.055;0.015 0.04" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
<div class="demo-preview">
<div class="heat-container">
<div class="heat-road"></div>
<div class="heat-haze-overlay"></div>
</div>
<span class="heat-content">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 |
|---|---|---|
| scale (feDisplacementMap, SVG) | 20 | Intensité de la distorsion en pixels. 8–12 = shimmer subtil à peine perceptible ; 20 = ondulation visible ; 30–40 = déformation forte. Modifier l'attribut scale sur l'élément |
| baseFrequency (feTurbulence, SVG) | "0.015 0.04" | Taille des vagues (X et Y indépendants). Valeurs basses (0.008 0.02) = grandes ondulations lentes ; valeurs hautes (0.04 0.08) = micro-tremblements fins. Modifier l'attribut baseFrequency sur |
| dur (animate, SVG) | "6s" | Durée d'un cycle d'animation complet. "3s" = air très agité ; "10s" = ondulation lente et apaisante. Modifier l'attribut dur sur l'élément |
| numOctaves (feTurbulence, SVG) | 2 | Niveau de détail du bruit. 1 = vagues larges et lisses (poids CPU minimal) ; 3–4 = texture complexe avec micro-ondulations (léger surcoût de rendu sur mobiles anciens). |
| .heat-container background (CSS) | linear-gradient(#ff6b35 0, #f7931e 30%, #c4a35a 60%, #8b7355 100%) | Palette de la scène. Remplacer les couleurs pour changer l'ambiance : bleus/violets pour une nuit d'été, verts pour une forêt ensoleillée, gris pour un asphalte urbain. |
| .heat-road height (CSS) | 40% | Proportion de la route dans la scène. 0% supprime la route (ciel seul) ; 60–70% pour un gros plan sur le bitume brûlant. S'applique sur .heat-road en CSS inline ou feuille de style. |
FAQ
<body> ou <head>), avant les éléments qui le référencent. Le bloc complet figure dans la section « Structure HTML » de cette page. Un seul bloc SVG suffit même si l'effet est instancié plusieurs fois sur la même page.filter: url() distord le contenu rendu de l'élément ciblé. Appliqué à un <div> sans background ni contenu visible, le filtre n'a rien à transformer. Appliquez filter: url(#heatHazeFilter) directement sur .heat-container (qui porte le dégradé) pour que la déformation soit immédiatement visible.filter: url(#heatHazeFilter) à n'importe quel élément HTML — un <img>, une <section> entière, ou un dégradé personnalisé. Attention : le filtre décale les coordonnées de rendu, ce qui peut désaligner les zones cliquables d'éléments enfants interactifs (boutons, liens) — isolez le filtre sur un calque de fond dédié.
