{
  "name": "claude-code",
  "type": "registry:block",
  "description": "Claude Code terminal welcome screen with CLI prompt typing",
  "dependencies": [
    "remotion",
    "@remotion/google-fonts"
  ],
  "registryDependencies": [
    "ai-composer-utils"
  ],
  "files": [
    {
      "path": "registry/bases/default/scenes/claude-code/index.tsx",
      "type": "registry:block",
      "content": "import { loadFont } from \"@remotion/google-fonts/JetBrainsMono\";\nimport { AbsoluteFill, useCurrentFrame, useVideoConfig } from \"remotion\";\nimport {\n  AI_TYPING_START_TUI,\n  Caret,\n  fadeUpAt,\n  introBounceIn,\n  stageScale,\n  useTypewriter,\n} from \"@/remotion/lib/ai-composer-utils\";\n\nconst { fontFamily } = loadFont(\"normal\", {\n  weights: [\"400\", \"700\"],\n  subsets: [\"latin\"],\n});\n\nexport type ClaudeCodeProps = {\n  title?: string;\n  userName?: string;\n  model?: string;\n  cwd?: string;\n  placeholder?: string;\n  prompt?: string;\n  accentColor?: string;\n  theme?: \"light\" | \"dark\";\n  speed?: number;\n};\n\ntype Theme = {\n  page: string;\n  windowBar: string;\n  windowBody: string;\n  fg: string;\n  fgMuted: string;\n  fgDim: 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  },\n  dark: {\n    page: \"#2B2A28\",\n    windowBar: \"#3A3633\",\n    windowBody: \"#1B1A18\",\n    fg: \"#E8E5DD\",\n    fgMuted: \"#8A857C\",\n    fgDim: \"#6B6660\",\n  },\n};\n\nconst TYPING_CPS = 18;\n\nconst WHATS_NEW = [\n  \"/agents to create subagents\",\n  \"/security-review for review agent\",\n  \"ctrl+b to background bashes\",\n];\n\nconst TRAFFIC_LIGHTS = [\"#FF5F57\", \"#FEBC2E\", \"#28C840\"];\n\nfunction Mascot({ accent, size = 96 }: { accent: string; size?: number }) {\n  return (\n    <svg height={size} width={size} viewBox=\"0 0 24 24\">\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 const ClaudeCode: React.FC<ClaudeCodeProps> = ({\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  theme = \"dark\",\n  speed = 1,\n}) => {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const t = THEMES[theme];\n  const scale = stageScale(width, height);\n\n  const tw = useTypewriter(prompt, {\n    cps: TYPING_CPS,\n    speed,\n    startFrame: AI_TYPING_START_TUI,\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  return (\n    <AbsoluteFill style={{ background: t.page, fontFamily }}>\n      <div\n        style={{\n          position: \"absolute\",\n          left: \"50%\",\n          top: \"50%\",\n          width: 1280,\n          height: 720,\n          transform: `translate(-50%, -50%) scale(${scale})`,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            left: 90,\n            top: 40,\n            width: 1100,\n            height: 620,\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: 40,\n              background: t.windowBar,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 8,\n              paddingLeft: 16,\n              flexShrink: 0,\n            }}\n          >\n            {TRAFFIC_LIGHTS.map((color) => (\n              <div\n                key={color}\n                style={{\n                  width: 12,\n                  height: 12,\n                  borderRadius: \"50%\",\n                  background: color,\n                }}\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 ${accentColor}`,\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                  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 style={{ fontSize: 20, color: t.fg }}>\n                    Welcome back {userName}!\n                  </div>\n                  <div style={{ alignSelf: \"center\" }}>\n                    <Mascot accent={accentColor} />\n                  </div>\n                  <div\n                    style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}\n                  >\n                    <div style={{ fontSize: 15, color: t.fgMuted }}>{model}</div>\n                    <div style={{ fontSize: 15, color: t.fgMuted }}>{cwd}</div>\n                  </div>\n                </div>\n\n                <div\n                  style={{\n                    width: \"58%\",\n                    borderLeft: `1px dashed ${accentColor}`,\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                        fontSize: 15,\n                        fontWeight: 700,\n                        color: accentColor,\n                        marginBottom: 10,\n                      }}\n                    >\n                      What&apos;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 key={line} style={{ fontSize: 14, color: t.fg }}>\n                          {line}\n                        </div>\n                      ))}\n                      <div style={{ fontSize: 14, color: t.fgDim }}>\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                  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"
    }
  ],
  "atlas": {
    "lane": "blocks",
    "drive": "time",
    "tier": "core",
    "tags": [
      "ai"
    ]
  }
}