# Text Animate

> A premium text animation component with multiple presets including blur, fade, slide, and scale effects.

<demo-text-animate>



</demo-text-animate>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import TextAnimate from '~/components/ui/text-animate/TextAnimate.vue';
</script>

<template>
  <TextAnimate
    text="Beautiful Animations"
    animation="blur-in-up"
    class="text-4xl font-bold"
  />
</template>
```

## Examples

### Blur In Up (by Word)

<demo-text-animate-blur-up-word>



</demo-text-animate-blur-up-word>

### Fade In (by Word)

<demo-text-animate-fade-word>



</demo-text-animate-fade-word>

### Fade In (by Character)

<demo-text-animate-fade-char>



</demo-text-animate-fade-char>

### Scale Up (Whole Text)

<demo-text-animate-scale-up>



</demo-text-animate-scale-up>

## 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 content to animate
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animation
      </code>
    </td>
    
    <td>
      <code>
        AnimationType
      </code>
    </td>
    
    <td>
      <code>
        'fade-in'
      </code>
    </td>
    
    <td>
      fade-in, blur-in, blur-in-up, blur-in-down, slide-up, slide-down, slide-left, slide-right, scale-up, scale-down
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        by
      </code>
    </td>
    
    <td>
      <code>
        'text' | 'word' | 'character'
      </code>
    </td>
    
    <td>
      <code>
        'word'
      </code>
    </td>
    
    <td>
      How to split the text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        start-on-view
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Whether to start animation when element enters viewport
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        once
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Whether to run animation only once
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      Duration of the animation per segment in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Delay before starting the animation in seconds
    </td>
  </tr>
</tbody>
</table>