True Focus

Text 67

About

A text animation component that creates a "focus effect" by highlighting words sequentially or on hover. Features animated corners, blur transitions, and customizable styles.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds True Focus to your project and fits it to your theme.

Code

How True Focus is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { TrueFocus } from "@/components/ui/true-focus";

const TrueFocusComponent: React.FC = () => {
  return (
    <TrueFocus 
      sentence="True Focus"
      manualMode={false}
      blurAmount={5}
      borderColor="red"
      animationDuration={2}
      pauseBetweenAnimations={1}
    />
  );
};

export { TrueFocusComponent };