# Gradient Text

> Living gradients inside your text — a sliding sweep, a drifting mesh or a swinging conic fan, with an optional glow, border and colors that drift toward the cursor.

Gradient Text fills its content with a moving gradient. The `linear` variant slides a gradient through the text, `flow` drifts soft blobs of color around like a living mesh gradient and `conic` swings a fan of colors around a point below the text. Add a soft glow or a gradient pill border, pause it on hover, or let the colors lean toward the cursor with `follow-pointer`. Hover the demo and try the variants in the panel.

<demo-gradient-text>



</demo-gradient-text>

## Installation

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

## Usage

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

<template>
  <GradientText
    class="text-5xl/normal font-semibold"
    :colors="['#5227FF', '#FF9FFC', '#B497CF']"
    variant="flow"
    :animation-speed="8"
    :glow="0.4"
    follow-pointer
  >
    Gradient Magic
  </GradientText>
</template>
```

The text inherits its size and weight from the surrounding element or the classes you pass. Keep a normal line height: the gradient is painted inside the line box, so a tight `leading-none` clips descenders.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#5227FF', '#FF9FFC', '#B497CF']
      </code>
    </td>
    
    <td>
      Gradient colors. A single color is repeated.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animation-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      Seconds for one sweep of the gradient. Lower is faster.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        variant
      </code>
    </td>
    
    <td>
      <code>
        'linear' | 'flow' | 'conic'
      </code>
    </td>
    
    <td>
      <code>
        'linear'
      </code>
    </td>
    
    <td>
      How the colors move: a sliding sweep, drifting blobs of color or a swinging conic fan.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        angle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        90
      </code>
    </td>
    
    <td>
      Gradient angle in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        'horizontal' | 'vertical' | 'diagonal'
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Shortcut for <code>
        angle
      </code>
      
       (90, 180, 135). Wins over <code>
        angle
      </code>
      
       when set.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      How stretched the gradient is, from 1 to 6. Larger values show fewer colors at once.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        yoyo
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Swing back and forth instead of looping in one direction (<code>
        linear
      </code>
      
       and <code>
        conic
      </code>
      
      ).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Strength of a soft blurred copy behind the text, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        show-border
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Wraps the text in a pill with a border drawn in the same gradient.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Border width in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pause-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the colors while the pointer is over the text.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        follow-pointer
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Pulls the colors toward the cursor on a spring, and lets them settle back when it leaves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes on the root.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      The text (or inline content) to fill.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The glow is a decorative copy marked `aria-hidden`, so the text is read once.
- With `prefers-reduced-motion: reduce` the colors stay still; `follow-pointer` still eases toward the cursor and back.
- The animation loop sleeps while the text is off screen and while it is paused with nothing left to settle.
- Ported from [React Bits](https://reactbits.dev/text-animations/gradient-text) by David Haz.