martin6363 / filament-click-spark
ReactBits-inspired click spark particles for Filament admin panels
Package info
github.com/Martin6363/filament-click-spark
Language:Blade
pkg:composer/martin6363/filament-click-spark
Requires
- php: ^8.2|^8.3|^8.4
- filament/filament: ^4.0|^5.0
- illuminate/contracts: ^11.0|^12.0|^13.0
- spatie/laravel-package-tools: ^1.16
README
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.