50: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"] 51: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"] 52:T583,"use client"; import type { ReactNode } from "react"; import { LoaderGlitchText } from "./loader-glitch-text"; // Cortexcn item "loader-glitch-text-01", revision d36f60404a2f, MIT license. // https://ui.cortexcn.dev/r/v/loader-glitch-text-01/d36f60404a2f.json const EXAMPLES: { label: string; loader: ReactNode }[] = [ { label: "Medium (default)", loader: }, { label: "Subtle", loader: , }, { label: "Heavy", loader: , }, { label: "As a heading", loader: ( ), }, ]; /** The glitch text loader four ways: its default, softer, harder, and large. */ export function LoaderGlitchTextDemo() { return (

{EXAMPLES.map((example) => (

{example.loader}

{example.label}

))}

); } 53:T178e,"use client"; import type { CSSProperties } from "react"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; // Cortexcn item "loader-glitch-text-01", revision d36f60404a2f, MIT license. // https://ui.cortexcn.dev/r/v/loader-glitch-text-01/d36f60404a2f.json const GLITCH_CHARS = "!@#$%^&*<>{}[]|/~"; interface LoaderGlitchTextProps { text?: string; intensity?: "subtle" | "medium" | "heavy"; className?: string; } export type { LoaderGlitchTextProps }; const INTENSITY = { subtle: { translateScale: 1, duration: "4s", interval: 300, scrambleChars: 1, }, medium: { translateScale: 1, duration: "2s", interval: 150, scrambleChars: 2, }, heavy: { translateScale: 1.5, duration: "1s", interval: 80, scrambleChars: 3, }, } as const; export function LoaderGlitchText({ text = "LOADING", intensity = "medium", className, }: LoaderGlitchTextProps) { const [displayText, setDisplayText] = useState(text); const textRef = useRef(text); const rafRef = useRef(0); const lastScrambleRef = useRef(0); const scrambleTimeoutRef = useRef>(undefined); textRef.current = text; const intensityConfig = INTENSITY[intensity]; const scrambleText = useCallback(() => { const chars = textRef.current.split(""); const indices = new Set(); while ( indices.size < Math.min(intensityConfig.scrambleChars, chars.length) ) { indices.add(Math.floor(Math.random() * chars.length)); } const scrambled = chars.map((char, i) => indices.has(i) && char !== " " ? GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)] : char, ); setDisplayText(scrambled.join("")); scrambleTimeoutRef.current = setTimeout( () => { setDisplayText(textRef.current); }, 50 + Math.random() * 50, ); }, [intensityConfig.scrambleChars]); useEffect(() => { setDisplayText(text); }, [text]); useEffect(() => { let running = true; const animate = (timestamp: number) => { if (!running) { return; } if (timestamp - lastScrambleRef.current >= intensityConfig.interval) { lastScrambleRef.current = timestamp; scrambleText(); } rafRef.current = requestAnimationFrame(animate); }; rafRef.current = requestAnimationFrame(animate); return () => { running = false; if (rafRef.current) { cancelAnimationFrame(rafRef.current); } if (scrambleTimeoutRef.current) { clearTimeout(scrambleTimeoutRef.current); } }; }, [intensityConfig.interval, scrambleText]); return ( <> {text} ); } 4f:["$","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,["$","$L50",null,{"namespace":"@cortexcn","registryDependencies":["https://ui.cortexcn.dev/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/blocks/loader-glitch-text-01/components/loader-glitch-text-demo.tsx","content":"$52","type":"registry:component","target":"components/loader-glitch-text-demo.tsx"},{"path":"registry/blocks/loader-glitch-text-01/components/loader-glitch-text.tsx","content":"$53","type":"registry:component","target":"components/loader-glitch-text.tsx"}],"className":"h-[70svh] min-h-80"}]]}]