{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rgb-glitch-text",
  "title": "RGB Glitch Text",
  "description": "Three RGB-offset text copies jitter for a brief glitch window.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/rgb-glitch-text/index.tsx",
      "content": "\"use client\";\n\nimport { random, useCurrentFrame } from \"remotion\";\n\nexport interface RGBGlitchTextProps {\n  text: string;\n  fontSize?: number;\n  color?: string;\n  fontWeight?: number;\n  glitchAt?: number;\n  glitchDuration?: number;\n  intensity?: number;\n  seed?: string;\n  speed?: number;\n  className?: string;\n}\n\nexport function RGBGlitchText({\n  text,\n  fontSize = 96,\n  color = \"#171717\",\n  fontWeight = 700,\n  glitchAt = 20,\n  glitchDuration = 8,\n  intensity = 6,\n  seed = \"glitch\",\n  speed = 1,\n  className,\n}: RGBGlitchTextProps) {\n  const frame = useCurrentFrame() * speed;\n\n  const isGlitching = frame >= glitchAt && frame < glitchAt + glitchDuration;\n\n  const offset = (axisSeed: string, scale: number) =>\n    (random(`${seed}-${axisSeed}-${frame}`) * 2 - 1) * scale;\n\n  const rX = isGlitching ? offset(\"r-x\", intensity) : 0;\n  const rY = isGlitching ? offset(\"r-y\", intensity * 0.4) : 0;\n  const gX = isGlitching ? offset(\"g-x\", intensity) : 0;\n  const gY = isGlitching ? offset(\"g-y\", intensity * 0.4) : 0;\n  const bX = isGlitching ? offset(\"b-x\", intensity) : 0;\n  const bY = isGlitching ? offset(\"b-y\", intensity * 0.4) : 0;\n\n  const copyOpacity = isGlitching ? 1 : 0;\n\n  const baseStyle: React.CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    fontSize,\n    fontWeight,\n    letterSpacing: \"-0.03em\",\n    fontFamily:\n      \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n    whiteSpace: \"pre\",\n    mixBlendMode: \"multiply\",\n  };\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"#fafafa\",\n      }}\n    >\n      <div\n        className={className}\n        style={{ position: \"relative\", display: \"inline-block\" }}\n      >\n        <span\n          style={{\n            position: \"relative\",\n            fontSize,\n            fontWeight,\n            color,\n            letterSpacing: \"-0.03em\",\n            fontFamily:\n              \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n            whiteSpace: \"pre\",\n          }}\n        >\n          {text}\n        </span>\n        <span\n          style={{\n            ...baseStyle,\n            color: \"#ff0040\",\n            opacity: copyOpacity,\n            transform: `translateX(${rX}px) translateY(${rY}px)`,\n          }}\n        >\n          {text}\n        </span>\n        <span\n          style={{\n            ...baseStyle,\n            color: \"#00ff80\",\n            opacity: copyOpacity,\n            transform: `translateX(${gX}px) translateY(${gY}px)`,\n          }}\n        >\n          {text}\n        </span>\n        <span\n          style={{\n            ...baseStyle,\n            color: \"#0080ff\",\n            opacity: copyOpacity,\n            transform: `translateX(${bX}px) translateY(${bY}px)`,\n          }}\n        >\n          {text}\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/rgb-glitch-text.tsx"
    }
  ],
  "type": "registry:component"
}