{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "loader-glitch-text", "title": "Glitch Text Loader", "description": "Text with RGB channel splitting, clip-path distortion, and character scrambling", "dependencies": [], "registryDependencies": [], "files": [ { "path": "registry/default/blocks/loaders/loader-glitch-text/components/elements/loader-glitch-text.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst GLITCH_CHARS = \"!@#$%^&*<>{}[]|/\\\\~\";\n\ntype LoaderGlitchTextProps = {\n text?: string;\n intensity?: \"subtle\" | \"medium\" | \"heavy\";\n className?: string;\n};\n\nexport type { LoaderGlitchTextProps };\n\nexport function LoaderGlitchText({\n text = \"LOADING\",\n intensity = \"medium\",\n className,\n}: LoaderGlitchTextProps) {\n const [displayText, setDisplayText] = useState(text);\n const textRef = useRef(text);\n const rafRef = useRef(0);\n const lastScrambleRef = useRef(0);\n const scrambleTimeoutRef = useRef>(undefined);\n\n textRef.current = text;\n\n const intensityConfig = {\n subtle: {\n translateScale: 1,\n duration: \"4s\",\n interval: 300,\n scrambleChars: 1,\n },\n medium: {\n translateScale: 1,\n duration: \"2s\",\n interval: 150,\n scrambleChars: 2,\n },\n heavy: {\n translateScale: 1.5,\n duration: \"1s\",\n interval: 80,\n scrambleChars: 3,\n },\n }[intensity];\n\n const scrambleText = useCallback(() => {\n const chars = textRef.current.split(\"\");\n const indices = new Set();\n\n while (\n indices.size < Math.min(intensityConfig.scrambleChars, chars.length)\n ) {\n indices.add(Math.floor(Math.random() * chars.length));\n }\n\n const scrambled = chars.map((char, i) =>\n indices.has(i) && char !== \" \"\n ? GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]\n : char,\n );\n\n setDisplayText(scrambled.join(\"\"));\n\n scrambleTimeoutRef.current = setTimeout(\n () => {\n setDisplayText(textRef.current);\n },\n 50 + Math.random() * 50,\n );\n }, [intensityConfig.scrambleChars]);\n\n useEffect(() => {\n setDisplayText(text);\n }, [text]);\n\n useEffect(() => {\n let running = true;\n\n const animate = (timestamp: number) => {\n if (!running) return;\n\n if (timestamp - lastScrambleRef.current >= intensityConfig.interval) {\n lastScrambleRef.current = timestamp;\n scrambleText();\n }\n\n rafRef.current = requestAnimationFrame(animate);\n };\n\n rafRef.current = requestAnimationFrame(animate);\n\n return () => {\n running = false;\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n }\n if (scrambleTimeoutRef.current) {\n clearTimeout(scrambleTimeoutRef.current);\n }\n };\n }, [intensityConfig.interval, scrambleText]);\n\n return (\n <>\n \n \n {text}\n \n {displayText}\n \n \n {displayText}\n \n \n {displayText}\n \n \n \n \n );\n}\n", "type": "registry:component" } ], "docs": "Cyberpunk-style glitch text loader with channel split, scan-line overlay, and random character scramble. Intensity levels: subtle, medium, heavy.", "categories": [ "loaders" ], "type": "registry:block" }