React True Focus Effect

Spotlight-style text effect with blur transitions and targeting brackets that focus attention on one word at a time. Perfect for emphasis and presentations.

Want to create focus spotlight effects?

Join our Discord community for help from other developers.

Most text emphasis effects use simple highlighting or color changes that don't create true focus. This component simulates a targeting system that blurs surrounding text while highlighting the active word with animated corner brackets, creating a spotlight effect that guides attention naturally.

Animated focus targeting system

Text that cycles through focus states with blur effects and targeting brackets:

Loading component...

import { useEffect, useRef, useState } from 'react';import { motion } from 'motion/react';interface TrueFocusProps {  sentence?: string;  manualMode?: boolean;  blurAmount?: number;  borderColor?: string;  glowColor?: string;  animationDuration?: number;  pauseBetweenAnimations?: number;}interface FocusRect {  x: number;  y: number;  width: number;  height: number;}const TrueFocus: React.FC<TrueFocusProps> = ({  sentence = 'True Focus',  manualMode = false,  blurAmount = 5,  borderColor = 'green',  glowColor = 'rgba(0, 255, 0, 0.6)',  animationDuration = 0.5,  pauseBetweenAnimations = 1}) => {  const words = sentence.split(' ');  const [currentIndex, setCurrentIndex] = useState<number>(0);  const [lastActiveIndex, setLastActiveIndex] = useState<number | null>(null);  const containerRef = useRef<HTMLDivElement | null>(null);  const wordRefs = useRef<(HTMLSpanElement | null)[]>([]);  const [focusRect, setFocusRect] = useState<FocusRect>({ x: 0, y: 0, width: 0, height: 0 });  useEffect(() => {    if (!manualMode) {      const interval = setInterval(        () => {          setCurrentIndex(prev => (prev + 1) % words.length);        },        (animationDuration + pauseBetweenAnimations) * 1000      );      return () => clearInterval(interval);    }  }, [manualMode, animationDuration, pauseBetweenAnimations, words.length]);  useEffect(() => {    if (currentIndex === null || currentIndex === -1) return;    if (!wordRefs.current[currentIndex] || !containerRef.current) return;    const parentRect = containerRef.current.getBoundingClientRect();    const activeRect = wordRefs.current[currentIndex]!.getBoundingClientRect();    setFocusRect({      x: activeRect.left - parentRect.left,      y: activeRect.top - parentRect.top,      width: activeRect.width,      height: activeRect.height    });  }, [currentIndex, words.length]);  const handleMouseEnter = (index: number) => {    if (manualMode) {      setLastActiveIndex(index);      setCurrentIndex(index);    }  };  const handleMouseLeave = () => {    if (manualMode) {      setCurrentIndex(lastActiveIndex!);    }  };  return (    <div className="relative flex gap-4 justify-center items-center flex-wrap" ref={containerRef}>      {words.map((word, index) => {        const isActive = index === currentIndex;        return (          <span            key={index}            ref={el => {              wordRefs.current[index] = el;            }}            className="relative text-[3rem] font-black cursor-pointer"            style={              {                filter: manualMode                  ? isActive                    ? `blur(0px)`                    : `blur(${blurAmount}px)`                  : isActive                    ? `blur(0px)`                    : `blur(${blurAmount}px)`,                transition: `filter ${animationDuration}s ease`              } as React.CSSProperties            }            onMouseEnter={() => handleMouseEnter(index)}            onMouseLeave={handleMouseLeave}          >            {word}          </span>        );      })}      <motion.div        className="absolute top-0 left-0 pointer-events-none box-border border-0"        animate={{          x: focusRect.x,          y: focusRect.y,          width: focusRect.width,          height: focusRect.height,          opacity: currentIndex >= 0 ? 1 : 0        }}        transition={{          duration: animationDuration        }}        style={          {            '--border-color': borderColor,            '--glow-color': glowColor          } as React.CSSProperties        }      >        <span          className="absolute w-4 h-4 border-[3px] rounded-[3px] top-[-10px] left-[-10px] border-r-0 border-b-0"          style={{            borderColor: 'var(--border-color)',            filter: 'drop-shadow(0 0 4px var(--border-color))'          }}        ></span>        <span          className="absolute w-4 h-4 border-[3px] rounded-[3px] top-[-10px] right-[-10px] border-l-0 border-b-0"          style={{            borderColor: 'var(--border-color)',            filter: 'drop-shadow(0 0 4px var(--border-color))'          }}        ></span>        <span          className="absolute w-4 h-4 border-[3px] rounded-[3px] bottom-[-10px] left-[-10px] border-r-0 border-t-0"          style={{            borderColor: 'var(--border-color)',            filter: 'drop-shadow(0 0 4px var(--border-color))'          }}        ></span>        <span          className="absolute w-4 h-4 border-[3px] rounded-[3px] bottom-[-10px] right-[-10px] border-l-0 border-t-0"          style={{            borderColor: 'var(--border-color)',            filter: 'drop-shadow(0 0 4px var(--border-color))'          }}        ></span>      </motion.div>    </div>  );};export default TrueFocus;

