52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1670,"use client"; import { useEffect, useRef, useState, type CSSProperties } from "react"; import { cn } from "@/lib/utils"; const CHARSET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.-:/!?&"; const css = ` @keyframes split-flap-top{from{transform:rotateX(0);filter:brightness(1)}to{transform:rotateX(-90deg);filter:brightness(.55)}} @keyframes split-flap-bottom{from{transform:rotateX(90deg);filter:brightness(.55)}to{transform:rotateX(0);filter:brightness(1)}} @media (prefers-reduced-motion: reduce){[data-flap]{animation:none!important}}`; const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; export interface SplitFlapTextProps { /** Words to cycle through. Shorter words are padded to the longest. */ words: string[]; /** Ms each word stays after it lands. */ interval?: number; /** Ms for one flap to fall. */ flipDuration?: number; /** Ms between neighbouring tiles starting. */ stagger?: number; align?: "left" | "center"; tileColor?: string; textColor?: string; className?: string; } function Half({ char, side, animation }: { char: string; side: "top" | "bottom"; animation?: string }) { const top = side === "top"; return ( {char} ); } function Tile({ target, delay, flipDuration }: { target: string; delay: number; flipDuration: number }) { const [goal, setGoal] = useState(" "); const [cur, setCur] = useState(" "); const [next, setNext] = useState(" "); useEffect(() => { const t = window.setTimeout(() => setGoal(target), delay); return () => window.clearTimeout(t); }, [target, delay]); useEffect(() => { // A flap is falling: land it, then pick the next character on the drum. if (cur !== next) { const t = window.setTimeout(() => setCur(next), reduced() ? 0 : flipDuration); return () => window.clearTimeout(t); } if (cur === goal) return; const t = window.setTimeout(() => { const i = CHARSET.indexOf(cur); setNext(reduced() || i < 0 || !CHARSET.includes(goal) ? goal : CHARSET[(i + 1) % CHARSET.length]); }, 0); return () => window.clearTimeout(t); }, [cur, next, goal, flipDuration]); const half = flipDuration / 2; return ( {cur !== next && ( )} ); } export function SplitFlapText({ words, interval = 4200, flipDuration = 55, stagger = 40, align = "center", tileColor = "#1b1b1f", textColor = "#f5f5f0", className, }: SplitFlapTextProps) { const ref = useRef(null); const [index, setIndex] = useState(-1); const list = words.map((w) => w.toUpperCase()); const len = Math.max(1, ...list.map((w) => w.length)); useEffect(() => { const el = ref.current; if (!el) return; let timer = 0; const io = new IntersectionObserver(([entry]) => { window.clearInterval(timer); if (!entry.isIntersecting) return; setIndex((i) => (i < 0 ? 0 : i)); timer = window.setInterval(() => setIndex((i) => (i + 1) % Math.max(1, words.length)), interval); }); io.observe(el); return () => { io.disconnect(); window.clearInterval(timer); }; }, [interval, words.length]); const word = index < 0 ? "" : (list[index % list.length] ?? ""); const gap = len - word.length; const padded = (align === "center" ? " ".repeat(Math.floor(gap / 2)) + word : word).padEnd(len, " "); return ( {word} {Array.from(padded).map((c, i) => ( ))} ); } 51:["$","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,["$","$L52",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/split-flap-text.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]