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.