True Focus
Free
A sentence where one word at a time is sharp, framed by corner brackets that glide from word to word.
Focus on what matters
Hover to pause, or press Tab to move the frame
Customize
Mode
1800ms
5px
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/true-focus.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/true-focus.tsx.
Usage
import { TrueFocus } from "@/components/ui/true-focus";
<TrueFocus text="Focus on what matters" mode="auto" interval={1800} className="text-5xl font-black" />Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The sentence, split into words. |
| mode | "auto" | "manual" | "auto" | Auto moves the focus on a timer and pauses on hover. Manual follows the pointer and keyboard only. |
| interval | number | 1800 | Milliseconds per word in auto mode. |
| blur | number | 5 | Blur in pixels for the words out of focus. |
| frameColor | string | "#ff784f" | Color of the corner brackets, as a hex value. |
| padding | number | 10 | Space in pixels between a word and its frame. |
| className | string | — | Extra classes for the sentence. |
Dependencies: motion