{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "loader-glitch-text-01", "title": "Loader Glitch Text", "description": "Loading text that scrambles and splits into color channels, at three intensities and as a heading", "dependencies": [], "registryDependencies": [ "https://ui.cortexcn.dev/r/utils.json" ], "files": [ { "path": "registry/blocks/loader-glitch-text-01/components/loader-glitch-text-demo.tsx", "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { LoaderGlitchText } from \"./loader-glitch-text\";\n\n// Cortexcn item \"loader-glitch-text-01\", revision d36f60404a2f, MIT license.\n// https://ui.cortexcn.dev/r/v/loader-glitch-text-01/d36f60404a2f.json\n\nconst EXAMPLES: { label: string; loader: ReactNode }[] = [\n { label: \"Medium (default)\", loader: },\n {\n label: \"Subtle\",\n loader: ,\n },\n {\n label: \"Heavy\",\n loader: ,\n },\n {\n label: \"As a heading\",\n loader: (\n \n ),\n },\n];\n\n/** The glitch text loader four ways: its default, softer, harder, and large. */\nexport function LoaderGlitchTextDemo() {\n return (\n
\n {EXAMPLES.map((example) => (\n \n
{example.loader}
\n
\n {example.label}\n
\n \n ))}\n
\n );\n}\n", "type": "registry:component", "target": "components/loader-glitch-text-demo.tsx" }, { "path": "registry/blocks/loader-glitch-text-01/components/loader-glitch-text.tsx", "content": "\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Cortexcn item \"loader-glitch-text-01\", revision d36f60404a2f, MIT license.\n// https://ui.cortexcn.dev/r/v/loader-glitch-text-01/d36f60404a2f.json\n\nconst GLITCH_CHARS = \"!@#$%^&*<>{}[]|/~\";\n\ninterface LoaderGlitchTextProps {\n text?: string;\n intensity?: \"subtle\" | \"medium\" | \"heavy\";\n className?: string;\n}\n\nexport type { LoaderGlitchTextProps };\n\nconst INTENSITY = {\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} as const;\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 = INTENSITY[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) {\n return;\n }\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", "target": "components/loader-glitch-text.tsx" } ], "type": "registry:block", "author": "Cortexcn (https://ui.cortexcn.dev)", "meta": { "license": "MIT", "revision": "d36f60404a2f" } }