# Particle Typography

> Canvas-based text rendered as particles that disperse on cursor hover with spring physics.

<demo-cursor-driven-particle-typography>



</demo-cursor-driven-particle-typography>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/cursor-driven-particle-typography.json"
```

## Usage

```vue
<script setup lang="ts">
  import CursorDrivenParticleTypography from '~/components/ui/cursor-driven-particle-typography/CursorDrivenParticleTypography.vue';
</script>

<template>
  <CursorDrivenParticleTypography text="nxui" class="h-75 w-full" />
</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 render as particles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        120
      </code>
    </td>
    
    <td>
      Font size in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Inter, sans-serif'
      </code>
    </td>
    
    <td>
      Font family
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Size of each particle
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        particle-density
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Density of particles (lower = more, minimum 1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dispersion-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        15
      </code>
    </td>
    
    <td>
      How strongly the cursor pushes particles away
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        return-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.08
      </code>
    </td>
    
    <td>
      Speed at which particles return to origin
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Custom particle color (overrides inherited text color)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>