PHPackages                             tapp/filament-confetti - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. tapp/filament-confetti

ActiveLibrary[Utility & Helpers](/categories/utility)

tapp/filament-confetti
======================

A Filament plugin for beautiful confetti animations using canvas-confetti

v1.1.0(2mo ago)17MITPHP ^8.3

Since Feb 9Compare

[ Source](https://github.com/TappNetwork/filament-confetti)[ Packagist](https://packagist.org/packages/tapp/filament-confetti)[ RSS](/packages/tapp-filament-confetti/feed)WikiDiscussions Synced 3w ago

READMEChangelog (2)Dependencies (7)Versions (4)Used By (0)

Filament Confetti
=================

[](#filament-confetti)

A beautiful and performant confetti animation plugin for Filament PHP using [canvas-confetti](https://github.com/catdad/canvas-confetti). Features async Alpine.js loading, fluent Laravel-style API, and multiple built-in presets.

[![](./art/logo.png)](./art/logo.png)

Features
--------

[](#features)

- **Async Loading** - Canvas-confetti library is loaded on-demand using Alpine.js
- **Multiple Presets** - Fireworks, Snow, Stars, Side Cannons, Realistic, and more
- **Fluent API** - Laravel-style chainable methods for easy configuration
- **Performant** - Leverages canvas-confetti's optimized rendering
- **Flexible** - Use as Actions, Components, or trigger via custom events
- **Customizable** - Full control over colors, shapes, emojis, and physics

Requirements
------------

[](#requirements)

- PHP 8.2+
- Filament 4.x/5.x
- Laravel 11.x/12.x

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require tapp/filament-confetti
```

The package will automatically register itself.

Usage
-----

[](#usage)

### As an Action

[](#as-an-action)

Use confetti in your Filament actions:

```
use Tapp\FilamentConfetti\Actions\ConfettiAction;

// Basic confetti
ConfettiAction::make('celebrate')
    ->label('Celebrate! 🎉')
    ->basic()

// Fireworks
ConfettiAction::make('fireworks')
    ->label('Launch Fireworks')
    ->fireworks()

// With auto-fire
ConfettiAction::make('success')
    ->fireworks()
    ->autoFire()
    ->delay(500)

// Custom configuration
ConfettiAction::make('custom')
    ->confettiOptions([
        'particleCount' => 150,
        'spread' => 90,
        'origin' => ['y' => 0.5],
    ])
    ->colors(['#ff0000', '#00ff00', '#0000ff'])
```

### As a Component

[](#as-a-component)

Add confetti to forms or infolists:

```
use Tapp\FilamentConfetti\Components\Confetti;

// In a form schema
Confetti::make()
    ->stars()
    ->autoFire()
    ->delay(1000)

// With custom trigger
Confetti::make()
    ->fireworks()
    ->trigger('celebrate')

// Then trigger from JavaScript
// $dispatch('celebrate')
```

### Via JavaScript Event

[](#via-javascript-event)

Trigger confetti from anywhere in your Filament app:

```
// Trigger with default config
$dispatch('confetti')

// Trigger with custom config
$dispatch('confetti', {
    preset: 'fireworks',
    options: {
        duration: 3000,
        colors: ['#ff0000', '#00ff00']
    }
})
```

### Dispatch event via Livewire component

[](#dispatch-event-via-livewire-component)

Trigger confetti from any Livewire component:

```
$this->dispatch('confetti', [
    'options' => [
        'particleCount' => 50,
        'spread' => 70,
        'origin' => ['y' => 0.6]
    ]
]);
```

Presets
-------

[](#presets)

### Basic

[](#basic)

Simple confetti burst:

```
ConfettiAction::make('basic')
    ->basic()
    ->particleCount(100)
    ->colors(['#ff0000', '#00ff00', '#0000ff'])
```

### Fireworks

[](#fireworks)

Continuous fireworks display:

```
ConfettiAction::make('fireworks')
    ->fireworks(duration: 5000)
    ->colors(['#FFE400', '#FFBD00', '#E89400'])
```

### Snow

[](#snow)

Gentle falling snowflakes:

```
ConfettiAction::make('snow')
    ->snow(duration: 10000)
    ->colors(['#ffffff', '#99ccff'])
```

### Stars

[](#stars)

Sparkling stars:

```
ConfettiAction::make('stars')
    ->stars()
    ->colors(['#FFE400', '#FFBD00', '#E89400', '#FFCA6C', '#FDFFB8'])
```

### Side Cannons

[](#side-cannons)

Confetti shooting from the sides:

```
ConfettiAction::make('cannons')
    ->sideCannons(duration: 3000)
    ->particleCount(5)
```

### Realistic

[](#realistic)

Multi-burst realistic confetti:

```
ConfettiAction::make('realistic')
    ->realistic()
    ->particleCount(200)
```

### School Pride

[](#school-pride)

Celebratory school-style confetti:

```
ConfettiAction::make('school')
    ->school(duration: 3000)
```

### Random Direction

[](#random-direction)

Confetti with randomized angles:

```
ConfettiAction::make('random')
    ->randomDirection()
```

### Emoji

[](#emoji)

Use any emoji as confetti:

```
ConfettiAction::make('hearts')
    ->emoji('❤️')

ConfettiAction::make('unicorns')
    ->emoji('🦄')
    ->particleCount(50)
```

### Custom Shapes

[](#custom-shapes)

Create confetti from SVG paths:

```
ConfettiAction::make('triangles')
    ->customShape('M0 10 L5 0 L10 10z')
    ->colors(['#ff0000', '#00ff00'])
```

Advanced Configuration
----------------------

[](#advanced-configuration)

### All Available Options

[](#all-available-options)

```
ConfettiAction::make('advanced')
    ->confettiOptions([
        'particleCount' => 100,       // Number of confetti particles
        'angle' => 90,                // Launch angle in degrees
        'spread' => 45,               // Spread in degrees
        'startVelocity' => 45,        // Initial velocity in pixels
        'decay' => 0.9,               // Speed decay rate
        'gravity' => 1,               // Gravity strength
        'drift' => 0,                 // Horizontal drift
        'ticks' => 200,               // Animation duration
        'origin' => [                 // Launch origin point
            'x' => 0.5,               // 0 = left, 1 = right
            'y' => 0.5                // 0 = top, 1 = bottom
        ],
        'colors' => [                 // Array of color hex codes
            '#ff0000',
            '#00ff00',
            '#0000ff'
        ],
        'shapes' => [                 // Particle shapes
            'square',
            'circle',
            'star'
        ],
        'scalar' => 1,                // Size multiplier
        'zIndex' => 100,              // CSS z-index
    ])
```

### Combining Multiple Effects

[](#combining-multiple-effects)

Chain multiple confetti calls for complex effects:

```
ConfettiAction::make('combo')
    ->action(function () {
        // First burst
        $this->dispatch('confetti', [
            'options' => [
                'particleCount' => 50,
                'spread' => 70,
                'origin' => ['y' => 0.6]
            ]
        ]);

        // Second burst after delay
        $this->dispatch('confetti', [
            'options' => [
                'particleCount' => 30,
                'spread' => 90,
                'origin' => ['x' => 0.2, 'y' => 0.7]
            ]
        ]);
    })
```

### Dynamic Configuration

[](#dynamic-configuration)

Use closures for dynamic values:

```
ConfettiAction::make('dynamic')
    ->confettiOptions(fn () => [
        'particleCount' => rand(50, 150),
        'angle' => rand(55, 125),
        'colors' => $this->getUserFavoriteColors(),
    ])
```

Examples
--------

[](#examples)

### Success Notification

[](#success-notification)

Celebrate when a form is successfully submitted:

```
use Filament\Forms\Form;
use YourVendor\FilamentConfetti\Actions\ConfettiAction;

public function form(Form $form): Form
{
    return $form
        ->schema([
            // ... your form fields
        ])
        ->statePath('data');
}

protected function getFormActions(): array
{
    return [
        Action::make('save')
            ->action(function () {
                // Save logic
                $this->save();

                // Trigger confetti
                $this->dispatch('confetti', [
                    'preset' => 'fireworks',
                    'options' => ['duration' => 3000]
                ]);

                Notification::make()
                    ->success()
                    ->title('Saved successfully!')
                    ->send();
            }),
    ];
}
```

### Celebration Page

[](#celebration-page)

Create a custom page with auto-firing confetti:

```
use Filament\Pages\Page;
use YourVendor\FilamentConfetti\Components\Confetti;

class CelebrationPage extends Page
{
    protected static string $view = 'filament.pages.celebration';

    public function mount(): void
    {
        $this->dispatch('confetti', [
            'preset' => 'school',
            'options' => ['duration' => 5000]
        ]);
    }
}
```

### Table Action

[](#table-action)

Add confetti to table row actions:

```
use Filament\Tables\Actions\Action;

Action::make('celebrate')
    ->icon('heroicon-o-sparkles')
    ->action(function (Model $record) {
        $record->markAsCelebrated();

        $this->dispatch('confetti', [
            'preset' => 'stars',
            'options' => [
                'colors' => ['#FFE400', '#FFBD00', '#E89400']
            ]
        ]);
    })
```

### Modal with Confetti

[](#modal-with-confetti)

Show confetti when opening a modal:

```
Action::make('winner')
    ->modalHeading('Congratulations! 🎉')
    ->modalContent(view('filament.modals.winner'))
    ->modalActions([
        Action::make('claim')
            ->action(fn () => $this->claimPrize()),
    ])
    ->after(function () {
        $this->dispatch('confetti', [
            'preset' => 'realistic',
            'options' => ['particleCount' => 200]
        ]);
    })
```

Browser Compatibility
---------------------

[](#browser-compatibility)

This plugin uses the [canvas-confetti](https://github.com/catdad/canvas-confetti) library, which works in all modern browsers:

- Chrome/Edge 15+
- Firefox 44+
- Safari 11+
- Opera

Credits
-------

[](#credits)

- Built on [canvas-confetti](https://github.com/catdad/canvas-confetti) by [catdad](https://github.com/catdad)
- Created for [Filament PHP](https://filamentphp.com)

License
-------

[](#license)

MIT License - see [LICENSE](LICENSE) file for details

Support
-------

[](#support)

For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/TappNetwork/filament-confetti).

###  Health Score

39

—

LowBetter than 84% of packages

Maintenance83

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community4

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~78 days

Total

2

Last Release

86d ago

PHP version history (2 changes)v1.0.0PHP ^8.2

v1.1.0PHP ^8.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/837400?v=4)[tapp](/maintainers/tapp)[@tapp](https://github.com/tapp)

![](https://avatars.githubusercontent.com/u/413354?v=4)[andreiabohner](/maintainers/andreiabohner)[@andreiabohner](https://github.com/andreiabohner)

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/tapp-filament-confetti/health.svg)

```
[![Health](https://phpackages.com/badges/tapp-filament-confetti/health.svg)](https://phpackages.com/packages/tapp-filament-confetti)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.8k](/packages/rawilk-profile-filament-plugin)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-debugger

About

104162.2k2](/packages/stephenjude-filament-debugger)[backstage/mails

View logged mails and events in a beautiful Filament UI.

16121.5k](/packages/backstage-mails)[finity-labs/fin-mail

A powerful email template manager and composer for Filament with dynamic token replacement, template versioning, and inline email sending.

284.8k2](/packages/finity-labs-fin-mail)[tapp/filament-form-builder

User facing form builder using Filament components

132.4k5](/packages/tapp-filament-form-builder)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)