# Letter Cascade

> A 3D split-flap letter animation with spring physics that cascades on hover or click.

<demo-letter-cascade>



</demo-letter-cascade>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import LetterCascade from '~/components/ui/letter-cascade/LetterCascade.vue';
</script>

<template>
  <LetterCascade text="Letter Cascade" class="text-4xl font-bold" />
</template>
```

## Props

<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>
      —
    </td>
    
    <td>
      The text to animate
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.04
      </code>
    </td>
    
    <td>
      Stagger delay between each letter in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger-from
      </code>
    </td>
    
    <td>
      <code>
        'first' | 'last' | 'center' | number
      </code>
    </td>
    
    <td>
      <code>
        'first'
      </code>
    </td>
    
    <td>
      Where the stagger wave originates
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stiffness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        220
      </code>
    </td>
    
    <td>
      Spring stiffness — higher = snappier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        damping
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        16
      </code>
    </td>
    
    <td>
      Spring damping — lower = bouncier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger-on-click
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Trigger animation on click instead of hover
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for the container
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        letter-class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      CSS classes applied to each individual letter
    </td>
  </tr>
</tbody>
</table>