# Signature Eraser

> A signing canvas whose ink disintegrates into physics particles when cleared.

<demo-signature-eraser>



</demo-signature-eraser>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import SignatureEraser from '~/components/ui/signature-eraser/SignatureEraser.vue';
</script>

<template>
  <SignatureEraser class="h-100" />
</template>
```

The component renders a default cursive signature on a canvas. Draw over it
with the **pen**, wipe portions away with the **eraser**, or press **Clear**
to spawn a particle for every sampled ink point and run the active physics
effect. The effect label cycles through five modes:

- **Thanos Snap** — particles drift, scatter and fade in place.
- **Black Hole** — particles orbit and spiral into the canvas center.
- **Explosion** — particles burst outward from the center with gravity.
- **Wind Sweep** — particles are swept laterally into a trailing cloud.
- **Rewind** — particles fly back to their origin and rebuild the signature.

Ink sampling respects `prefers-reduced-motion`: with reduced motion enabled,
Clear wipes the canvas instantly instead of running the particle physics.
The canvas resizes to its container and re-rasterizes ink on resize, so give
it a real height (`h-100`, `size-full` in a sized parent, etc.).

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        signature
      </code>
    </td>
    
    <td>
      <code>
        SignatureEraserStroke[]
      </code>
    </td>
    
    <td>
      built-in cursive
    </td>
    
    <td>
      Strokes rendered as the initial signature
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        effect
      </code>
    </td>
    
    <td>
      <code>
        SignatureEraserEffect
      </code>
    </td>
    
    <td>
      <code>
        'thanos-snap'
      </code>
    </td>
    
    <td>
      Particle effect used when the signature is cleared
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pen-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Pen stroke width in CSS pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        eraser-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        18
      </code>
    </td>
    
    <td>
      Eraser radius in CSS pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Particle count multiplier (<code>
        1
      </code>
      
       = one per sampled point)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-restore
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Restore the signature after an erase effect finishes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-restore-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2600
      </code>
    </td>
    
    <td>
      Delay before auto-restore in milliseconds
    </td>
  </tr>
</tbody>
</table>

`SignatureEraserEffect` is one of `'thanos-snap'`, `'black-hole'`,
`'explosion'`, `'wind-sweep'`, or `'rewind'`.

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        cleared
      </code>
    </td>
    
    <td>
      <code>
        SignatureEraserEffect
      </code>
    </td>
    
    <td>
      Fired when Clear runs an effect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        restored
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Fired when the signature is rebuilt
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        change
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      Stroke count after a new pen stroke
    </td>
  </tr>
</tbody>
</table>

## Credits

Inspired by a physics-based signature eraser interaction shared in the Vue
community.