README

This module integrates the Alpine Confetti library with Magento 2 and Hyvä themes. It bundles the canvas-confetti functionality and exposes Alpine magic helpers that you can trigger directly from templates.

Installation

Install the module with Composer:

composer require deadsimple/hyva-alpine-confetti

Enable the Magento module:

bin/magento module:enable Deadsimple_HyvaAlpineConfetti

Run setup upgrade:

bin/magento setup:upgrade

Usage

Once enabled, the module registers Alpine magic helpers that fire confetti from the element that triggered the event.

Basic confetti

<button x-on:click="$confetti()">Celebrate</button>

Custom confetti burst

<button
  x-on:click="$confetti({ particleCount: 250, spread: 160, startVelocity: 35 })"
>
  Launch confetti
</button>

Starburst effect

<button x-on:click="$starburst()">Starburst</button>

Emoji confetti

<button x-on:click="$emojify(['🎉', '✨', '🎊'], 25)">Party</button>

The helpers accept either a number of particles or a config object, so you can easily fine-tune the look and behavior for sale banners, success states, or celebratory interactions.

Configuration

All methods accept the full range of canvas-confetti options. Here's a quick reference for the most commonly used ones:

{
    particleCount: 100, // Number of particles
    angle: 90,          // Direction in degrees
    spread: 45,         // Spread in degrees
    startVelocity: 45,  // Initial velocity
    decay: 0.9,         // Particle decay rate
    gravity: 1,         // Gravity strength
    drift: 0,           // Side-to-side drift
    ticks: 200,         // Particle lifetime
    colors: ['#fff'],   // Color array
    scalar: 1           // Size multiplier
}

The plugin respects the prefers-reduced-motion media query by default. Users with motion sensitivity won't see the animations.

Credits

License

This module is licensed under the MIT License. See the LICENSE file for more information.

deadsimple / hyva-alpine-confetti

Package info

Security

Statistics