True Focus⁽⁰³⁰⁾

Camera viewfinder crosshair brackets locking onto active words with spring transitions.

HoverScroll

Requires:motion

TrueFocusLocksOnWords

Loading…

Installation

$npx kibo add true-focus

1import { TrueFocus } from "@/components/kibo/true-focus/component";
2 
3export default function Example() {
4  return (
5    <TrueFocus />
6  );
7}

Prop	Type	Default	Description
`sentence`	`string`	'True Focus'	Controls the sentence for the component animation.
`separator`	`string`	' '	Controls the separator for the component animation.
`manualMode`	`boolean`	false	Controls the manual mode for the component animation.
`blurAmount`	`number`	5	Controls the blur amount for the component animation.
`borderColor`	`string`	'green'	Controls the border color for the component animation.
`glowColor`	`string`	'rgba(0, 255, 0, 0.6)'	Controls the glow color for the component animation.
`animationDuration`	`number`	0.5	Controls the animation duration for the component animation.
`pauseBetweenAnimations`	`number`	1	Controls the pause between animations for the component animation.
`fontSize`	`string`	'text-2xl sm:text-3xl md:text-4xl font-black text-white'	Font size in pixels, rems, or fluid clamp notation.