# Hyper Text

> A text component that scrambles letters before revealing the final text on hover or load.

<demo-hyper-text>



</demo-hyper-text>

## Installation

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

## Usage

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

<template>
  <HyperText text="Hyper Text" 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 content to be animated
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        800
      </code>
    </td>
    
    <td>
      Total animation duration in milliseconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animate-on-load
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Whether to start the animation automatically on mount
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>