{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "claude-code",
  "title": "Claude Code",
  "description": "Animated Claude Code CLI welcome screen — terminal window with a dashed welcome box, recent activity and what's new panels, and a prompt line that types a command with a block cursor. Dark/light themes.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "registryDependencies": ["@remocn/caret", "@remocn/remocn-ui"],
  "files": [
    {
      "path": "registry/remocn/claude-code/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont } from \"@remotion/google-fonts/JetBrainsMono\";\nimport {\n  AbsoluteFill,\n  interpolate,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport { Caret } from \"@/components/remocn/caret\";\nimport { useTypewriter } from \"@/lib/remocn-ui\";\n\nconst { fontFamily: MONO_FAMILY } = loadFont();\n\nexport interface ClaudeCodeProps {\n  title?: string;\n  userName?: string;\n  model?: string;\n  cwd?: string;\n  placeholder?: string;\n  prompt?: string;\n  accentColor?: string;\n  speed?: number;\n}\n\ninterface Theme {\n  page: string;\n  windowBar: string;\n  windowBody: string;\n  fg: string;\n  fgMuted: string;\n  fgDim: string;\n  boxBorder: string;\n}\n\nexport const THEMES: Record<\"light\" | \"dark\", Theme> = {\n  light: {\n    page: \"#E8E5DD\",\n    windowBar: \"#D8D3CA\",\n    windowBody: \"#FBFAF7\",\n    fg: \"#1F1E1D\",\n    fgMuted: \"#73726C\",\n    fgDim: \"#A3A097\",\n    boxBorder: \"#D97757\",\n  },\n  dark: {\n    page: \"#2B2A28\",\n    windowBar: \"#3A3633\",\n    windowBody: \"#1B1A18\",\n    fg: \"#E8E5DD\",\n    fgMuted: \"#8A857C\",\n    fgDim: \"#6B6660\",\n    boxBorder: \"#D97757\",\n  },\n};\n\nexport const TYPING_START_FRAME = 48;\n\nexport const TYPING_CPS = 18;\n\nexport const WHATS_NEW: string[] = [\n  \"/agents to create subagents\",\n  \"/security-review for review agent\",\n  \"ctrl+b to background bashes\",\n];\n\nfunction introBounceIn(\n  frame: number,\n  fps: number,\n): { translateY: number; scale: number } {\n  const s = spring({\n    fps,\n    frame,\n    config: { damping: 14, stiffness: 110, mass: 0.7 },\n  });\n  const translateY = interpolate(s, [0, 1], [28, 0]);\n  const scale = interpolate(s, [0, 1], [0.97, 1]);\n  return { translateY, scale };\n}\n\nfunction fadeUpAt(\n  frame: number,\n  range: [number, number],\n): { opacity: number; translateY: number } {\n  const opts = {\n    extrapolateLeft: \"clamp\" as const,\n    extrapolateRight: \"clamp\" as const,\n  };\n  return {\n    opacity: interpolate(frame, range, [0, 1], opts),\n    translateY: interpolate(frame, range, [12, 0], opts),\n  };\n}\n\nfunction Mascot({ accent, size = 96 }: { accent: string; size?: number }) {\n  return (\n    <svg\n      height={size}\n      viewBox=\"0 0 24 24\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Claude Code</title>\n      <path\n        clipRule=\"evenodd\"\n        d=\"M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z\"\n        fill={accent}\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nexport function ClaudeCode({\n  title = \"Claude Code v2.0.0\",\n  userName = \"Meaghan\",\n  model = \"Opus 4.8 • Max 20x\",\n  cwd = \"/users/meaghan/code/apps\",\n  placeholder = 'Try \"edit <filepath> to ...\"',\n  prompt = \"edit src/theme.ts to add a dark mode toggle\",\n  accentColor = \"#D97757\",\n  speed = 1,\n}: ClaudeCodeProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const t = THEMES.dark;\n\n  const refW = 1280;\n  const refH = 720;\n  const stageScale = Math.min(width / refW, height / refH);\n\n  const tw = useTypewriter(prompt, {\n    cps: TYPING_CPS,\n    speed,\n    startFrame: TYPING_START_FRAME,\n  });\n  const showText = tw.count > 0;\n\n  const intro = introBounceIn(frame * speed, fps);\n  const leftFade = fadeUpAt(frame * speed, [6, 22]);\n  const rightFade = fadeUpAt(frame * speed, [12, 30]);\n  const promptFade = fadeUpAt(frame * speed, [18, 36]);\n\n  const border = accentColor;\n\n  const winLeft = 90;\n  const winTop = 40;\n  const winWidth = 1100;\n  const winHeight = 620;\n  const barHeight = 40;\n\n  return (\n    <AbsoluteFill style={{ background: \"transparent\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: refW,\n          height: refH,\n          transform: `translate(-50%, -50%) scale(${stageScale})`,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            left: winLeft,\n            top: winTop,\n            width: winWidth,\n            height: winHeight,\n            background: t.windowBody,\n            borderRadius: 12,\n            overflow: \"hidden\",\n            boxShadow: \"0 24px 60px -20px rgba(0,0,0,0.6)\",\n            opacity: intro.scale,\n            transform: `translateY(${intro.translateY}px) scale(${intro.scale})`,\n            transformOrigin: \"center top\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            boxSizing: \"border-box\",\n          }}\n        >\n          <div\n            style={{\n              height: barHeight,\n              background: t.windowBar,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 8,\n              paddingLeft: 16,\n              flexShrink: 0,\n            }}\n          >\n            <div\n              style={{\n                width: 12,\n                height: 12,\n                borderRadius: \"50%\",\n                background: \"#FF5F57\",\n              }}\n            />\n            <div\n              style={{\n                width: 12,\n                height: 12,\n                borderRadius: \"50%\",\n                background: \"#FEBC2E\",\n              }}\n            />\n            <div\n              style={{\n                width: 12,\n                height: 12,\n                borderRadius: \"50%\",\n                background: \"#28C840\",\n              }}\n            />\n          </div>\n\n          <div\n            style={{\n              flex: 1,\n              position: \"relative\",\n              padding: 28,\n              boxSizing: \"border-box\",\n              display: \"flex\",\n              flexDirection: \"column\",\n            }}\n          >\n            <div\n              style={{\n                position: \"relative\",\n                border: `1px dashed ${border}`,\n                borderRadius: 6,\n                padding: \"28px 24px 24px\",\n                opacity: leftFade.opacity,\n                transform: `translateY(${leftFade.translateY}px)`,\n              }}\n            >\n              <span\n                style={{\n                  position: \"absolute\",\n                  top: -11,\n                  left: 22,\n                  padding: \"0 10px\",\n                  background: t.windowBody,\n                  color: accentColor,\n                  fontFamily: MONO_FAMILY,\n                  fontSize: 16,\n                  fontWeight: 700,\n                }}\n              >\n                {title}\n              </span>\n\n              <div style={{ display: \"flex\", flexDirection: \"row\" }}>\n                <div\n                  style={{\n                    width: \"42%\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"flex-start\",\n                    gap: 16,\n                    paddingRight: 24,\n                    boxSizing: \"border-box\",\n                  }}\n                >\n                  <div\n                    style={{\n                      fontFamily: MONO_FAMILY,\n                      fontSize: 20,\n                      color: t.fg,\n                    }}\n                  >\n                    Welcome back {userName}!\n                  </div>\n                  <div style={{ alignSelf: \"center\" }}>\n                    <Mascot accent={accentColor} />\n                  </div>\n                  <div\n                    style={{\n                      display: \"flex\",\n                      flexDirection: \"column\",\n                      gap: 4,\n                    }}\n                  >\n                    <div\n                      style={{\n                        fontFamily: MONO_FAMILY,\n                        fontSize: 15,\n                        color: t.fgMuted,\n                      }}\n                    >\n                      {model}\n                    </div>\n                    <div\n                      style={{\n                        fontFamily: MONO_FAMILY,\n                        fontSize: 15,\n                        color: t.fgMuted,\n                      }}\n                    >\n                      {cwd}\n                    </div>\n                  </div>\n                </div>\n\n                <div\n                  style={{\n                    width: \"58%\",\n                    borderLeft: `1px dashed ${border}`,\n                    paddingLeft: 24,\n                    boxSizing: \"border-box\",\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    opacity: rightFade.opacity,\n                    transform: `translateY(${rightFade.translateY}px)`,\n                  }}\n                >\n                  <div>\n                    <div\n                      style={{\n                        fontFamily: MONO_FAMILY,\n                        fontSize: 15,\n                        fontWeight: 700,\n                        color: accentColor,\n                        marginBottom: 10,\n                      }}\n                    >\n                      What's new\n                    </div>\n                    <div\n                      style={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        gap: 6,\n                      }}\n                    >\n                      {WHATS_NEW.map((line) => (\n                        <div\n                          key={line}\n                          style={{\n                            fontFamily: MONO_FAMILY,\n                            fontSize: 14,\n                            color: t.fg,\n                          }}\n                        >\n                          {line}\n                        </div>\n                      ))}\n                      <div\n                        style={{\n                          fontFamily: MONO_FAMILY,\n                          fontSize: 14,\n                          color: t.fgDim,\n                        }}\n                      >\n                        ... /help for more\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div style={{ height: 32 }} />\n\n            <div\n              style={{\n                opacity: promptFade.opacity,\n                transform: `translateY(${promptFade.translateY}px)`,\n              }}\n            >\n              <div\n                style={{\n                  height: 1,\n                  background: t.fgDim,\n                  opacity: 0.4,\n                  marginBottom: 16,\n                }}\n              />\n              <div\n                style={{\n                  display: \"flex\",\n                  flexDirection: \"row\",\n                  alignItems: \"center\",\n                  fontFamily: MONO_FAMILY,\n                  fontSize: 17,\n                  whiteSpace: \"pre\",\n                }}\n              >\n                <span style={{ color: t.fgMuted }}>{\"> \"}</span>\n                {showText ? (\n                  <span\n                    style={{\n                      position: \"relative\",\n                      color: t.fg,\n                      display: \"inline-flex\",\n                      alignItems: \"center\",\n                    }}\n                  >\n                    {tw.text}\n                    <span style={{ opacity: 0.55, display: \"inline-flex\" }}>\n                      <Caret\n                        width={11}\n                        height={22}\n                        color={t.fg}\n                        blink={!tw.typing}\n                        speed={speed}\n                        marginLeft={2}\n                      />\n                    </span>\n                  </span>\n                ) : (\n                  <span\n                    style={{\n                      position: \"relative\",\n                      color: t.fgMuted,\n                      display: \"inline-flex\",\n                      alignItems: \"center\",\n                    }}\n                  >\n                    <span style={{ opacity: 0.55, display: \"inline-flex\" }}>\n                      <Caret\n                        width={11}\n                        height={22}\n                        color={t.fg}\n                        blink={!tw.typing}\n                        speed={speed}\n                      />\n                    </span>\n                    <span style={{ marginLeft: 6 }}>{placeholder}</span>\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/claude-code.tsx"
    }
  ],
  "type": "registry:component"
}