True Focus Text: Free React + Tailwind Component

Words cycle in and out of focus between blur and sharpness, with an animated frame marking the focal point.

Focus cycles word by word: the focused word is sharp and the rest are blurred, while a four-corner frame glides smoothly to the current word. manualMode hands control over to mouse hover instead.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add true-focus-text.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Focus the sentencesentence

Out-of-focus blur (px)blurAmount

Focus ring colorborderColor

Frame travel duration (s)animationDuration

0.5

Dwell per word (s)pauseBetweenAnimations

Manual (focus follows the mouse)manualMode

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TrueFocusText/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/true-focus-text.en.json

Or, once registries are configured in components.json, install it as @webberui/true-focus-text.

Usage

import { TrueFocusText } from "@/components/ui/true-focus-text";

<TrueFocusText
  sentence="Focus Sharpens Everything"
  borderColor="#22d3ee"
  glowColor="rgba(34, 211, 238, 0.55)"
/>

Props

Prop	Type	Default	Description
`sentence`	`string`	`"True Focus Text"`	The sentence to cycle focus through, split on whitespace
`blurAmount`	`number`	`5`	Blur strength of unfocused words (px)
`borderColor`	`string`	`"#22d3ee"`	Color of the four corners of the focus frame
`glowColor`	`string`	`"rgba(34, 211, 238, 0.55)"`	Glow color of the corners
`animationDuration`	`number`	`0.5`	Duration of the frame movement and blur switch (seconds)
`pauseBetweenAnimations`	`number`	`1`	How long each word stays in focus (seconds)
`manualMode`	`boolean`	`false`	Let mouse hover control the focus instead of cycling automatically

Accessibility

When the user has "reduce motion" enabled at the system level, a sharp, frameless static sentence is rendered
The complete sentence is exposed sr-only to assistive technology, and both the split visual words and the frame are marked aria-hidden

True Focus Text