# True Focus

> Blurs every word but one and marks the focused word with corner brackets, a box, an underline or a soft highlight that glides from word to word.

A sentence where one word at a time is sharp and the rest are blurred. A frame moves to the focused word on a timer: corner brackets, a box, an underline or a soft marker highlight. The focused word can grow slightly, the frame can spring between words, and the order can be random. Turn on hover mode to move the focus with the cursor instead. Try the presets in the panel.

<demo-true-focus>



</demo-true-focus>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import TrueFocus from '~/components/ui/true-focus/TrueFocus.vue';
</script>

<template>
  <TrueFocus
    sentence="True Focus"
    border-color="#5227FF"
    :blur-amount="5"
    :animation-duration="0.5"
    :pause-between-animations="1"
  />

  <TrueFocus
    sentence="Make every word count"
    focus-style="underline"
    border-color="#ff5a36"
    easing="spring"
    order="random"
    :blur-amount="0"
    :unfocused-opacity="0.28"
    :border-width="4"
  />
</template>
```

## Examples

### Manual Hover Mode

Focus follows mouse hover instead of auto-cycling.

<demo-true-focus-hover>



</demo-true-focus-hover>

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        sentence
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'True Focus'
      </code>
    </td>
    
    <td>
      The text to display
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        separator
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ' '
      </code>
    </td>
    
    <td>
      String used to split the sentence into words
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        manual-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Focus follows the hovered word instead of cycling on its own
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        focus-style
      </code>
    </td>
    
    <td>
      <code>
        'brackets' | 'box' | 'underline' | 'highlight'
      </code>
    </td>
    
    <td>
      <code>
        'brackets'
      </code>
    </td>
    
    <td>
      How the focused word is marked
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        order
      </code>
    </td>
    
    <td>
      <code>
        'sequential' | 'random'
      </code>
    </td>
    
    <td>
      <code>
        'sequential'
      </code>
    </td>
    
    <td>
      Visit words in order or jump to a random other word
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        easing
      </code>
    </td>
    
    <td>
      <code>
        'smooth' | 'spring'
      </code>
    </td>
    
    <td>
      <code>
        'smooth'
      </code>
    </td>
    
    <td>
      Smooth glide or a springy overshoot between words
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        blur-amount
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      Blur (px) of the words out of focus
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        focus-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size the focused word grows to. 1 keeps it the same
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        unfocused-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the words out of focus
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'green'
      </code>
    </td>
    
    <td>
      Color of the brackets, box or underline
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        highlight-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Fill of the <code>
        highlight
      </code>
      
       style (30% mix). Falls back to <code>
        border-color
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'transparent'
      </code>
    </td>
    
    <td>
      Drop-shadow glow around the frame
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animation-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Seconds the focus takes to move
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pause-between-animations
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Seconds the focus rests on each word
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        corner-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        16
      </code>
    </td>
    
    <td>
      Length of each corner bracket (px)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Thickness of the brackets, box or underline (px)
    </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>

## Accessibility

- The words are plain text in reading order, so screen readers read the sentence normally; the frame is `aria-hidden`.
- With `prefers-reduced-motion: reduce` the focus still moves, but jumps without a transition.
- Hover mode needs a pointer. On touch screens leave `manual-mode` off so the focus cycles by itself.
- Ported from [React Bits](https://reactbits.dev/text-animations/true-focus) by David Haz.