{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-code-block",
  "title": "Glass Code Block",
  "description": "A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/bases/editframe/components/glass-code-block/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { CSSProperties } from \"react\";\n\nconst FONT_MONO =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace\";\n\nconst DEFAULT_CODE = `import { motion } from \"remotion\";\n\n// Generate a hero scene\nexport function Hero() {\n  const frame = useCurrentFrame();\n  const opacity = frame / 30;\n  return <h1 style={{ opacity }}>Hello</h1>;\n}`;\n\nconst KEYWORDS = new Set([\n  \"import\",\n  \"from\",\n  \"export\",\n  \"function\",\n  \"const\",\n  \"let\",\n  \"var\",\n  \"return\",\n  \"if\",\n  \"else\",\n  \"for\",\n  \"while\",\n  \"new\",\n  \"class\",\n  \"extends\",\n  \"default\",\n  \"true\",\n  \"false\",\n  \"null\",\n  \"undefined\",\n]);\n\ninterface Token {\n  text: string;\n  kind: \"code\" | \"comment\" | \"string\" | \"keyword\" | \"number\";\n}\n\nconst tokenizeLine = (line: string): Token[] => {\n  const trimmed = line.trimStart();\n  if (trimmed.startsWith(\"//\")) {\n    return [{ kind: \"comment\", text: line }];\n  }\n\n  const tokens: Token[] = [];\n  const re = /(\"[^\"]*\"|'[^']*'|`[^`]*`|\\b\\d+\\b|\\b[A-Za-z_$][\\w$]*\\b|[^\\w\"']+)/g;\n  let match: RegExpExecArray | null;\n  while ((match = re.exec(line)) !== null) {\n    const [t] = match;\n    const [first] = t;\n    if (first === '\"' || first === \"'\" || first === \"`\") {\n      tokens.push({ kind: \"string\", text: t });\n    } else if (/^\\d+$/.test(t)) {\n      tokens.push({ kind: \"number\", text: t });\n    } else if (/^[A-Za-z_$][\\w$]*$/.test(t) && KEYWORDS.has(t)) {\n      tokens.push({ kind: \"keyword\", text: t });\n    } else {\n      tokens.push({ kind: \"code\", text: t });\n    }\n  }\n  return tokens;\n};\n\nconst TOKEN_COLORS: Record<Token[\"kind\"], string> = {\n  code: \"#e4e4e7\",\n  comment: \"#52525b\",\n  keyword: \"#c4b5fd\",\n  number: \"#fcd34d\",\n  string: \"#86efac\",\n};\n\nexport interface GlassCodeBlockProps {\n  code?: string;\n  title?: string;\n  width?: number;\n  height?: number;\n  fontSize?: number;\n  background?: string;\n  glassColor?: string;\n  staggerFrames?: number;\n  showTrafficLights?: boolean;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  className?: string;\n}\n\nconst Light = ({ color }: { color: string }) => (\n  <div\n    style={{\n      background: color,\n      borderRadius: \"50%\",\n      height: 12,\n      opacity: 0.6,\n      width: 12,\n    }}\n  />\n);\n\nconst CodeLine = ({\n  line,\n  index,\n  fontSize,\n  opacity,\n  ty,\n}: {\n  line: string;\n  index: number;\n  fontSize: number;\n  opacity: number;\n  ty: number;\n}) => {\n  const tokens = tokenizeLine(line);\n  if (tokens.length === 0) {\n    return <div style={{ height: fontSize * 0.8, opacity }} />;\n  }\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        gap: 0,\n        opacity,\n        transform: `translateY(${ty}px)`,\n        whiteSpace: \"pre\",\n      }}\n    >\n      <span style={{ color: \"#3f3f46\", userSelect: \"none\", width: 28 }}>\n        {String(index + 1).padStart(2, \" \")}\n      </span>\n      <span>\n        {tokens.map((t, i) => (\n          <span key={i} style={{ color: TOKEN_COLORS[t.kind] }}>\n            {t.text}\n          </span>\n        ))}\n      </span>\n    </div>\n  );\n};\n\nexport const GlassCodeBlock = ({\n  code = DEFAULT_CODE,\n  title = \"hero.tsx\",\n  width = 760,\n  height = 460,\n  fontSize = 16,\n  background = \"#0a0a0a\",\n  glassColor = \"rgba(10, 10, 10, 0.6)\",\n  staggerFrames = 4,\n  showTrafficLights = true,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 180,\n  className,\n}: GlassCodeBlockProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const staggerMs = ((staggerFrames / fps) * 1000) / safeSpeed;\n\n  const lines = code.split(\"\\n\");\n\n  const containerStyle: CSSProperties = {\n    alignItems: \"center\",\n    background,\n    display: \"flex\",\n    height: 720,\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: 1280,\n  };\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-glass-code-line {\n            from { opacity: 0; transform: translateY(4px); }\n            to { opacity: 1; transform: translateY(0); }\n          }\n          @keyframes framecn-glass-aura {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n          }\n        `}</style>\n        {/* Animated background aura */}\n        <div\n          style={{\n            animation: `framecn-glass-aura 10s ease-in-out infinite`,\n            background:\n              \"radial-gradient(circle at 30% 50%, rgba(56,189,248,0.22), transparent 50%), radial-gradient(circle at 70% 50%, rgba(168,85,247,0.18), transparent 55%)\",\n            inset: 0,\n            position: \"absolute\",\n          }}\n        />\n\n        <div\n          style={{\n            background:\n              \"linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 100%)\",\n            borderRadius: 16,\n            boxShadow: \"0 50px 120px rgba(0,0,0,0.55)\",\n            height,\n            padding: 1,\n            position: \"relative\",\n            width,\n          }}\n        >\n          <div\n            style={{\n              WebkitBackdropFilter: \"blur(16px)\",\n              backdropFilter: \"blur(16px)\",\n              background: glassColor,\n              borderRadius: 15,\n              boxShadow: \"inset 0 1px 0 rgba(255,255,255,0.06)\",\n              display: \"flex\",\n              flexDirection: \"column\",\n              fontFamily: FONT_MONO,\n              height: \"100%\",\n              overflow: \"hidden\",\n              width: \"100%\",\n            }}\n          >\n            {/* Chrome */}\n            <div\n              style={{\n                alignItems: \"center\",\n                borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n                display: \"flex\",\n                gap: 8,\n                height: 40,\n                padding: \"0 16px\",\n              }}\n            >\n              {showTrafficLights && (\n                <>\n                  <Light color=\"#ff5f57\" />\n                  <Light color=\"#febc2e\" />\n                  <Light color=\"#28c840\" />\n                </>\n              )}\n              <div\n                style={{\n                  color: \"#a1a1aa\",\n                  flex: 1,\n                  fontSize: 12,\n                  letterSpacing: \"0.02em\",\n                  textAlign: \"center\",\n                }}\n              >\n                {title}\n              </div>\n            </div>\n\n            {/* Code body */}\n            <div\n              style={{\n                display: \"flex\",\n                flex: 1,\n                flexDirection: \"column\",\n                fontSize,\n                gap: 4,\n                lineHeight: 1.55,\n                padding: \"20px 24px\",\n              }}\n            >\n              {lines.map((line, i) => (\n                <div\n                  key={i}\n                  style={{\n                    animation: `framecn-glass-code-line ${staggerMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${i * staggerMs}ms backwards`,\n                  }}\n                >\n                  <CodeLine\n                    line={line}\n                    index={i}\n                    fontSize={fontSize}\n                    opacity={1}\n                    ty={0}\n                  />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/glass-code-block.tsx"
    }
  ],
  "type": "registry:component"
}