4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1125,"use client" import * as React from "react" import { cn } from "@/lib/utils" export type SplitBy = "character" | "word" | "line" export type SplitAnimation = "rise" | "fade" | "blur" | "scale" export type SplitTextProps = Omit< React.HTMLAttributes, "children" > & { children: string by?: SplitBy animation?: SplitAnimation /** Milliseconds between one piece and the next. */ stagger?: number delay?: number duration?: number /** Whether it plays on arrival or as soon as it is on screen. */ trigger?: "mount" | "view" as?: "span" | "h1" | "h2" | "h3" | "p" } const RESTING: Record = { rise: "translate-y-[0.6em] opacity-0", fade: "opacity-0", blur: "opacity-0 blur-[6px]", scale: "scale-75 opacity-0", } function pieces(text: string, by: SplitBy) { if (by === "line") return text.split("\n") if (by === "word") return text.split(/(\s+)/) return Array.from(text) } type Piece = { part: string; index: number } /** * A line may only break between words. Every piece is its own inline-block, * which the browser is otherwise free to break between, so splitting by * character would let it cut "deserve" into "des" and "erve". */ function runs(parts: string[]): Piece[][] { const out: Piece[][] = [] let word: Piece[] = [] parts.forEach((part, index) => { if (part.trim() === "") { if (word.length) out.push(word) out.push([{ part, index }]) word = [] return } word.push({ part, index }) }) if (word.length) out.push(word) return out } /** * Animates a string one character, word, or line at a time. The whole string * is carried on the element as its label, so it is announced once as ordinary * text rather than as a pile of single letters. */ export function SplitText({ children, by = "character", animation = "rise", stagger = 28, delay = 0, duration = 620, trigger = "view", as: Component = "span", className, ...rootProps }: SplitTextProps) { const ref = React.useRef(null) const [shown, setShown] = React.useState(false) React.useEffect(() => { if (trigger !== "mount") return // A frame first, so the resting state is painted and the transition has // somewhere to travel from. Flipping it in the same tick as the first // render leaves the characters already arrived, and nothing animates. const frame = requestAnimationFrame(() => setShown(true)) return () => cancelAnimationFrame(frame) }, [trigger]) React.useEffect(() => { if (trigger === "mount") return const element = ref.current if (!element) return const observer = new IntersectionObserver( ([entry]) => { if (entry?.isIntersecting) { setShown(true) observer.disconnect() } }, { threshold: 0.2 } ) observer.observe(element) return () => observer.disconnect() }, [trigger]) const parts = React.useMemo(() => pieces(children, by), [children, by]) return ( } data-slot="split-text" aria-label={children} className={cn("inline-block", className)} {...rootProps} > {runs(parts).map((word, at) => ( ))} ) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/split-text/split-text.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]