Releases procedurally drawn butterflies that drift up through a container — or the entire viewport — as if crossing a meadow on a spring afternoon. Each one wanders along a gently bobbing path, beats its wings, and slips away off the top edge. Pass null for a full-page overlay, or a selector for a scoped effect. Colours can follow the active theme or any of the built-in palettes.

// Full-page overlay using the default meadow palette
const flutter = Domma.effects.butterflies(null);

// Container-scoped, pastel palette, denser swarm
Domma.effects.butterflies('#hero', { palette: 'pastel', density: 24 });

// One-shot release — a burst of butterflies that winds down naturally
Domma.effects.butterflies('#card', { burst: true, burstCount: 30 });

// Control methods
flutter.pause();
flutter.resume();
flutter.stop();
flutter.restart();
flutter.destroy();

Options

Built-in Palettes

Pass any of these names as the palette option — or supply your own array of colour strings.

Each butterfly spawns just off the bottom edge — or low on the left and right sides — and is given a random colour from the chosen palette, a wingspan between minSize and maxSize, and a starting heading.

Every so often it picks a fresh heading that is biased gently upward, then eases toward it rather than snapping across. That gradual turning is what gives the flight its characteristic bob and wander: the butterfly is always chasing a target direction it never quite settles on. The wander option widens how far those targets stray from straight up, while riseSpeed controls how strongly the upward bias pulls.

The wings are drawn fresh each frame. A running flapPhase is advanced by flapSpeed, and Math.sin(flapPhase) drives the wing spread — wide open at the top of the beat, folded at the bottom — so the flap reads as a continuous, lifelike motion rather than a two-frame toggle.

As a butterfly drifts past the top of the canvas it fades and is retired. In continuous mode a replacement spawns from below to keep the swarm at roughly density members; in burst mode no replacements are made, so the flutter thins out and ends on its own.

The default meadow palette gives soft spring greens and skies. Press Start to release a wandering swarm into the container below.

const flutter = Domma.effects.butterflies('#butterfly-container', {
  palette: 'meadow',   // soft spring greens and skies
  density: 18,
  speed: 1
});

Click a palette to swap colours instantly.

Adjust the controls and click Apply.

In burst mode, a single flutter of butterflies is released and the effect winds down naturally — perfect for confirmation moments (form submission, achievement unlocked, sale completed).

Domma.effects.butterflies('#card', {
  burst: true,
  burstCount: 30,
  palette: 'pastel',
  speed: 1.2
});

Pass null as the selector to release butterflies across the whole viewport. They drift behind page content via pointer-events: none.

Domma.effects.butterflies(null, {
  palette: 'rainbow',
  density: 24,
  zIndex: 9999
});

• Success & celebration moments — fire a one-shot burst on form submission, checkout completion, or an achievement unlock.
• Ambient hero backdrops — a low-density continuous swarm behind a landing-page headline adds life without distraction.
• Empty-state & onboarding delight — soften a blank dashboard or welcome screen with a gentle flutter.
• Seasonal & spring theming — pair the meadow or pastel palette with seasonal campaigns and promotions.