Components
True Focus
Text focus effect with animated borders and blur transitions.
True Focus
The TrueFocus component creates a text focus effect with animated borders and blur transitions. It highlights individual words with customizable borders, glow effects, and animation timing.
Usage
True Focus
TrueFocus
<template>
<div class="p-6 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">True Focus</h3>
<MTrueFocus
sentence="True Focus"
:manual-mode="false"
:blur-amount="5"
border-color="red"
:animation-duration="2"
:pause-between-animations="1"
/>
</div>
</template>
Props
sentence
string
The sentence to display with focus effects.
manualMode
boolean
Whether to control focus manually or automatically.
blurAmount
number
Amount of blur to apply to unfocused words.
borderColor
string
Color of the focus border.
glowColor
string
Color of the glow effect.
animationDuration
number
Duration of the focus animation in seconds.
pauseBetweenAnimations
number
Pause between automatic animations in seconds.
Examples
Basic True Focus
True Focus
Highlight specific words in a sentence with dynamic focus effects for emphasis
Createstunninginterfaceswithouranimatedcomponents
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Basic True Focus</h3>
<MTrueFocus
sentence="Focus Text"
:manual-mode="true"
:blur-amount="3"
/>
</div>
</template>
Custom True Focus
Custom True Focus
CustomFocusEffect
<template>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Custom True Focus</h3>
<MTrueFocus
sentence="Custom Focus Effect"
:manual-mode="false"
:blur-amount="8"
border-color="blue"
glow-color="rgba(0, 0, 255, 0.6)"
:animation-duration="1.5"
:pause-between-animations="2"
/>
</div>
</template>