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:T1f45,"use client"; import { Timegroup } from "@editframe/react"; import type { CSSProperties } from "react"; export type TerminalLineType = "command" | "log" | "success" | "error"; export interface TerminalLine { text: string; type: TerminalLineType; delay?: number; pause?: number; } export interface TerminalSimulatorProps { lines?: TerminalLine[]; prompt?: string; title?: string; background?: string; chromeColor?: string; fontSize?: number; charsPerFrame?: number; chunkSize?: number; speed?: number; fps?: number; durationInFrames?: number; className?: string; } const DEFAULT_LINES: TerminalLine[] = [ { delay: 0, text: "npm run build", type: "command" }, { delay: 6, text: "Resolving dependencies...", type: "log" }, { delay: 4, text: "> framecn@1.0.0 build", type: "log" }, { delay: 4, text: "> next build", type: "log" }, { delay: 12, text: "Compiling...", type: "log" }, { delay: 14, text: "Compiled successfully in 4.2s", type: "success" }, { delay: 10, text: "Generating static pages (24/24)", type: "log" }, { delay: 12, text: "Build completed without errors", type: "success" }, ]; const TYPE_COLORS: Record = { command: "#fafafa", error: "#ef4444", log: "#a1a1aa", success: "#22c55e", }; const autoPause = (line: TerminalLine): number => { if (line.pause !== undefined) { return line.pause; } if (line.text.trimEnd().endsWith("...")) { return 18; } return 0; }; const Light = ({ color }: { color: string }) => (

); export const TerminalSimulator = ({ lines = DEFAULT_LINES, prompt = "$", title = "~/projects/framecn", background = "#0a0a0a", chromeColor = "#1a1a1a", fontSize = 18, charsPerFrame = 1, chunkSize = 1, speed = 1, fps = 30, durationInFrames = 200, className, }: TerminalSimulatorProps) => { const lineHeight = Math.round(fontSize * 1.6); const windowWidth = 900; const windowHeight = 480; const durationMs = (durationInFrames / fps) * 1000; const frameMs = 1000 / fps; const lineTimings = lines.map((line, index) => { let startFrame = 10; for (let i = 0; i < index; i += 1) { const delay = lines[i].delay ?? 8; startFrame += delay; const typingFrames = Math.ceil( lines[i].text.length / (chunkSize * charsPerFrame) ); startFrame += typingFrames + autoPause(lines[i]); } const typingFrames = Math.ceil( line.text.length / (chunkSize * charsPerFrame) ); return { startMs: (startFrame / speed) * frameMs, text: line.text, type: line.type, typingMs: (typingFrames / speed) * frameMs, }; }); const terminalStyle: CSSProperties = { alignItems: "center", background: "#050505", display: "flex", inset: 0, justifyContent: "center", position: "absolute", }; const scrollKeyframes = (() => { const visibleLines = 8; const points: { percent: number; y: number }[] = []; for (let i = visibleLines; i < lines.length; i += 1) { const percent = (lineTimings[i].startMs / durationMs) * 100; points.push({ percent, y: -(i - visibleLines + 1) * lineHeight }); } if (points.length === 0) { return ""; } let kf = "@keyframes terminal-scroll {\n 0% { transform: translateY(0); }\n"; for (const p of points) { kf += ` ${p.percent.toFixed(2)}% { transform: translateY(${p.y}px); }\n`; } kf += ` 100% { transform: translateY(${points.at(-1)?.y ?? 0}px); }\n}`; return kf; })(); const cursorKeyframes = `@keyframes terminal-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }`; return ( <>

{title}

{lineTimings.map((timing, index) => { const line = lines[index]; const steps = Math.max( 1, Math.ceil(line.text.length / chunkSize) ); return (

{line.type === "command" && ( {prompt} )} {line.text}

); })}

); }; 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":"@framecn","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/bases/editframe/components/terminal-simulator/index.tsx","content":"$52","type":"registry:component","target":"components/framecn/terminal-simulator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]