Balloon Release
A single 2D canvas floats semi-transparent balloons with specular highlights and supple Verlet strings — balloons pop on click and the pointer gently repels them.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Atmosphere has 57 effects, including 10 free. Explore the category →
3 usage examples
How it works
A single <canvas> renders balloons and strings in the same draw pass. Each balloon is an ellipse with an offset radial gradient (bright zone top-left, saturated color at center, dark edge) and a globalAlpha of 0.82 — overlapping balloons tint each other, just like real latex.
Two specular highlights are drawn on top: a blurred white ellipse tilted ~30° (main highlight) and a small secondary dot. A bright rim light outlines the contour. The knot is a darker, vertically stretched ellipse.
The string is a 10-point Verlet chain (gravity, damping 0.986, drag, distance constraints ×4 passes), drawn as a smooth Catmull-Rom curve via cubic béziers. It undulates and trails as the balloon sways or rises. The pointer exerts gentle repulsion within a 90 px radius. A click pops the balloon (elliptical hit-test, topmost first) with 8 canvas fragments and a radial flash.
An IntersectionObserver cuts the RAF when the scene scrolls off-screen — zero wasted CPU outside the viewport.
Accessibility
- prefers-reduced-motion: if the OS signals a preference to reduce motion, 8 balloons are drawn statically once, strings straight. No animation runs, no RAF is launched.
- The
<canvas>carriesaria-hidden="true"— overlay text content is accessible to screen readers independently of the canvas. - The scene carries
role="img"and anaria-labeldescribing the effect in plain language. - CTA buttons embedded in the scene meet WCAG AA contrast ratios (≥ 4.5:1 over the scrim).
- Keyboard navigation: the CTA in the overlay remains in the normal tab order.
Browser compatibility
Requires Canvas 2D Context and requestAnimationFrame — supported in all modern browsers.
If <code>canvas</code> is not supported, the parent <code><div></code> displays with a dark background — no JS errors, the page stays functional.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="bln-stage" role="img" aria-label="Translucent colored balloons floating with supple strings — click to pop">
<canvas class="bln-canvas" aria-hidden="true"></canvas>
<!-- Optional: scrim + overlay content -->
<div class="bln-scrim" aria-hidden="true"></div>
<div class="bln-banner-content">
<h2 class="bln-banner-title">Your message</h2>
<button class="bln-btn-cta">CTA</button>
</div>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| data-colors | 8 colors | Hex array of latex colors — swap in your brand palette. |
| data-max | 12 | Maximum simultaneous balloons on screen (pool of 22 max). Drop to 6–8 for a light background. |
| data-speed | 1.0 | Rise speed multiplier. 0.65 = romantic & slow, 1.7 = festive & fast. |
| BLN.fire(n) | — | Release n additional balloons immediately — trigger it on a business event (payment confirmed, milestone reached). |
| BLN.setMaxActive(n) | 12 | Adjusts the cap on the fly without reloading the page. |
| BLN.setSpeedFactor(f) | 1.0 | Changes the speed of all live balloons in real time. |
FAQ
BLN.fire(n) to release n additional balloons, BLN.setMaxActive(n) to adjust the cap, and BLN.setSpeedFactor(f) to change speed — all without reloading the page. Example: after a Stripe payment confirmation, call BLN.fire(16) from the front-end callback.prefers-reduced-motion: reduce is set in the operating system, balloons are drawn statically once with simplified straight strings. No animation runs, no requestAnimationFrame is launched — the effect stays visually present without causing motion sickness or harming focus.
