What this explores
Terminal aesthetics applied to web navigation. Typing animations, command parsing, and keyboard interaction.
Principles demonstrated
- Character-by-character typing animation
- Command parsing and fuzzy matching
- Keyboard navigation patterns
- Scroll-triggered activation
Build It Yourself
Step-by-step guide to recreate this experiment
Beginner30-45 min
Prerequisites
- Basic React/JavaScript
- Understanding of async/await
- Basic CSS
Create a terminal-like container with a header bar (traffic lights), scrollable body for output, and an input area at the bottom.
tsx
function Terminal() {
const [lines, setLines] = useState<string[]>([]);
const [input, setInput] = useState('');
const bodyRef = useRef<HTMLDivElement>(null);
return (
<div className="terminal">
{/* Header with traffic lights */}
<div className="terminal-header">
<span className="dot red" />
<span className="dot yellow" />
<span className="dot green" />
<span className="title">TERMINAL</span>
</div>
{/* Scrollable output area */}
<div ref={bodyRef} className="terminal-body">
{lines.map((line, i) => (
<pre key={i}>{line}</pre>
))}
</div>
{/* Input area */}
<div className="terminal-input">
<span className="prompt">user@site:~$</span>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
/>
</div>
</div>
);
}