Cyber Terminal

The CyberTerminal is a heavily stylized command palette built on top of cmdk. It features CSS-driven CRT monitor effects (scanlines, screen flicker, phosphor glow) and utilizes the browser's native Web Audio API to synthesize mechanical keystroke sounds with zero latency.

Perfect for developer-focused portfolios, hackathon sites, or any project that leans into the retro-futuristic cyberpunk aesthetic.

Live Preview

[!NOTE] The terminal uses the native AudioContext API to generate sound. Browsers require a user interaction (like clicking a button or pressing a key on the page) before audio can be played. The component handles this automatically by attaching an initializer to the capture phase of the click event.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CyberTerminal } from "@/components/creative/cyber-terminal";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CyberTerminal } from "@/components/creative/cyber-terminal";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CyberTerminal
        commands{/* value */}
        heading="example"
        items{/* value */}
      />
    </div>
  );
}