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:T245a,"use client" import { useState } from "react" import { cn } from "@/lib/utils" import { TerminalAnimationBackgroundGradient, TerminalAnimationBlinkingCursor, TerminalAnimationCommandBar, TerminalAnimationContainer, TerminalAnimationContent, TerminalAnimationOutput, TerminalAnimationRoot, TerminalAnimationTabList, TerminalAnimationTabTrigger, TerminalAnimationTrailingPrompt, TerminalAnimationWindow, type TabContent, type TerminalLine, } from "../ui/terminal-animation" export interface TerminalAnimationDemoProps { /** Tab content for each command; defaults to defaultTerminalTabs */ tabs?: TabContent[] /** Background image URL; when unset, BackgroundGradient is used */ backgroundImage?: string /** Force dark mode for the terminal regardless of page theme */ alwaysDark?: boolean } const backgroundImage = "/component-images/terminal-animation/terminal-animation-bg-2.png" const tabs: TabContent[] = [ { label: "install", command: "npm install", lines: [ { text: "", delay: 80 }, { text: "added 1,247 packages in 12s", color: "text-[#6FF7CC]", delay: 400, }, { text: "", delay: 80 }, { text: " Cult UI is looking for funding", color: "text-slate-400", delay: 150, }, { text: " run `npm fund cult-ui` for details", color: "text-slate-500", delay: 100, }, { text: " +-----------------------+", color: "text-[#ED42B5]", delay: 120, }, { text: " | CULT UI |", color: "text-[#ED42B5]", delay: 120, }, { text: " | Shadcn expanded |", color: "text-[#ED42B5]", delay: 120, }, { text: " +-----------------------+", color: "text-[#ED42B5]", delay: 160, }, { text: "", delay: 80 }, { text: " found 0 vulnerabilities", color: "text-[#ADFA1F]", delay: 250, }, ], }, { label: "build", command: "npm run build", lines: [ { text: "", delay: 80 }, { text: " ▲ Next.js 16.1.6", color: "text-slate-300", delay: 300, }, { text: "", delay: 80 }, { text: " Creating an optimized production build...", color: "text-slate-400", delay: 250, }, { text: " ✓ Compiled successfully", color: "text-[#6FF7CC]", delay: 200, }, { text: " ✓ Linting and checking validity of types", color: "text-[#6FF7CC]", delay: 150, }, { text: " ✓ Generating static pages (12/12)", color: "text-[#6FF7CC]", delay: 150, }, { text: " Route (app) / 142 kB | First Load JS 198 kB", color: "text-slate-500", delay: 150, }, { text: " Route (app) /blog 61 kB | First Load JS 57 kB", color: "text-slate-500", delay: 150, }, { text: " Route (app) /about 75 kB | First Load JS 92 kB", color: "text-slate-500", delay: 150, }, { text: "", delay: 80 }, { text: " ✓ Build completed in 4.2s", color: "text-[#6FF7CC]", delay: 300, }, ], }, { label: "deploy", command: "vercel deploy --prod", lines: [ { text: "", delay: 80 }, { text: " Vercel CLI 39.2.0", color: "text-slate-400", delay: 200 }, { text: "", delay: 80 }, { text: " > Deploying to production...", color: "text-[#ED42B5]", delay: 300, }, { text: "", delay: 80 }, { text: " ✓ Building", color: "text-[#6FF7CC]", delay: 250 }, { text: " ✓ Uploading", color: "text-[#6FF7CC]", delay: 200 }, { text: " ✓ Finalizing", color: "text-[#6FF7CC]", delay: 200 }, { text: "", delay: 80 }, { text: " Production: https://aisdkagents.vercel.app", color: "text-[#ED42B5]", delay: 400, }, { text: "", delay: 80 }, { text: " ✓ Deployment complete", color: "text-[#6FF7CC]", delay: 250, }, ], }, { label: "test", command: "npm test", lines: [ { text: "", delay: 80 }, { text: " PASS src/components/Button.test.tsx", color: "text-slate-400", delay: 200, }, { text: " ✓ renders correctly", color: "text-[#ADFA1F]", delay: 100, }, { text: " ✓ handles click events", color: "text-[#ADFA1F]", delay: 100, }, { text: " PASS src/utils/format.test.ts", color: "text-slate-400", delay: 150, }, { text: " ✓ formats currency", color: "text-[#ADFA1F]", delay: 100, }, { text: " ✓ formats dates", color: "text-[#ADFA1F]", delay: 100, }, { text: "", delay: 80 }, { text: " Test Suites: 2 passed, 2 total", color: "text-[#ADFA1F]", delay: 200, }, { text: " Tests: 4 passed, 4 total", color: "text-[#ADFA1F]", delay: 150, }, { text: " Time: 1.234 s", color: "text-slate-500", delay: 100 }, ], }, ] export function TerminalAnimationDemo() { const [animationKey, setAnimationKey] = useState(0) return ( Download BG {!backgroundImage && }

$ } />

{ if (!visible) { return null } return (

{line.text || "\u00A0"}

) }} /> $

{tabs.map((tab, i) => ( {tab.label} ))}

) } 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":[null,["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["terminal-animation"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/example/terminal-animation-demo.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]