# Text String

> A Verlet physics rope text animation where each character acts as a connected particle. Drag letters to unravel the string, toggle gravity, and watch characters collide and bounce.

<demo-text-string>



</demo-text-string>

## Installation

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

## Usage

```vue
<TextString
  text="Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do."
/>
```

## Props

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

<tbody>
  <tr>
    <td>
      text
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Alice in Wonderland excerpt
    </td>
    
    <td>
      The text to display as a physics rope
    </td>
  </tr>
  
  <tr>
    <td>
      font-family
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Georgia'
      </code>
    </td>
    
    <td>
      Font family for measurement and display
    </td>
  </tr>
  
  <tr>
    <td>
      font-size
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        20
      </code>
    </td>
    
    <td>
      Font size in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      line-height
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        28
      </code>
    </td>
    
    <td>
      Line height in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      damping
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.97
      </code>
    </td>
    
    <td>
      Velocity damping factor (0-1)
    </td>
  </tr>
  
  <tr>
    <td>
      gravity
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.15
      </code>
    </td>
    
    <td>
      Gravity strength
    </td>
  </tr>
  
  <tr>
    <td>
      constraint-iterations
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        12
      </code>
    </td>
    
    <td>
      Number of constraint solver iterations per frame
    </td>
  </tr>
  
  <tr>
    <td>
      collision-radius
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        7
      </code>
    </td>
    
    <td>
      Collision detection radius per letter
    </td>
  </tr>
  
  <tr>
    <td>
      class
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>