Split Text⁽⁰⁰³⁾

Splits text into words or characters with spring-loaded entrance animations.

Scroll

Requires:gsap@gsap/react

A new era of motion design

Installation

$npx kibo add split-text

Usage

1import { SplitText } from "@/components/kibo/split-text/component";
2 
3export default function MyComponent() {
4  return (
5    <SplitText
6      text="A new era of motion design"
7      className="text-4xl font-semibold text-white"
8      delay={30}
9      splitType="chars"
10    />
11  );
12}

Props Reference

Prop	Type	Default	Description
`text`	`string`	-	The text content to split and animate.
`className`	`string`	""	Additional CSS classes.
`delay`	`number`	50	Delay in milliseconds between each animated element.
`duration`	`number`	1.25	Duration of the animation in seconds.
`ease`	`string \| ((t: number) => number)`	"power3.out"	GSAP easing function or string.
`splitType`	`"chars" \| "words" \| "lines" \| "words, chars"`	"chars"	How the text should be split.
`from`	`gsap.TweenVars`	{ opacity: 0, y: 40 }	Starting GSAP animation properties.
`to`	`gsap.TweenVars`	{ opacity: 1, y: 0 }	Target GSAP animation properties.
`threshold`	`number`	0.1	Intersection Observer threshold (0-1).
`rootMargin`	`string`	"-100px"	Intersection Observer root margin.
`tag`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p" \| "span"`	"p"	The HTML tag to render.
`textAlign`	`React.CSSProperties["textAlign"]`	"center"	Text alignment.
`onLetterAnimationComplete`	`() => void`	-	Callback fired when the entire animation completes.