4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T16bf,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const GLITCH_CHARS = "!@#$%^&*<>{}[]|/\\~"; type LoaderGlitchTextProps = { text?: string; intensity?: "subtle" | "medium" | "heavy"; className?: string; }; export type { LoaderGlitchTextProps }; 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 = { 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, }, }[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} ); } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.tryelements.dev/r/loader-glitch-text.json","proxyUrl":"https://shadcnregistry.com/r/elements/loader-glitch-text","itemId":"@elements/loader-glitch-text"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/default/blocks/loaders/loader-glitch-text/components/elements/loader-glitch-text.tsx","content":"$51","type":"registry:component"}]}]]}],"$L52"]}]

Glitch Text Loader

Installation

Files

components

Styles