Retro Terminal Emulator

Pro

CRT phosphor glow, scanlines, and a 240 char/sec typer that never re-renders a single line of output mid-stream.

show offretroterminalemulatorframer motion

Retro Terminal Emulator component preview

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add retro-terminal-emulator

Usage

Import RetroTerminalEmulator from @/components/wensity/retro-terminal-emulator and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import {
 2  RetroTerminalEmulator,
 3  type TerminalLine,
 4} from "@/components/wensity/retro-terminal-emulator";
 5
 6const lines: TerminalLine[] = [
 7  { kind: "comment", text: "# wensity studio · v2.4.0" },
 8  { kind: "command", text: "pnpm dlx wensity@latest add retro-terminal-emulator" },
 9  { kind: "output",  text: "✓ Resolved deps · 0 added · 0 removed" },
10  { kind: "command", text: "pnpm dev" },
11  { kind: "output",  text: "▲ Next.js · Local: http://localhost:3000" },
12  { kind: "output",  text: "✓ Ready in 287ms" },
13];
14
15export default function Example() {
16  return (
17    <RetroTerminalEmulator
18      lines={lines}
19      palette="phosphor"
20      cps={42}
21      title="wensity@studio: ~"
22    />
23  );
24}

Props

Prop	Type	Default	Description
`lines`	TerminalLine[]	-	Lines to type out, in order.
`cps`	number	38	Default characters-per-second cadence.
`prompt`	string	"$ "	Default prompt prefix for command lines.
`title`	string	"wensity@studio: ~"	Header title bar text.
`loop`	boolean	true	Loop the whole sequence forever.
`linePause`	number	320	Pause in milliseconds between lines.
`loopPause`	number	2200	Pause in milliseconds before restarting the loop.
`palette`	"phosphor" \| "amber" \| "chili"	"phosphor"	Preferred CRT colour theme.