Built with TypeScript for React applications, using Framer Motion for smooth bracket animations and CSS blur filters for focus effects with automatic cycling and manual hover modes.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/true-focus.json

npx shadcn@latest add https://www.shadcn.io/registry/true-focus.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/true-focus.json

bunx shadcn@latest add https://www.shadcn.io/registry/true-focus.json

Usage

import TrueFocus from "@/components/text/true-focus";

<div className="flex items-center justify-center min-h-screen w-full p-4 sm:p-8">
  <div className="text-center space-y-8">
    <TrueFocus 
      sentence="shadcn ui components"
      manualMode={false}
      blurAmount={4}
      borderColor="#22c55e"
      glowColor="rgba(34, 197, 94, 0.6)"
      animationDuration={1.2}
      pauseBetweenAnimations={1.5}
    />
  </div>
</div>

Why simple highlighting isn't effective

Traditional text emphasis uses static underlines, bold weights, or color changes—approaches that compete with other page elements and don't create true focus. Simple highlighting lacks the dynamic, attention-directing quality that makes content truly engaging.

This React component creates a targeting system that blurs unfocused words while highlighting the active word with animated corner brackets. The blur effect creates visual hierarchy by reducing cognitive load from surrounding text, while the targeting brackets provide clear visual indication of the current focus.

The key insight: blur creates focus better than highlighting. When surrounding elements are blurred while the target remains sharp, the eye naturally focuses on the clear content without competing visual elements.

Features

Dynamic blur transitions with customizable intensity for creating visual hierarchy and focus control
Animated targeting brackets with smooth position tracking and customizable colors and glow effects
Flexible interaction modes including automatic cycling and manual hover-based control systems
Performance optimized blur effects using CSS filters with smooth transition animations
Responsive bracket positioning with automatic word boundary detection and smooth tracking
Customizable timing controls for animation duration and pause intervals between focus changes
Free open source component compatible with Next.js and shadcn/ui design systems

API Reference

TrueFocus

Focus spotlight component with blur effects and targeting brackets.

Prop	Type	Default	Description
`sentence`	`string`	`'True Focus'`	Text content to focus through
`manualMode`	`boolean`	`false`	Enable hover-based manual control
`blurAmount`	`number`	`5`	Blur intensity for unfocused text
`borderColor`	`string`	`'green'`	Color of targeting brackets
`glowColor`	`string`	`'rgba(0, 255, 0, 0.6)'`	Glow effect color for brackets
`animationDuration`	`number`	`0.5`	Transition duration in seconds
`pauseBetweenAnimations`	`number`	`1`	Pause between auto-focus cycles

Interaction Modes

Focus control behavior options:

Mode	Behavior	Best For
Auto (manualMode: false)	Cycles through words automatically	Presentations, demos, storytelling
Manual (manualMode: true)	Hover to focus specific words	Interactive exploration, user control

Visual Customization

Appearance and timing configuration:

Property	Range	Effect	Recommended
blurAmount	0-10px	Background blur intensity	3-6px for subtlety, 8-10px for drama
animationDuration	0.3-2s	Transition speed	0.5-1s for smooth, 0.3s for snappy
pauseBetweenAnimations	0.5-3s	Auto-cycle timing	1-2s for reading, 0.5s for quick demos

Common gotchas

Performance with long sentences: Blur effects can be GPU-intensive with many words. For sentences longer than 10-15 words, consider breaking into multiple components or reducing blur amount for better performance.

Bracket positioning accuracy: The targeting brackets calculate position based on word bounding rectangles. Custom fonts with unusual metrics might cause slight positioning issues. Test with your chosen typography.

Manual mode hover behavior: In manual mode, the component remembers the last active index when hovering ends. This prevents flickering but might feel unexpected. Consider the user experience for your specific use case.

Mobile blur performance: CSS blur filters can impact performance on lower-end mobile devices. Consider reducing blurAmount or disabling the effect on mobile using media queries.

Text wrapping issues: The component works best with single-line text. Multi-line sentences might cause bracket positioning problems as word positions change with screen size.

Integration with other components

Perfect for presentations, product demos, or storytelling interfaces in Card layouts. The focus effect works excellently for step-by-step tutorials or feature highlights where sequential attention is important.

For educational content, combine with Progress indicators to show position in the sequence. The component pairs well with Button controls for manual navigation and works beautifully in Dialog modals for focused content presentation.

React True Focus Effect

Animated focus targeting system

Installation

Usage

Why simple highlighting isn't effective

Features

API Reference

TrueFocus

Interaction Modes

Visual Customization

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React True Focus Effect

Reacttrue-focus

How do I customize the targeting bracket appearance?

How can I optimize blur performance?

Does this work with multi-line text?

Can I customize the focus sequence?

Are there accessibility concerns with blur effects?

How do I integrate this with dynamic content?

Can I use different shapes instead of corner brackets?

On this page