"use client"; import { Fragment, useMemo, type AnimationEvent, type ComponentProps, type CSSProperties, type Ref, } from "react"; import { useEntrance, type EntranceTrigger } from "@/registry/default/hooks/use-entrance"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } /** Splits into user-perceived characters, so emoji and accents stay whole. */ function graphemes(text: string) { if (typeof Intl !== "undefined" && "Segmenter" in Intl) { const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" }); return Array.from(segmenter.segment(text), ({ segment }) => segment); } return Array.from(text); } type BlurTextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div"; interface BlurTextProps extends Omit, "children" | "onAnimationEnd"> { /** Plain text; every character comes in on its own. */ children: string; as?: BlurTextTag; /** "load" plays on first paint with CSS alone; "in-view" when the text scrolls into view. */ trigger?: EntranceTrigger; /** In-view: play the first time only. */ once?: boolean; /** Takes over from `trigger`: `false` holds the text hidden, `true` plays it. */ play?: boolean; /** `false` blurs the text back out, last character first. */ show?: boolean; /** Wait before the first character, in ms. */ delay?: number; /** Time between characters, in ms. */ stagger?: number; /** How long each character takes, in ms. */ duration?: number; /** Called when the last character has come in, or gone out. */ onAnimationComplete?: () => void; } /** * Text that comes into focus one character at a time: each one rises a * little out of a blur. Screen readers get the sentence in one piece, and * with `prefers-reduced-motion` it is shown as is. Words never break * between characters. * * @example * Land ho. */ function BlurText({ children, as: Tag = "p", trigger = "load", once = true, play, show = true, delay = 0, stagger = 20, duration = 600, onAnimationComplete, className, ref, ...props }: BlurTextProps) { const [observe, phase] = useEntrance({ trigger, once, play }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); const words = useMemo(() => { let next = 0; return children .trim() .split(/\s+/) .filter(Boolean) .map((word) => graphemes(word).map((character) => ({ character, index: next++ }))); }, [children]); const count = words.reduce((sum, word) => sum + word.length, 0); const piece = ({ character, index }: { character: string; index: number }) => { // Out goes in reverse, so the text folds away from where it ended. const order = show ? index : count - 1 - index; const style: CSSProperties = phase === "static" && show ? {} : { animationDelay: `${(show ? delay : 0) + order * stagger}ms`, animationDuration: `${show ? duration : duration * 0.7}ms`, animationPlayState: phase === "armed" && show ? "paused" : undefined, }; return ( {character} ); }; const handleAnimationEnd = (event: AnimationEvent) => { const target = event.target as HTMLElement; if (target.dataset.last !== undefined) onAnimationComplete?.(); }; return ( } data-slot="blur-text" data-state={show ? phase : "hidden"} aria-hidden={show ? undefined : true} className={className} onAnimationEnd={handleAnimationEnd} {...props} > {children} ); } export { BlurText, type BlurTextProps };