Browse components
True Focus
One word at a time snaps into focus inside gliding corner brackets while the rest of the sentence blurs.
Installation
npx shadcn@latest add @glint-ui/true-focusFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/true-focus.json
Usage
import { TrueFocus } from "@/components/ui/true-focus";
<TrueFocus text="Focus on what matters" mode="auto" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Focus on what matters" | Sentence to split into words. |
| blur | number | 5 | Blur of unfocused words, in px. |
| interval | number | 1800 | Ms per word in auto mode. |
| duration | number | 550 | Ms for the frame to travel. |
| mode | "auto" | "hover" | "auto" | Cycle on its own or follow the pointer. |
| color | string | "#bef264" | Corner bracket color. |
| className | string | — | Extra classes for the root element. |