A camera focus pull across a line: the plane of focus travels in from the left, lands on a chosen word with a hint of chromatic fringe, then the depth of field opens until the whole line is sharp.
npx shadcn@latest add https://hyperblur.dev/r/text-rack-focus.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-rack-focus.tsx.
import { TextRackFocus } from "@/components/hyperblur/text-rack-focus"
<TextRackFocus text="Every frame tells the story" focus="frame" className="text-5xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| focus | string | Word or phrase where focus lands first. Defaults to the middle of the line. | |
| duration | number | 2.2 | Seconds for the full pull, from first motion to everything sharp. |
| maxBlur | number | 10 | Blur in pixels of letters far out of focus. |
| aberration | boolean | true | Add red and blue fringes to blurred letters. |
| trigger | "view" | "mount" | "view" | Start when scrolled into view or right after mount. |
| loop | number | 0 | When above 0, defocuses and pulls again this many seconds after it settles. |