Skip to main content
Create dynamic focus effects on words with blur and animated border frame.

​
Usage

<Focus
  sentence="Inspira Focus Effect"
  :manualMode="false"
  :blurAmount="5"
  borderColor="green"
  :animationDuration="0.5"
  :pauseBetweenAnimations="1"
/>

​
Props

​
sentence
string
default:"Inspira Focus"
Text sentence to display and animate word-by-word.
​
manualMode
boolean
default:"false"
If true, focus highlights on hover; otherwise auto-cycles.
​
blurAmount
number
default:"5"
Blur radius in pixels for inactive words.
​
borderColor
string
default:"green"
Color of the animated focus frame border.
​
animationDuration
number
default:"0.5"
Duration in seconds for the focus frame animation transitions.
​
pauseBetweenAnimations
number
default:"1"
Pause duration in seconds between auto-focus transitions.

​
Credits

Inspired from Focus Text Hover Effect on CodePen.

Build docs developers (and LLMs) love

Get started for freeTalk to us