SplitText
split-textSplits text into animatable characters or words for staggered reveal effects.
Usage
Basic usage
Fade in from the bottom word by word, Chinese friendly (divided according to code points).
<SplitText text="Make development faster, more stable and more beautiful" className="text-3xl font-bold text-foreground" />Word-by-word segmentation
splitType="word" Enter word by word according to the blank space, suitable for English slogans.
<SplitText
text="Build faster with Hulian"
splitType="word"
from="left"
className="text-3xl font-bold text-primary"
/>Approach direction
from controls the entry direction of each segment of displacement: top / bottom / left / right.
<SplitText
text="Title falling from top to bottom"
from="top"
className="text-3xl font-bold text-foreground"
/>Staggered rhythm and duration
delay adjusts the peak stagger milliseconds of adjacent segments, duration adjusts the duration of a single segment, and makes a slower and more relaxed hero entry.
<SplitText
text="Slow-tempo stretch entrance"
delay={90}
duration={0.8}
className="text-3xl font-bold text-primary"
/>When to use
Use SplitText when a title or hero line should enter once with a staggered character- or word-level offset and fade. Use BlurText for a blur-to-clear entrance, ScrollReveal for continuous word progress tied to scrolling, or Heading for static headings.
Import
import { SplitText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text * | string | — | Text to animate. |
| splitType | "char" | "word" | "char" | Splits into characters or whitespace-delimited words. |
| from | "bottom" | "top" | "left" | "right" | "bottom" | Direction from which each segment enters. |
| delay | number | 40 | Delay between adjacent segments in milliseconds. Larger values create a slower wave. |
| duration | number | 0.5 | Single segment animation duration (seconds) |
The remaining <span> native attributes (className, etc.) are transparently transmitted; onDrag/onDragStart/onDragEnd/onAnimationStart is eliminated due to conflict with the motion signature.
Example
<SplitText text="Build faster, safer, and more beautifully" className="text-3xl font-bold text-foreground" />
<SplitText
text="Build faster with HulianUI"
splitType="word"
from="left"
className="text-3xl font-bold text-primary"
/>Usage guidelines
useInViewtriggers only once, so the entrance does not replay. Changekeyto force a remount when a replay is required in a demo.textaccepts a plain string rather thanchildren; JSX cannot be embedded.- Under
prefers-reduced-motion, every segment renders directly in its final state.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<SplitText text="Title of peak staggered entry step by step" splitType="char" from="bottom" delay={40} />