# Text Pressure

> Variable-font text whose letters swell in weight, width and slant near the cursor, with click ripples, idle wave or pulse motion and a pressure color.

Variable-font letters that swell toward the cursor. Each letter's weight, width and slant follow how close the pointer is, with adjustable reach and smoothing. Click to send a ripple of pressure through the word. While the cursor is away, the word can keep rolling a wave or breathing in and out, and letters can warm toward an accent color as they swell. Move over the text, click it, or pick a preset in the panel.

<demo-text-pressure>



</demo-text-pressure>

## Installation

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

## Usage

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

<template>
  <div class="relative h-100 w-full">
    <TextPressure
      text="Hello!"
      idle="pulse"
      pressure-color="#ff5a1f"
      :radius="0.4"
      :smoothing="0.3"
      :flex="false"
      :italic="false"
      :min-font-size="36"
    />
  </div>
</template>
```

The font size fills the container width. The default font is Roboto Flex from Google Fonts; any variable font with `wght`, `wdth` and `ital` axes works through `font-family` and `font-url`.

## 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>
      <code>
        'Compressa'
      </code>
    </td>
    
    <td>
      Text that is displayed and animated
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Roboto Flex'
      </code>
    </td>
    
    <td>
      Name of the variable font family
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-url
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Roboto Flex on Google Fonts
    </td>
    
    <td>
      Stylesheet URL that loads the variable font. The font needs width, weight and italic axes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Fill color of the text
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pressure-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Letters blend toward this color as they swell under pressure. Empty keeps one color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#FF0000'
      </code>
    </td>
    
    <td>
      Color of the outline when stroke is on
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        idle
      </code>
    </td>
    
    <td>
      <code>
        'none' | 'wave' | 'pulse'
      </code>
    </td>
    
    <td>
      <code>
        'none'
      </code>
    </td>
    
    <td>
      What the letters do while the pointer is away. A wave rolls a swell across the word, a pulse makes it breathe
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        idle-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Speed of the idle wave or pulse. <code>
        2
      </code>
      
       plays it twice as fast
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How far the cursor's pull reaches, as a fraction of the text width. Also sets the length of the idle wave
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        smoothing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How softly the letters follow the cursor, from <code>
        0
      </code>
      
       for instant to <code>
        1
      </code>
      
       for a slow, floaty glide
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-ripple
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking sends a wave of pressure rippling outward through the letters
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flex
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Spreads the letters across the full width
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Stretches the text vertically to fill the height of its container
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        alpha
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Fades letters out the further they are from the cursor
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws an outline behind each letter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        width
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Varies the width axis of the font with pressure
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        weight
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Varies the weight axis of the font with pressure
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        italic
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Varies the italic axis of the font with pressure
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Width of the outline when stroke is on, in px. About half of it shows around the letters
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        min-font-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        24
      </code>
    </td>
    
    <td>
      Minimum font size, so the text never gets too small on narrow screens
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Classes merged onto the wrapper
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The heading carries the full text as `aria-label`; the per-letter spans are `aria-hidden`.
- When the user prefers reduced motion, the idle wave and pulse are off; letters still respond to the cursor.
- The animation loop sleeps once the letters settle and pauses while off screen.
- Ported from [React Bits](https://reactbits.dev/text-animations/text-pressure) by David Haz.