# Signature

> Animated handwriting effect that converts text to font glyph paths and reveals them with staggered SVG stroke animations.

<demo-signature>



</demo-signature>

## Installation

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

## Usage

```vue
<Signature text="Hello World" :font-size="48" :duration="2" />
```

## Props

### Signature

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

<tbody>
  <tr>
    <td>
      <code>
        text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Signature'
      </code>
    </td>
    
    <td>
      The text to convert into animated glyph paths
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Fill color for the revealed text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        32
      </code>
    </td>
    
    <td>
      Font size used to scale the glyph paths
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Duration of the stroke reveal animation in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Base delay before the animation starts
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        in-view
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Only animate when the component scrolls into view
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        once
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      When <code>
        in-view
      </code>
      
       is true, only trigger the animation once
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-url
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '/fonts/LastoriaBoldRegular.otf'
      </code>
    </td>
    
    <td>
      URL to an OpenType font to use for generating the paths
    </td>
  </tr>
</tbody>
</table>

## Notes

The component needs an OpenType font that can be loaded by [opentype.js](https://opentype.js.org/). nxui ships the **Lastoria Bold** display font locally at `/public/fonts/LastoriaBoldRegular.otf`, which is the default `font-url`. If you install this component via the CLI, make sure the font file is available at that path or provide your own `font-url`.