Live demo
glitch-terminal — classic
type any text + Enter to submit
trigger word glows green as you type
📱 tap terminal to open keyboard on mobile
Usage
// 1. Copy GlitchTerminal.tsx + GlitchTerminal.module.css into your project
// 2. Add VT323 font to your layout
import { GlitchTerminal } from "@/components/GlitchTerminal";
// Classic (default)
<GlitchTerminal />
// Custom preset
<GlitchTerminal
triggerWords={["hack", "root"]}
color="#00ffee"
alertText="INTRUSION DETECTED"
soundSrc="/glitch.mp3"
onGlitch={() => console.log("glitched!")}
/>
// Embedded (not full-screen)
<GlitchTerminal
height="400px"
style={{ borderRadius: "8px" }}
/>
Props
| Prop | Type | Default | Description |
| triggerWords | string[] | ["glitch"] | Words that trigger the effect (case-insensitive) |
| bootMessages | string[] | See README | Lines shown on mount |
| promptPrefix | string | ">_" | Prefix before user input |
| glitchDuration | number | 3000 | Screen-shake duration in ms |
| color | string | #66ff66 | Text & glow color |
| background | string | Dark green radial | CSS background value |
| alertText | string | "ABORT..." | Overlay text on glitch |
| soundSrc | string | — | Path to audio file in /public |
| soundVolume | number | 1 | Volume 0–1 |
| glitchCharacters | string | A–Z 0–9 + block | Chars used for scramble |
| onGlitch | () => void | — | Callback on trigger |
| onCommand | (s: string) => void | — | Callback on Enter (non-trigger) |
| showAlert | boolean | true | Show overlay on glitch |
| allowHTML | boolean | true | Allow HTML in boot messages |
| height | string | "100vh" | Terminal height |
| className | string | — | Extra class on wrapper |