# Fizzy Button

> A button that starts to fizz as your pointer approaches, then floods with rising particles and inverts on hover.

<demo-fizzy-button>



</demo-fizzy-button>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/fizzy-button.json"
```

## Usage

```vue
<script setup lang="ts">
  import FizzyButton from '~/components/ui/fizzy-button/FizzyButton.vue';
</script>

<template>
  <FizzyButton label="Make it happen" :proximity="160" />
</template>
```

Particles fade in once the pointer is within `proximity` pixels of the button, and the animation only runs while the pointer is within `proximity + wake-margin`. Hovering, pressing or keyboard-focusing the button raises an inverting fill, and the particles at its edge swell as it passes. With `trigger="toggle"`, a click locks the fill and `v-model:pressed` holds the state.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Make it happen'
      </code>
    </td>
    
    <td>
      Button text; the default slot overrides it
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'hover' | 'toggle'
      </code>
    </td>
    
    <td>
      <code>
        'hover'
      </code>
    </td>
    
    <td>
      Fill on hover, or toggle on click
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        proximity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        160
      </code>
    </td>
    
    <td>
      Px beyond the button where particles appear
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wake-margin
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        60
      </code>
    </td>
    
    <td>
      Extra px where the animation starts running
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'mixed' | 'circle' | 'square' | 'triangle' | 'cross'
      </code>
    </td>
    
    <td>
      <code>
        'mixed'
      </code>
    </td>
    
    <td>
      Particle shape
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      Number of particles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Particle size
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.65
      </code>
    </td>
    
    <td>
      Size spread between particles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        drift
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Sideways sway
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spin
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Rotation speed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        crest
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size and opacity boost at the fill edge
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rest-alpha
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.18
      </code>
    </td>
    
    <td>
      Particle opacity at rest
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        active-alpha
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.58
      </code>
    </td>
    
    <td>
      Particle opacity when filled
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        idle-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      Rise speed at rest
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        active-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Rise speed when filled
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      Seconds for the fill to rise or fall
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        debug
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Shows the proximity and wake rings
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        v-model:pressed
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Toggle state when <code>
        trigger
      </code>
      
       is <code>
        toggle
      </code>
    </td>
  </tr>
</tbody>
</table>

The animation pauses off screen and in background tabs. With `prefers-reduced-motion`, particles stay still and the fill switches instantly.

Ported from Jhey Tompkins' [fizzy button](https://jhey.dev/demos/2026/fizzy-button).