Components
Hyper-realistic animated CLI terminal with macOS window chrome, auto-typing commands with variable-speed jitter for human-feel, colored segmented output (ANSI-style color names), blinking block cursor, and fully scripted step sequences that loop. Three built-in themes (dark, darker, midnight), configurable prompt character, optional line numbers, adjustable typing speed, command delay, output line delay. Pass any sequence of commands with rich colored output. Zero dependencies.
Loading preview...
import { Component as AnimatedTerminal } from "@/components/ui/animated-terminal";
const deploySequence = [
{
command: "npx create-app my-project --typescript",
typingSpeed: 40,
output: [
[
{ text: "✓ ", color: "green", bold: true },
{ text: "Creating project ", color: "white" },
{ text: "my-project", color: "cyan", bold: true },
],
[
{ text: "✓ ", color: "green", bold: true },
{ text: "Installing dependencies...", color: "white" },
],
"",
[
{ text: " added ", color: "dim" },
{ text: "847", color: "green", bold: true },
{ text: " packages in ", color: "dim" },
{ text: "12.4s", color: "white" },
],
"",
[
{ text: " 🎉 ", color: "white" },
{ text: "Project created successfully!", color: "green", bold: true },
],
],
},
{
command: "cd my-project && npm run build",
delay: 1200,
output: [
[
{ text: "▸ ", color: "blue" },
{ text: "Compiling TypeScript...", color: "white" },
],
[
{ text: "▸ ", color: "blue" },
{ text: "Bundling modules...", color: "white" },
],
[
{ text: "▸ ", color: "blue" },
{ text: "Optimizing assets...", color: "white" },
],
"",
[
{ text: " dist/", color: "dim" },
{ text: "index.js ", color: "white" },
{ text: " 42.1 kB ", color: "green" },
{ text: "│ gzip: ", color: "dim" },
{ text: "13.8 kB", color: "cyan" },
],
[
{ text: " dist/", color: "dim" },
{ text: "style.css ", color: "white" },
{ text: " 8.3 kB ", color: "green" },
{ text: "│ gzip: ", color: "dim" },
{ text: " 2.1 kB", color: "cyan" },
],
"",
[
{ text: "✓ ", color: "green", bold: true },
{ text: "Build completed in ", color: "white" },
{ text: "3.2s", color: "green", bold: true },
],
],
},
{
command: "npx deploy --prod --region=edge",
delay: 1000,
typingSpeed: 35,
output: [
[
{ text: "▸ ", color: "magenta" },
{ text: "Authenticating...", color: "white" },
],
[
{ text: "▸ ", color: "magenta" },
{ text: "Uploading build artifacts ", color: "white" },
{ text: "(48.2 kB)", color: "dim" },
],
[
{ text: "▸ ", color: "magenta" },
{ text: "Deploying to ", color: "white" },
{ text: "150 edge nodes", color: "cyan", bold: true },
],
"",
[
{ text: " ██████████████████████ ", color: "green" },
{ text: "100%", color: "green", bold: true },
],
"",
[
{ text: "✓ ", color: "green", bold: true },
{ text: "Deployed to production!", color: "green", bold: true },
],
[
{ text: " ➜ ", color: "dim" },
{ text: "https://my-project.edge.app", color: "cyan" },
],
[
{ text: " ➜ ", color: "dim" },
{ text: "Latency: ", color: "dim" },
{ text: "14ms ", color: "green", bold: true },
{ text: "(p99)", color: "dim" },
],
],
},
];
const gitSequence = [
{
command: "git status",
typingSpeed: 60,
output: [
[
{ text: "On branch ", color: "white" },
{ text: "main", color: "cyan", bold: true },
],
[
{ text: "Changes not staged for commit:", color: "white" },
],
"",
[
{ text: " modified: ", color: "red" },
{ text: "src/app.tsx", color: "white" },
],
[
{ text: " modified: ", color: "red" },
{ text: "src/utils.ts", color: "white" },
],
[
{ text: " added: ", color: "green" },
{ text: "src/hooks/useAuth.ts", color: "white" },
],
],
},
{
command: 'git commit -am "feat: add auth hook"',
delay: 1000,
output: [
[
{ text: "[main ", color: "yellow" },
{ text: "a1b2c3d", color: "yellow", bold: true },
{ text: "] ", color: "yellow" },
{ text: "feat: add auth hook", color: "white" },
],
[
{ text: " 3 files changed, ", color: "dim" },
{ text: "142 insertions(+)", color: "green" },
{ text: ", ", color: "dim" },
{ text: "8 deletions(-)", color: "red" },
],
],
},
{
command: "git push origin main",
delay: 800,
output: [
[
{ text: "Enumerating objects: ", color: "dim" },
{ text: "7", color: "white" },
{ text: ", done.", color: "dim" },
],
[
{ text: "Counting objects: ", color: "dim" },
{ text: "100%", color: "white" },
{ text: " (7/7), done.", color: "dim" },
],
[
{ text: "Writing objects: ", color: "dim" },
{ text: "100%", color: "white" },
{ text: " (4/4), 1.28 KiB, done.", color: "dim" },
],
"",
[
{ text: "To github.com:user/my-project.git", color: "dim" },
],
[
{ text: " e4f5g6h..a1b2c3d ", color: "dim" },
{ text: "main → main", color: "green" },
],
],
},
];
export default function Demo() {
return (
<div className="flex min-h-screen items-center justify-center bg-background p-8">
<div className="w-full max-w-5xl">
<div className="text-center mb-16">
<h2 className="text-2xl font-bold tracking-tight text-foreground mb-2">
Animated Terminal
</h2>
<p className="text-sm text-muted-foreground max-w-md mx-auto">
Realistic CLI with auto-typing commands, colored output, and scripted sequences. Three themes.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Deploy workflow */}
<AnimatedTerminal
steps={deploySequence}
title="deploy — zsh"
theme="darker"
prompt="→"
typingSpeed={40}
lineDelay={60}
loopDelay={4000}
/>
{/* Git workflow */}
<AnimatedTerminal
steps={gitSequence}
title="git — bash"
theme="midnight"
prompt="$"
typingSpeed={50}
lineDelay={50}
startDelay={2000}
loopDelay={4000}
/>
</div>
{/* Full width showcase */}
<div className="mt-6">
<AnimatedTerminal
steps={[
{
command: "npx analyze --bundle --treemap",
typingSpeed: 35,
output: [
[
{ text: "📦 ", color: "white" },
{ text: "Bundle Analysis", color: "white", bold: true },
],
"",
[
{ text: " Package ", color: "dim" },
{ text: "Size ", color: "dim" },
{ text: "Gzip", color: "dim" },
],
[
{ text: " ─────────────────────────────────────", color: "dim" },
],
[
{ text: " react ", color: "white" },
{ text: " 6.4 kB ", color: "green" },
{ text: " 2.7 kB", color: "cyan" },
],
[
{ text: " react-dom ", color: "white" },
{ text: "130.2 kB ", color: "yellow" },
{ text: " 41.8 kB", color: "cyan" },
],
[
{ text: " framer-motion ", color: "white" },
{ text: " 97.1 kB ", color: "yellow" },
{ text: " 31.4 kB", color: "cyan" },
],
[
{ text: " application ", color: "white" },
{ text: " 42.1 kB ", color: "green" },
{ text: " 13.8 kB", color: "cyan" },
],
[
{ text: " ─────────────────────────────────────", color: "dim" },
],
[
{ text: " Total ", color: "white", bold: true },
{ text: "275.8 kB ", color: "white", bold: true },
{ text: " 89.7 kB", color: "cyan", bold: true },
],
"",
[
{ text: "✓ ", color: "green", bold: true },
{ text: "No issues found. Bundle size is ", color: "white" },
{ text: "within budget.", color: "green", bold: true },
],
],
},
]}
title="analyzer — node"
theme="dark"
prompt="❯"
showLineNumbers={true}
typingSpeed={30}
lineDelay={45}
loopDelay={5000}
/>
</div>
</div>
</div>
);
}