Glass Code Block

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_MONO =
7  "var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace";
8 
9const DEFAULT_CODE = `import { motion } from "remotion";
10 
11// Generate a hero scene
12export function Hero() {
13  const frame = useCurrentFrame();
14  const opacity = frame / 30;
15  return <h1 style={{ opacity }}>Hello</h1>;
16}`;
17 
18const KEYWORDS = new Set([
19  "import",
20  "from",
21  "export",
22  "function",
23  "const",
24  "let",
25  "var",
26  "return",
27  "if",
28  "else",
29  "for",
30  "while",
31  "new",
32  "class",
33  "extends",
34  "default",
35  "true",
36  "false",
37  "null",
38  "undefined",
39]);
40 
41interface Token {
42  text: string;
43  kind: "code" | "comment" | "string" | "keyword" | "number";
44}
45 
46const tokenizeLine = (line: string): Token[] => {
47  const trimmed = line.trimStart();
48  if (trimmed.startsWith("//")) {
49    return [{ kind: "comment", text: line }];
50  }
51 
52  const tokens: Token[] = [];
53  const re = /("[^"]*"|'[^']*'|`[^`]*`|\b\d+\b|\b[A-Za-z_$][\w$]*\b|[^\w"']+)/g;
54  let match: RegExpExecArray | null;
55  while ((match = re.exec(line)) !== null) {
56    const [t] = match;
57    const [first] = t;
58    if (first === '"' || first === "'" || first === "`") {
59      tokens.push({ kind: "string", text: t });
60    } else if (/^\d+$/.test(t)) {
61      tokens.push({ kind: "number", text: t });
62    } else if (/^[A-Za-z_$][\w$]*$/.test(t) && KEYWORDS.has(t)) {
63      tokens.push({ kind: "keyword", text: t });
64    } else {
65      tokens.push({ kind: "code", text: t });
66    }
67  }
68  return tokens;
69};
70 
71const TOKEN_COLORS: Record<Token["kind"], string> = {
72  code: "#e4e4e7",
73  comment: "#52525b",
74  keyword: "#c4b5fd",
75  number: "#fcd34d",
76  string: "#86efac",
77};
78 
79export interface GlassCodeBlockProps {
80  code?: string;
81  title?: string;
82  width?: number;
83  height?: number;
84  fontSize?: number;
85  background?: string;
86  glassColor?: string;
87  staggerFrames?: number;
88  showTrafficLights?: boolean;
89  speed?: number;
90  fps?: number;
91  durationInFrames?: number;
92  className?: string;
93}
94 
95const Light = ({ color }: { color: string }) => (
96  <div
97    style={{
98      background: color,
99      borderRadius: "50%",
100      height: 12,
101      opacity: 0.6,
102      width: 12,
103    }}
104  />
105);
106 
107const CodeLine = ({
108  line,
109  index,
110  fontSize,
111  opacity,
112  ty,
113}: {
114  line: string;
115  index: number;
116  fontSize: number;
117  opacity: number;
118  ty: number;
119}) => {
120  const tokens = tokenizeLine(line);
121  if (tokens.length === 0) {
122// … truncated