# Text Repel

> Physics-based text where letters are repelled or attracted by the cursor with spring dynamics.

<demo-text-repel>



</demo-text-repel>

## Installation

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

## Usage

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

<template>
  <TextRepel text="Hover Me" 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 display
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        120
      </code>
    </td>
    
    <td>
      Cursor influence radius in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        45
      </code>
    </td>
    
    <td>
      Maximum displacement strength in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mode
      </code>
    </td>
    
    <td>
      <code>
        'repel' | 'attract'
      </code>
    </td>
    
    <td>
      <code>
        'repel'
      </code>
    </td>
    
    <td>
      Push letters away or pull them toward the cursor
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stiffness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        180
      </code>
    </td>
    
    <td>
      Spring stiffness — higher = snappier return
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        damping
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        14
      </code>
    </td>
    
    <td>
      Spring damping — lower = bouncier return
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mass
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.4
      </code>
    </td>
    
    <td>
      Spring mass — higher = heavier feel
    </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 letter
    </td>
  </tr>
</tbody>
</table>