Blur Text⁽⁰⁰¹⁾

Text starts blurred then crisply resolves for a soft-focus reveal effect.

HoverClick

Requires:motion

Experience motion like never before.

Loading…

Installation

$npx kibo add blur-text

Usage

1import { BlurText } from "@/components/kibo/blur-text/component";
2 
3export default function MyComponent() {
4  return (
5    <BlurText
6      text="Experience motion like never before."
7      className="text-4xl font-semibold text-white"
8      delay={150}
9    />
10  );
11}

Props Reference

Prop	Type	Default	Description
`text`	`string`	""	The text content to display and animate.
`delay`	`number`	200	Delay in milliseconds between each animated segment.
`className`	`string`	""	Additional CSS classes to apply to the container.
`animateBy`	`"words" \| "letters"`	"words"	Whether to animate word by word or letter by letter.
`direction`	`"top" \| "bottom"`	"top"	The direction the text should animate from.
`threshold`	`number`	0.1	Intersection Observer threshold (0-1).
`rootMargin`	`string`	"0px"	Intersection Observer root margin.
`animationFrom`	`Record<string, string \| number>`	-	Custom starting animation keyframe.
`animationTo`	`Array<Record<string, string \| number>>`	-	Custom target animation keyframes.
`easing`	`Easing \| Easing[]`	(t: number) => t	Animation easing function or array of functions.
`onAnimationComplete`	`() => void`	-	Callback fired when the entire animation completes.
`stepDuration`	`number`	0.35	Duration in seconds for each keyframe step.