@props(['spawnRate' => null, 'speedScale' => null, 'minDistance' => null, 'maxDistance' => null, 'burst' => null])
<div x-data="sparkleEffect(@js($spawnRate), @js($speedScale), @js($minDistance), @js($maxDistance), @js($burst))"
     @mouseover="start($event)"
     @mousemove="start($event)"
     @mouseleave="stop()"
     @mousedown="stop()"
     {{ $attributes->class(['relative']) }}
>
    {{ $slot }}
    <canvas x-ref="canvas" class="absolute pointer-events-none" style="top: -128px; left: -128px;"></canvas>
</div>