Noise Morph
Orbe rotatif habillé d'un grain SVG animé et d'un halo pulsant — trois couches CSS pures superposées, 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
La forme centrale est un <div> circulaire habillé d'un dégradé linéaire (linear-gradient(135deg, #06b6d4, #8b5cf6)) qui tourne en continu via @keyframes ngMorphRotate (12 s, linéaire, infini). Puisque c'est l'élément lui-même qui tourne — et non le fond — la couleur perçue évolue selon l'angle, simulant un reflet changeant sans recalcul.
Le halo lumineux est rendu par le pseudo-élément ::before : un second dégradé (magenta → orange) étendu de 10 px au-delà du bord (inset: -10px), flou à 20 px par filter: blur(), qui alterne entre opacité 0,3 et 0,6 et entre scale(0,9) et scale(1,1) via @keyframes ngMorphPulse (4 s, ease-in-out, alternate). L'alternance crée une « respiration » lumineuse continue.
La texture grain est rendue par le pseudo-élément ::after : un SVG inline en data: URI contenant un filtre <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="3"> appliqué à un rectangle plein. Ce SVG est superposé en mix-blend-mode: overlay à 30 % d'opacité, puis secoué par @keyframes ngMorphNoise (translations ±2 px, 3 s, steps(5)). Le timing en marches crée un grain filmique irrégulier et non interpolé.
L'effet est 100 % CSS, zéro JavaScript. Aucune initialisation requise : placez .ng-morph-scene > .ng-morph-shape dans le DOM et les trois animations démarrent automatiquement. Instanciable autant de fois que nécessaire — chaque élément est indépendant.
Accessibilité
- prefers-reduced-motion : non géré nativement — le CSS ne contient pas de bloc
@media (prefers-reduced-motion: reduce). Les trois animations tournent inconditionnellement. Pour y remédier, ajoutez dans votre CSS :@media (prefers-reduced-motion: reduce) { .ng-morph-shape, .ng-morph-shape::before, .ng-morph-shape::after { animation-play-state: paused } }. - Le
<div>de scène ne porte niroleniaria-labelpar défaut. Ajoutezaria-hidden="true"si l'orbe est purement décoratif, ourole="img" aria-label="…"s'il est porteur de sens. - Aucun élément interactif dans l'effet — aucun focus natif, aucun
tabindexà gérer. - L'effet ne contient aucun texte propre — la lisibilité des contenus overlayés dépend entièrement du balisage environnant.
- Le grain SVG est rendu via un
data: URIinline — aucune ressource externe, pas de risque de blocage ou de timeout réseau.
Compatibilité navigateur
Nécessite CSS animations, pseudo-éléments ::before/::after, mix-blend-mode: overlay et SVG inline feTurbulence — supportés dans tous les navigateurs modernes.
Sans support <code>mix-blend-mode</code>, le grain s'affiche en mode normal (sans fusion) — l'orbe reste visible. Sans CSS animations, la forme reste un cercle statique avec le dégradé — aucune erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="ng-morph-scene" aria-hidden="true">
<div class="ng-morph-shape"></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 |
|---|---|---|
| .ng-morph-shape { width / height } | 180px | Taille de l'orbe. Modifiez les deux valeurs à la même mesure pour conserver la circularité — ::before (inset: -10px) et ::after (inset: 0) s'ajustent automatiquement. |
| .ng-morph-shape { background } | linear-gradient(135deg, #06b6d4, #8b5cf6) | Dégradé du corps de l'orbe. Changez les deux couleurs pour votre palette brand — le dégradé défile avec la rotation. |
| .ng-morph-shape::before { background } | linear-gradient(135deg, #ec4899, #f97316) | Couleurs du halo lumineux. Tonalités chaudes pour un effet chaleureux, violet/bleu pour un rendu tech. |
| .ng-morph-shape { animation-duration } | 12s | Vitesse de rotation. Réduisez à 6–8 s pour un rendu dynamique (loader, traitement), augmentez à 20–30 s pour une présence ambiante lente. |
| .ng-morph-shape::before { filter: blur() } | blur(20px) | Rayon du halo. Augmentez (30–40 px) pour un halo diffus, réduisez (8–12 px) pour un liseré plus net. |
| .ng-morph-shape::after { opacity } | 0.3 | Intensité du grain. Montez à 0,5–0,7 pour une texture prononcée, descendez à 0,1 pour un grain à peine perceptible. |
| baseFrequency='0.05' dans le SVG feTurbulence | 0.05 | Fréquence spatiale du bruit. Valeur basse (0,02–0,04) = grain grossier et organique, valeur haute (0,08–0,15) = grain fin et serré. |
| .ng-morph-shape::before { animation-duration } | 4s | Vitesse de pulsation du halo. 2 s = respiration rapide, 8 s = battement lent et organique. |
FAQ
.ng-morph-scene > .ng-morph-shape), le CSS et les @keyframes : les trois animations démarrent dès que le DOM est prêt. Aucun import, aucun npm install, compatible avec tous les frameworks.width et height de .ng-morph-shape à la même valeur (cercle) ou à des valeurs différentes (ellipse). Le pseudo-élément ::before utilise inset: -10px — il déborde de 10 px de chaque côté quelle que soit la taille. Le pseudo-élément ::after utilise inset: 0 — il couvre exactement la forme.prefers-reduced-motion nativement. Ajoutez ce bloc dans votre CSS : @media (prefers-reduced-motion: reduce) { .ng-morph-shape, .ng-morph-shape::before, .ng-morph-shape::after { animation-play-state: paused; } }. Cela met en pause les trois @keyframes en une seule règle, sans modifier le code de l'effet.
