Typewriter Terminal (React Component)

The Problem

Most terminal-style UI components on the web are static screenshots or low-fidelity mockups. Developers who want a realistic, animated terminal for portfolios, landing pages, or demos have to build one from scratch every time, and getting the timing, cursor behaviour, and macOS chrome right is tedious to do well.

The Solution

Built a fully parameterised React component that simulates a real terminal: characters type in one by one, mistakes get deleted and corrected, commands cycle through a queue, and the whole thing wraps in an authentic macOS window chrome with a theme system.

Key decisions:

• Configurable command queue: pass an array of commands and the component handles sequencing, timing, and looping automatically
• Realistic error simulation: the component can be configured to type a "mistake" and backspace before typing the correct character, making it feel human
• Multiple themes: dark, light, and custom colour schemes via props
• Drop-in usage: a single import with minimal required props; advanced behaviour is opt-in

The Outcome

Deployed as a standalone demo and published as open-source. Shows strong frontend craftsmanship, precise animation timing, composable component design, and the kind of attention to UX detail that distinguishes polished interfaces from functional ones.