# Stroke Text

The text is rendered as SVG glyphs. Each letter outline draws itself on with a staggered stroke, then the fill floods in with a wipe from any edge or a fade. Outlines can be solid, dashed or dotted, and dashed or dotted outlines can keep flowing around the letters. Filled letters can lift off the page with a soft offset shadow. Hover the text to redraw the outline, or set the trigger to play on hover, on scroll or in a loop.

<demo-stroke-text>



</demo-stroke-text>

## Installation

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

## Usage

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

<template>
  <StrokeText
    text="Draw Attention"
    stroke-color="#38bdf8"
    wipe-from="bottom"
    ease="expo.out"
    :stroke-width="2"
    :draw-duration="1.2"
    shadow
    hover-redraw
  />
</template>
```

The SVG scales down to its container width and never grows past the measured text width.

## 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>
        'Draw Attention'
      </code>
    </td>
    
    <td>
      The heading copy rendered as measured SVG glyphs.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#A78BFA'
      </code>
    </td>
    
    <td>
      Color of the drawing outline.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Color that floods into the glyphs after the draw. Follows the surrounding text.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.4
      </code>
    </td>
    
    <td>
      Outline thickness in SVG units.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        draw-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.6
      </code>
    </td>
    
    <td>
      Seconds each glyph outline takes to draw.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      Seconds between the outline finishing and the fill starting.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stagger
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.05
      </code>
    </td>
    
    <td>
      Seconds between each glyph starting to draw.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ease
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'power2.out'
      </code>
    </td>
    
    <td>
      GSAP-style ease name for the draw: <code>
        power0
      </code>
      
      –<code>
        power4
      </code>
      
      , <code>
        sine
      </code>
      
      , <code>
        expo
      </code>
      
      , <code>
        circ
      </code>
      
      , <code>
        back
      </code>
      
       with <code>
        .in
      </code>
      
      , <code>
        .out
      </code>
      
       or <code>
        .inOut
      </code>
      
      , or <code>
        none
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trigger
      </code>
    </td>
    
    <td>
      <code>
        'mount' | 'hover' | 'scroll' | 'loop'
      </code>
    </td>
    
    <td>
      <code>
        'mount'
      </code>
    </td>
    
    <td>
      When the animation plays. <code>
        loop
      </code>
      
       draws and undraws forever.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-mode
      </code>
    </td>
    
    <td>
      <code>
        'wipe' | 'fade' | 'none'
      </code>
    </td>
    
    <td>
      <code>
        'wipe'
      </code>
    </td>
    
    <td>
      How the fill appears after the outline.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wipe-from
      </code>
    </td>
    
    <td>
      <code>
        'left' | 'right' | 'top' | 'bottom'
      </code>
    </td>
    
    <td>
      <code>
        'left'
      </code>
    </td>
    
    <td>
      Edge the wipe fill starts from.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        128
      </code>
    </td>
    
    <td>
      Font size in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-weight
      </code>
    </td>
    
    <td>
      <code>
        number | string
      </code>
    </td>
    
    <td>
      <code>
        800
      </code>
    </td>
    
    <td>
      Font weight.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-family
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'inherit'
      </code>
    </td>
    
    <td>
      Font family.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        letter-spacing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        -4
      </code>
    </td>
    
    <td>
      Letter spacing in pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reverse
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Stagger from the last glyph to the first.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-style
      </code>
    </td>
    
    <td>
      <code>
        'solid' | 'dashed' | 'dotted'
      </code>
    </td>
    
    <td>
      <code>
        'solid'
      </code>
    </td>
    
    <td>
      Outline style.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dash-length
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Dash or dot spacing for dashed and dotted outlines.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        marching
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Dashed and dotted outlines keep flowing around the letters.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hover-redraw
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Redraws the outline on hover after the first draw (not with <code>
        hover
      </code>
      
       or <code>
        loop
      </code>
      
      ).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shadow
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Filled letters lift off the page with a soft offset shadow.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shadow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      stroke color
    </td>
    
    <td>
      Shadow color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The root has `role="img"` and an `aria-label` with the text. The SVG is `aria-hidden`.
- With `prefers-reduced-motion`, the text renders in its final drawn and filled state, with no marching or hover redraw.
- The `scroll` trigger plays once when the text reaches 82% of the viewport height.
- Ported from [React Bits](https://reactbits.dev/text-animations/stroke-text) by David Haz.