50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1bcd,"use client"; import { interpolate, Sequence, useCurrentFrame } from "remotion"; export interface GlassCodeBlockProps { code?: string; title?: string; width?: number; height?: number; fontSize?: number; glassColor?: string; staggerFrames?: number; showTrafficLights?: boolean; aura?: boolean; speed?: number; className?: string; } const FONT_MONO = "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace"; const DEFAULT_CODE = `import { motion } from "remotion"; // Generate a hero scene export function Hero() { const frame = useCurrentFrame(); const opacity = frame / 30; return

Hello

; }`; // Minimal regex tokenizer. NOT a real syntax highlighter — just enough to // give the eye color anchors. Order matters: comments → strings → keywords. const KEYWORDS = new Set([ "import", "from", "export", "function", "const", "let", "var", "return", "if", "else", "for", "while", "new", "class", "extends", "default", "true", "false", "null", "undefined", ]); type Token = { text: string; kind: "code" | "comment" | "string" | "keyword" | "number"; }; function tokenizeLine(line: string): Token[] { // Whole-line comment. const trimmed = line.trimStart(); if (trimmed.startsWith("//")) { return [{ text: line, kind: "comment" }]; } const tokens: Token[] = []; // Split keeping delimiters: words, strings, numbers, everything else. const re = /("[^"]*"|'[^']*'|`[^`]*`|\b\d+\b|\b[A-Za-z_$][\w$]*\b|[^\w"']+)/g; let match: RegExpExecArray | null = re.exec(line); while (match !== null) { const t = match[0]; const first = t[0]; if (first === '"' || first === "'" || first === "`") { tokens.push({ text: t, kind: "string" }); } else if (/^\d+$/.test(t)) { tokens.push({ text: t, kind: "number" }); } else if (/^[A-Za-z_$][\w$]*$/.test(t) && KEYWORDS.has(t)) { tokens.push({ text: t, kind: "keyword" }); } else { tokens.push({ text: t, kind: "code" }); } match = re.exec(line); } return tokens; } const TOKEN_COLORS: Record = { code: "#e4e4e7", comment: "#52525b", string: "#86efac", keyword: "#c4b5fd", number: "#fcd34d", }; export function GlassCodeBlock({ code = DEFAULT_CODE, title = "hero.tsx", width = 760, height = 460, fontSize = 16, glassColor = "rgba(10, 10, 10, 0.6)", staggerFrames = 4, showTrafficLights = true, aura = false, speed = 1, className, }: GlassCodeBlockProps) { const lines = code.split("\n"); return (

{aura && } {/* 1px gradient ring acting as a microborder */}

{/* Chrome */}

{showTrafficLights && ( <> )}

{title}

{/* Code body */}

{lines.map((line, i) => ( ))}

); } function Light({ color }: { color: string }) { return (

); } function CodeLine({ line, index, fontSize, }: { line: string; index: number; fontSize: number; }) { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const ty = interpolate(frame, [0, 8], [4, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const tokens = tokenizeLine(line); // Render an empty line as a half-height spacer so blank lines still take // visual space without collapsing the gap. if (tokens.length === 0) { return

; } return (

{String(index + 1).padStart(2, " ")} {tokens.map((t, i) => ( {t.text} ))}

); } function BackdropAura() { // Slow, low-amplitude blob behind the glass so the backdrop blur has // perceptible content to refract. const frame = useCurrentFrame(); const t = frame / 60; const x = 50 + Math.sin(t) * 20; const y = 50 + Math.cos(t * 0.7) * 15; return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L50",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/remocn/glass-code-block/index.tsx","content":"$52","type":"registry:component","target":"components/remocn/glass-code-block.tsx"}],"className":"h-[70svh] min-h-80"}]]}]