Filament Click Spark

ReactBits-inspired click spark for Filament admin panels. Click a button, icon button, or link and a short burst of particles expands from the cursor.

No Vite, NPM, Tailwind build, or extra JavaScript packages. One Blade view and an HTML5 canvas.

Installation

composer require martin6363/filament-click-spark

Register the plugin on your panel. That is the only application change required:

use Filament\Panel;
use Martin6363\FilamentClickSpark\FilamentClickSparkPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(FilamentClickSparkPlugin::make());
}

Optionally publish the config file:

php artisan vendor:publish --tag=filament-click-spark-config

Trigger modes

Entire panel (empty background included)

FilamentClickSparkPlugin::make()
    ->clickAnywhere(true);

Or:

FilamentClickSparkPlugin::make()
    ->triggerOnMode('anywhere');

Interactive elements only (default)

FilamentClickSparkPlugin::make()
    ->clickAnywhere(false)
    ->targetSelectors('.fi-btn, .fi-icon-btn, a, button');

Or:

FilamentClickSparkPlugin::make()
    ->triggerOnMode('elements');

Optional color

By default the sparks use Filament's primary color (--primary-500). Override it:

FilamentClickSparkPlugin::make()
    ->color('#f59e0b');

Configuration

Published file: config/filament-click-spark.php

return [
    'click_anywhere' => false,
    'target_selectors' => '.fi-btn, .fi-icon-btn, .fi-link, .fi-ac-btn, .fi-dropdown-list-item, .fi-sidebar-item-btn, .fi-section, [role="button"], button, a, input, select, textarea',
];

Fluent methods on the plugin override these defaults per panel.

License

The MIT License (MIT). See LICENSE.md.