Success Celebration
Cercle SVG tracé depuis 12 h, coche dessinée, deux halos pulsants et burst Canvas 2D en anneau — toast compact ou modale complète, séquence rejoutable.
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 séquence démarre quand la classe .scb-run est ajoutée au .scb-root : le cercle SVG se trace depuis 12 h grâce au couple stroke-dasharray / stroke-dashoffset (214 → 0 sur 0,52 s, cubic-bezier(0.4,0,0.2,1)) ; le groupe SVG est pivoté de −90° pour que le tracé parte du haut. La coche suit 0,46 s plus tard, stroke-dashoffset 50 → 0 en 0,3 s, ease-out — l'effet de « plume qui dessine » est obtenu avec une seule ligne CSS sans bibliothèque tiers.
Deux <div> empilés dans .scb-svg-wrap jouent les halos pulsants : border-radius: 50%; border: 2px solid var(--scb-accent), animation scb-halo-pulse (opacity 0,68 → 0, scale 1 → 2,7). Le premier part à 0,62 s, le second à 0,94 s — l'écart temporel donne la sensation de double onde sans JS.
Au bout de 100 ms, burst(root) tire le burst Canvas 2D : n particules (26 en mode compact, 36 en mode complet) placées en anneau (angle = (i/n)×2π + jitter ±0,1 rad). Chaque particule reçoit une vitesse radiale (80–130 px/s compact, 115–165 px/s complet), une couleur parmi six (teal, blanc, vert, jaune, violet, rose), et 32 % d'entre elles sont des étoiles à 4 branches tracées au canvas. La physique applique une gravité 80 px/s² et une rotation par particule. L'opacité reste à 1,0 les 25 premières % de la durée (1 200 ms), puis descend linéairement à 0 — ce plateau évite le fondu brutal au pic d'animation.
Les textes (.scb-title, .scb-amount, .scb-sub, boutons) apparaissent en stagger CSS : chaque élément part de opacity:0; translateY(6px) avec un délai progressif (0,76 s à 1,45 s) — aucun JS pour l'orchestration du texte. La rejoue est instantanée : play() retire .scb-run, force un reflow via void root.offsetWidth, puis re-pose la classe pour réinitialiser toutes les animations CSS.
Accessibilité
- prefers-reduced-motion : géré sur deux niveaux — CSS (
@media (prefers-reduced-motion: reduce)) coupe toutes les animations et affiche coche + texte instantanément ; JS vérifiewindow.matchMediaet sort deburst()sans lancer le canvas. Zéro particule en mode réduit. - Le
.scb-rootporterole="status"etaria-live="polite": un lecteur d'écran annonce la confirmation au moment de la replay sans interrompre la navigation. - Le canvas reçoit
aria-hidden="true"— le burst est purement décoratif et invisible aux AT. - Le bouton
.scb-btn-continue(mode complet) reste focusable au clavier ; son style:focus-visibleutilise un outline de la couleur d'accent (var(--scb-accent)) avecoutline-offset: 2px. - Ratio de contraste : texte blanc sur fond de carte
#18181b(mode compact) et#111116(mode complet) ≥ 16:1 — largement WCAG AA. Le CTA texte sombre (--scb-on-accent: #0a0a0f) sur fond teal (#2dd4bf) ≥ 7:1.
Compatibilité navigateur
Nécessite CSS Animations (stroke-dashoffset), Canvas 2D et requestAnimationFrame. Le cercle SVG et la coche fonctionnent sans canvas — le burst est la seule partie qui requiert Canvas 2D.
Sans Canvas 2D, le burst est silencieusement ignoré ; le cercle SVG, la coche, les halos et les textes s'animent normalement. Sans support CSS Animations (IE11), les éléments restent visibles à l'état final (les propriétés CSS cibles sont déclarées hors animation).
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="scb-root" data-size="compact" data-auto-replay="4000"
role="status" aria-live="polite" aria-label="Toast de confirmation animé">
<!-- Canvas burst particules (z=0) -->
<canvas class="scb-canvas" aria-hidden="true"></canvas>
<!-- Carte visible (z=2) -->
<div class="scb-scene">
<!-- Icône : enveloppe SVG + halos -->
<div class="scb-svg-wrap" aria-hidden="true">
<div class="scb-halo"></div>
<div class="scb-halo"></div>
<svg class="scb-svg" viewBox="0 0 80 80">
<g class="scb-ring-group">
<circle class="scb-ring-track" cx="40" cy="40" r="34"/>
<circle class="scb-ring-draw" cx="40" cy="40" r="34"/>
</g>
<path class="scb-check" d="M24,40 L34,52 L56,28"/>
</svg>
</div>
<!-- Texte principal -->
<p class="scb-title">Sauvegardé</p>
<!-- Mode complet uniquement : montant + sous-titre + boutons -->
<!-- <p class="scb-amount">29,90 €</p> -->
<!-- <p class="scb-sub">Plan Pro activé · Merci !</p> -->
<!-- <hr class="scb-divider"> -->
<!-- <button class="scb-btn-continue">Continuer</button> -->
<!-- <button class="scb-btn-replay">Rejouer</button> -->
</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 |
|---|---|---|
| --scb-accent | #2dd4bf | Couleur principale : ring SVG, halos, outline focus et première couleur du burst. Changez-la sur .scb-root pour adapter à votre brand sans toucher au JS. |
| data-size="compact" | absent (mode complet) | Active le mode toast (n=26 particules, vitesse burst 80–130 px/s, carte 180 px min, padding 22/28 px). Sans l'attribut : modale complète (36 particules, 115–165 px/s, carte 300 px, avec .scb-amount et .scb-btn-continue). |
| data-auto-replay | absent (pas de replay) | Intervalle en ms entre deux replays automatiques. data-auto-replay="4000" rejoue toutes les 4 s — utile en démo ou vitrine. Omettez l'attribut (ou mettez 0) pour une séquence unique. |
| root.__scb.play() | — | API publique exposée sur chaque instance : déclenche un replay immédiat depuis votre code métier. Exemple après une confirmation Stripe côté front : document.querySelector('.scb-root').__scb.play(). |
| COLORS (JS, ligne var COLORS) | ['#2dd4bf','#ffffff','#86efac','#fde047','#a78bfa','#f472b6'] | Palette des particules canvas. Éditez le tableau dans le JS copié pour remplacer la couleur teal et les tons pastel par votre palette brand. |
| DUR (JS, ligne var DUR) | 1200 | Durée du burst en millisecondes. Réduisez à 800 pour un burst vif, montez à 1800 pour un effet traînant. |
| .scb-title (innerHTML) | "Sauvegardé" | Texte du titre affiché dans la carte — modifiez directement le HTML : « Paiement confirmé », « Inscription réussie », etc. |
FAQ
document.querySelectorAll('.scb-root') et attache une API __scb indépendante à chaque instance. Chaque .scb-root a son propre canvas et son propre cycle d'animation — ils ne partagent aucun état global. Utilisez des ids différents si vous devez cibler un élément précis depuis votre JS.DOMContentLoaded et expose el.__scb.play() sur le DOM node. Dans React, appelez play() depuis un useEffect sur la condition métier (ex. status === 'success') et non au montage — le composant peut se re-rendre sans déclencher de replay parasite. Le canvas reste dans le DOM et le RAF ne tourne pas hors de .scb-run..scb-ring-group applique transform: rotate(-90deg) sur son transform-origin: 40px 40px (centre du viewBox 80×80). Sans cette rotation, le tracé CSS SVG part du point 3 h (angle 0 rad) — le −90° le ramène au sommet. Le tracé progresse ensuite dans le sens horaire jusqu'à boucler.
