Balloon Release
Un canvas 2D unique fait monter des ballons semi-transparents avec reflets spéculaires et ficelles Verlet souples — les ballons éclatent au clic, le pointeur les repousse en douceur.
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
Un seul <canvas> rend ballons et ficelles dans la même passe de rendu. Chaque ballon est une ellipse avec un dégradé radial décalé (zone claire haut-gauche, couleur saturée au centre, bord sombre) et un globalAlpha à 0,82 — les ballons qui se chevauchent se teintent mutuellement, comme du vrai latex.
Deux reflets spéculaires sont dessinés par-dessus : une ellipse blanche floue inclinée à ~30° (reflet principal) et un petit point secondaire. Un liseré lumineux rim light souligne le contour. Le nœud est une ellipse plus sombre étirée verticalement.
La ficelle est une chaîne Verlet de 10 points (gravité, amortissement 0,986, traînée, contraintes de distance ×4 passes), tracée en courbe lisse Catmull-Rom via des cubiques bézier. Elle ondule et traîne quand le ballon oscille ou monte. Le pointeur exerce une répulsion douce dans un rayon de 90 px. Un clic fait éclater le ballon (hit-test elliptique, topmost first) avec 8 fragments canvas et un flash radial.
Un IntersectionObserver coupe le RAF quand la scène sort de l'écran — zéro CPU inutile en dehors du viewport.
Accessibilité
- prefers-reduced-motion : si l'OS signale une préférence pour réduire le mouvement, 8 ballons sont dessinés statiquement une seule fois, ficelles droites. Aucune animation ne tourne, aucun RAF n'est lancé.
- Le
<canvas>portearia-hidden="true"— le contenu textuel overlay est lisible par les lecteurs d'écran indépendamment du canvas. - La scène porte
role="img"et unaria-labeldécrivant l'effet en langage naturel. - Les boutons CTA intégrés dans la scène respectent les niveaux de contraste WCAG AA (ratio ≥ 4,5:1 sur scrim).
- Navigation au clavier : le CTA dans l'overlay reste dans le flux de tabulation normal.
Compatibilité navigateur
Nécessite Canvas 2D Context et requestAnimationFrame — supportés dans tous les navigateurs modernes.
Si <code>canvas</code> n'est pas supporté, le <code><div></code> parent s'affiche avec le fond sombre — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bln-stage" role="img" aria-label="Ballons colorés translucides montant avec ficelles souples — cliquez pour les faire éclater">
<canvas class="bln-canvas" aria-hidden="true"></canvas>
<!-- Facultatif : scrim + contenu overlay -->
<div class="bln-scrim" aria-hidden="true"></div>
<div class="bln-banner-content">
<h2 class="bln-banner-title">Votre message</h2>
<button class="bln-btn-cta">CTA</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 |
|---|---|---|
| data-colors | 8 couleurs | Tableau hex des couleurs latex — remplacez par votre palette brand. |
| data-max | 12 | Nombre maximum de ballons simultanés à l'écran (pool de 22 max). Réduisez à 6–8 pour un fond léger. |
| data-speed | 1.0 | Multiplicateur de vitesse de montée. 0,65 = romantique & lent, 1,7 = festif & rapide. |
| BLN.fire(n) | — | Lâcher n ballons supplémentaires immédiatement — déclenchez-le sur un événement métier (paiement confirmé, jalon atteint). |
| BLN.setMaxActive(n) | 12 | Modifie le plafond à la volée sans recharger la page. |
| BLN.setSpeedFactor(f) | 1.0 | Change la vitesse de tous les ballons vivants en temps réel. |
FAQ
BLN.fire(n) pour lâcher n ballons supplémentaires, BLN.setMaxActive(n) pour modifier le plafond et BLN.setSpeedFactor(f) pour changer la vitesse — sans recharger la page. Exemple : après confirmation d'un paiement Stripe, appelez BLN.fire(16) depuis le callback côté front.prefers-reduced-motion: reduce est activé dans le système d'exploitation, les ballons sont dessinés statiquement une seule fois avec des ficelles droites simplifiées. Aucune animation ne tourne, aucun requestAnimationFrame n'est lancé.
