Aussi appelée Film grain, Noise background
Une fine texture mouchetée recouvre la page et scintille parfois comme du grain de film.
Usages
Donner une profondeur tactile aux dégradés
Ajoute une surcouche « Noise / Grain Texture » (aussi appelée film grain ou noise background) sur [où].
Une texture mouchetée fine et pâle doit recouvrir la surface et scintiller par petits sauts comme du grain de film : discrète, jamais assez forte pour brouiller le contenu.
Laisse les clics traverser la surcouche, génère la texture une seule fois au lieu de le faire à chaque image et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Aussi appelée Floating particles, Particle field
De nombreux petits points dérivent, se relient ou réagissent au pointeur sur l’arrière-plan.
Usages
Arrière-plans de hero et de section
Ajoute un arrière-plan « Particles » (aussi appelé floating particles ou particle field) sur [où].
De petits points de tailles différentes doivent flotter et dériver lentement sur des trajectoires douces et vagabondes, chacun à son propre rythme : calme et aérien.
Garde un nombre de points modéré pour que ça reste léger sur les appareils plus lents, mets-le en pause hors de l’écran et arrête-le si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).
Faites défiler à l’intérieur
Aussi appelée Gradient blur edge
L’intensité du flou augmente progressivement vers un bord pour que le contenu s’estompe en douceur.
Usages
Bords de conteneurs défilants, en-têtes
Ajoute un bord « Progressive Blur » (aussi appelé gradient blur edge) sur [où].
Le contenu qui défile vers le bord doit devenir progressivement plus flou et plus doux, en montant en douceur au lieu d’être coupé net par une ligne.
N’affiche le flou que sur un bord au-delà duquel il reste du contenu, et empêche la zone floue de bloquer les clics ou le défilement.