💣 Glitterbomb

A pure Rust confetti animation library for WebAssembly. No JavaScript required.

Features

• 🦀 Pure Rust - No JS dependencies, compiles to WebAssembly
• 🎨 Customizable - Colors, shapes, physics, and more
• ⚡ Lightweight - Minimal dependencies, small WASM binary
• 🎮 Preset Effects - Celebration, fireworks, snow, cannon
• ♿ Accessible - Respects prefers-reduced-motion
• 🔧 Framework Agnostic - Works with Dioxus, Leptos, Yew, or vanilla WASM

Installation

cargo add glitterbomb

Quick Start

use glitterbomb::{confetti, ConfettiOptions};

// Fire with defaults
confetti(ConfettiOptions::default());

Usage with Dioxus

use dioxus::prelude::*;
use glitterbomb::{confetti, celebration, ConfettiOptions, Origin, Color};

#[component]
fn App() -> Element {
    rsx! {
        div {
            // Simple button
            button {
                onclick: move |_| confetti(ConfettiOptions::default()),
                "🎉 Confetti!"
            }

            // Celebration preset (fires from both sides)
            button {
                onclick: move |_| celebration(),
                "🎊 Celebrate!"
            }

            // Custom options
            button {
                onclick: move |_| {
                    confetti(ConfettiOptions {
                        particle_count: 100,
                        spread: 70.0,
                        origin: Origin { x: 0.5, y: 0.8 },
                        colors: vec![
                            Color::from_hex("#ff0000"),
                            Color::from_hex("#00ff00"),
                            Color::from_hex("#0000ff"),
                        ],
                        ..Default::default()
                    });
                },
                "🌈 Custom!"
            }
        }
    }
}

Preset Effects

use glitterbomb::{celebration, fireworks, snow, cannon};

// Fire from both sides of the screen
celebration();

// Explode from the center like fireworks
fireworks();

// Gentle falling snow effect
snow();

// Blast from the bottom of the screen
cannon();

Configuration Options

Shapes

use glitterbomb::Shape;

let opts = ConfettiOptions {
    shapes: vec![Shape::Square, Shape::Circle, Shape::Star],
    ..Default::default()
};

Colors

use glitterbomb::Color;

// From hex string
let red = Color::from_hex("#ff0000");
let short = Color::from_hex("#f00"); // Shorthand works too

// From RGB values
let green = Color::new(0, 255, 0);

// Predefined constants
let blue = Color::BLUE;
let white = Color::WHITE;

Custom Canvas

Render confetti on a specific canvas element instead of a fullscreen overlay:

use glitterbomb::{confetti_on_canvas, ConfettiOptions};
use web_sys::HtmlCanvasElement;

fn fire_on_my_canvas(canvas: &HtmlCanvasElement) {
    confetti_on_canvas(canvas, ConfettiOptions::default());
}

Stop Animation

use glitterbomb::reset;

// Stop all confetti and remove the canvas
reset();

Accessibility

The library respects the prefers-reduced-motion media query when enabled:

confetti(ConfettiOptions {
    disable_for_reduced_motion: true,
    ..Default::default()
});

Comparison with canvas-confetti

This is a Rust port inspired by canvas-confetti. Key differences:

License

MIT License - see LICENSE for details.

Contributing

Contributions welcome! Please feel free to submit a Pull Request.