Installation
Examples
Manual Hover Mode
Hover over each word to reveal it — ideal for interactive call-to-action sections or feature highlights.
Usage
import TrueFocus from "@/components/motionx/true-focus";Auto-cycling
<TrueFocus
sentence="Design Develop Deploy"
blurAmount={5}
borderColor="green"
animationDuration={0.5}
pauseBetweenAnimations={1}
/>Manual hover mode
<TrueFocus
sentence="Hover To Reveal Words"
manualMode={true}
blurAmount={4}
borderColor="#f97316"
glowColor="rgba(249, 115, 22, 0.6)"
animationDuration={0.3}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sentence | string | "True Focus" | Space-separated text (each word is a target) |
manualMode | boolean | false | Hover-to-reveal instead of auto-cycling |
blurAmount | number | 5 | Blur intensity for inactive words (px) |
borderColor | string | "green" | Corner bracket border color |
glowColor | string | "rgba(0, 255, 0, 0.6)" | Glow color for the focus indicator |
animationDuration | number | 0.5 | Focus transition duration in seconds |
pauseBetweenAnimations | number | 1 | Pause between auto-cycle steps (seconds) |