BlurText
blur-textReveals text through staged blur, opacity, and position transitions.
Usage
Basic usage
Word by word analysis from fuzzy + displacement to clear in two steps, advancing in waves.
<BlurText text="Isn't this so cool?!" className="text-3xl font-bold text-foreground" />Verbatim · Chinese · Float in from the bottom
splitType="char" is parsed word by word, direction="bottom" floats in from below.
<BlurText
text="Clearly emerging Hulian title"
splitType="char"
direction="bottom"
className="text-3xl font-bold text-primary"
/>Starting blur and peak shifting
blur adjusts the starting blur pixel, and delay adjusts the adjacent segment peak shift milliseconds to create a stronger hero level of resolution.
<BlurText
text="Enterprise-grade components · High quality · Native adaptation"
splitType="char"
delay={90}
blur={12}
className="text-2xl font-semibold text-muted"
/>When to use
Use BlurText when a heading or sentence should resolve from blur and displacement as it enters the viewport. The effect feels more like a camera pulling focus than a simple offset fade. Use SplitText for a staggered reveal without blur, ScrollReveal for word-by-word progress tied to scrolling, or Heading for a static heading.
Import
import { BlurText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text * | string | — | Text to reveal one segment at a time. |
| splitType | "char" | "word" | "word" | Segmentation granularity: words split on whitespace, or individual characters. |
| direction | "top" | "bottom" | "top" | Entry direction, applied as a vertical offset with a slight midpoint overshoot. |
| delay | number | 120 | Delay between adjacent segments in milliseconds; larger values slow the stagger. |
| blur | number | 8 | Initial blur radius in pixels; the animation resolves it to zero. |
| stepDuration | number | 0.5 | Total duration of one segment's two-stage reveal in seconds. |
| threshold | number | 0.3 | Visible viewport proportion that triggers the animation (useInView amount), from 0 to 1. |
All other native <p> attributes are supported. The onDrag/onDragStart/onDragEnd/onAnimationStart handlers are omitted because their signatures conflict with Motion.
Events
| Event | Type | Description |
|---|---|---|
| onAnimationComplete | () => void | Called once after the entire sentence finishes animating. |
Usage guidelines
textaccepts a plain string, not JSX.- With languages that do not separate words with spaces,
splitType="word"may reveal the whole sentence at once. PasssplitType="char"for a character-by-character effect. - The reveal runs only once when the visible ratio reaches
threshold. Changekeyto force a remount if it must run again. - When
prefers-reduced-motionis enabled, the component renders directly in its final clear state.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<BlurText text="Fuzzy parsed title text" splitType="word" direction="top" blur={8} delay={120} />