Components
Animated Terminal
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.
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>
);
}