Noise Displacement
Texte déformé par un champ de bruit SVG fractal — feTurbulence génère la carte de déplacement, feDisplacementMap distord les pixels ; l'intensité double au survol via CSS pur, 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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un pipeline de filtres SVG déclaré dans un <defs> invisible dans la page. feTurbulence type="fractalNoise" génère une image de bruit synthétique — une texture procédurale dont chaque pixel encode une valeur de déplacement dans ses canaux R et G. feDisplacementMap lit ensuite ces canaux et décale chaque pixel du texte source de (valeur - 0,5) × scale dans les deux axes : le résultat est un texte dont chaque lettre est déformée selon la topographie locale du champ de bruit.
Deux filtres distincts sont définis avec le même feTurbulence mais un scale différent sur le feDisplacementMap : le premier applique une distorsion modérée (état de repos), le second l'amplifie. Le sélecteur CSS .ng-displace-scene:hover .ng-displace-text bascule l'élément de filter: url(#ng-displace-filter) à filter: url(#ng-displace-filter-strong) au survol — aucun JS n'intervient.
La propriété transition: filter .3s produit un fondu enchaîné entre les deux états de filtre. Chrome et Edge interpolent réellement les valeurs intermédiaires du feDisplacementMap ; Firefox et Safari effectuent un cross-fade discret sans saut brutal. Dans les deux cas la progression est visuellement lisse. Le bruit de feTurbulence est statique (pas d'attribut animate) : aucun calcul GPU ne tourne hors survol.
Le champ de bruit est contrôlé par baseFrequency (fréquence spatiale : bas = bruit grossier et organique, haut = grain fin et numérique), numOctaves (richesse du détail fractale) et seed (graine aléatoire — permet de varier la forme du bruit entre instances sans modifier le comportement). L'effet s'applique à n'importe quel élément HTML, pas seulement du texte.
Accessibilité
- prefers-reduced-motion non implémenté : aucun
@media (prefers-reduced-motion: reduce)dans le code. La distorsion de repos est statique (pas de boucle d'animation), ce qui est acceptable ; mais la transition defilterau survol (.3s) n'est pas supprimée pour les utilisateurs sensibles au mouvement. - Contraste texte : blanc
#fffsur fond#0a0a0f— ratio ≈ 19,8:1, dépasse largement WCAG AAA (7:1). La distorsion réduit la lisibilité perçue mais ne modifie pas le ratio de contraste mesuré. - Interaction clavier : l'intensité au survol est déclenchée par
:hoveruniquement — aucun équivalent:focus-withinou:focus-visiblen'est prévu. Les utilisateurs naviguant au clavier ne voient que l'état de repos. - Sémantique : les lecteurs d'écran lisent le texte brut de
.ng-displace-textdirectement — la distorsion est purement visuelle et n'affecte pas l'arbre d'accessibilité. Aucunaria-labelsupplémentaire n'est nécessaire.
Compatibilité navigateur
Nécessite SVG inline et la propriété CSS filter: url(#id) sur élément HTML — supporté dans tous les navigateurs modernes. Aucune dépendance externe.
Si les filtres SVG ne sont pas supportés, le texte s'affiche sans distorsion — aucune erreur JS (le JS est inexistant), aucune dégradation du layout.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<svg width="0" height="0" aria-hidden="true" style="position:absolute">
<defs>
<filter id="ng-displace-filter">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" seed="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="12" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<filter id="ng-displace-filter-strong">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" seed="2" result="noise"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="28" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
</svg>
<div class="ng-displace-scene">
<div>
<div class="ng-displace-text">VOTRE TEXTE</div>
<p class="ng-displace-sub">Survolez pour amplifier</p>
</div>
</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 (filtre repos) | ~12 | Attribut scale du feDisplacementMap dans #ng-displace-filter — amplitude de distorsion en pixels CSS à l'état de repos. Valeurs conseillées : 6–18. |
| scale (filtre fort) | ~28 | Attribut scale du feDisplacementMap dans #ng-displace-filter-strong — amplitude au survol. Un ratio repos/fort de 1:2,3 produit une progression naturelle. |
| baseFrequency | 0.04 | Fréquence spatiale du feTurbulence (même valeur dans les deux filtres). Plus bas = bruit grossier/organique ; plus haut = grain fin/digital. Valeurs typiques : 0,025–0,08. |
| numOctaves | 4 | Nombre d'octaves du feTurbulence — plus élevé = détail fractale plus riche mais plus coûteux GPU. 2–3 pour un effet fluide à la volée, 5–6 pour une texture fouillée sur contenu fixe. |
| seed | 2 | Graine du feTurbulence (entier 0–9999). Change la forme du bruit sans modifier sa densité. Indispensable pour différencier deux instances sur la même page et éviter les patterns identiques. |
| transition: filter .3s | .3s | Durée de la transition CSS sur .ng-displace-text. Rallongez à .5–.8s pour une révélation dramatique, réduisez à .1s pour un snap brutal. Supprimez entièrement pour un basculement instantané. |
| font-size (.ng-displace-text) | 2.5rem | La distorsion perçue est proportionnelle à la taille de la fonte — augmenter la taille rend le déplacement plus spectaculaire à scale constant. Pas besoin d'augmenter scale si vous grossissez déjà le texte. |
FAQ
scale via CSS n'est pas standardisé. Déclarer deux filtres avec des scale différents et basculer entre eux via :hover + transition: filter est la technique la plus compatible : Chrome et Edge interpolent les valeurs intermédiaires, Firefox et Safari font un cross-fade, mais dans les deux cas le résultat visuel est lisse et ne nécessite aucun JS.#ng-displace-filter sur la même page entraîneraient une collision (seul le premier serait utilisé). Renommez les filtres de la seconde instance avec un suffixe : #ng-displace-filter-2 et #ng-displace-filter-strong-2, et mettez à jour les règles CSS correspondantes. Changez aussi le seed pour des patterns différents.filter: url(#ng-displace-filter) s'applique à n'importe quel élément HTML : image, vidéo, <div> avec fond, SVG inline. Sur des images, la déformation produit un effet de réfraction ou de verre déformant ; sur des formes avec bords nets, les contours se fragmentent en motifs organiques. Ajustez scale à la baisse pour les surfaces larges — un scale élevé crée des artefacts transparents aux bords de l'élément.
