Split text
Splits a sentence into characters or words and brings them in with staggered rise, blur, flip, pop, skew, wave, or fade entrances.
Words land as a sentence.
And a blur lifts into focus.
The entrances run when they scroll into view, each with its own effect and stagger order.
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 useState,9 type CSSProperties,10} from "react";11 12import { useReducedMotion } from "@/lib/media";13 14export type SplitTextEffect =15 "rise" | "fade" | "blur" | "flip" | "pop" | "skew" | "wave";16export type SplitTextSplitType = "chars" | "words" | "lines" | "words, chars";17export type SplitTextStaggerFrom =18 "start" | "center" | "end" | "edges" | "random";19export type SplitTextTrigger = "view" | "load" | "hover" | "click";20export type SplitTextHoverEffect = "none" | "lift" | "wave";21export type SplitTextTag =22 "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span";23export type SplitTextEase = string | ((t: number) => number);24 25export interface SplitTextProps {26 text: string;27 className?: string;28 delay?: number;