The Keyboard No One Asked For
I built this silly ASCII keyboard for my bloq homepage and people seemed to really enjoy clicking around on it. I originally wanted to leverage AI to build cool ASCII visuals, but I wasn't fully satisfied with the outputs just yet. So, I built this one the old-fashioned way.
It’s not just a static image—it’s actually a little guessing game. If you look closely, there's a phrase hidden in the brackets. You can click the keys on the ASCII board to guess letters, like Hangman or Wordle, but for hackers.
<SeedingPlant /> component for his own personal site. That got me thinking—why not start publishing my handwoven components here? I’ve also baked in some distinct interaction design feedback from Adil to make it feel tactile and responsive.[!NOTE] It only listens to mouse clicks. I’ve seen how tools like Perplexity occasionally override your Cursor shortcuts or steal focus, and I didn’t want my tiny ASCII keyboard to become that kind of annoyance.
Hidden Mechanics (Easter Eggs)
I love little details that reward curiosity. There are two hidden interactions in this component:
- [Esc] to Reset: Clicking the
[Esc]key wipes the board clean and resets the game state. - Spacebar Peek: Hovering over the
[________________________](spacebar) momentarily reveals the correct answer, letting you "peek" if you're stuck.
Use Cases
Why would you want an ASCII keyboard component?
- Interactive Intros: A unique way to present a "Hello World" or personal slogan.
- Portfolio Easter Eggs: Something for developers to find and play with.
- Terminal-Style Pages: Fits perfectly in a brutalist or retro-terminal design aesthetic.
- Minimalist Games: A foundation for text-based adventures without needing Canvas or WebGL.
How It Works
The logic is surprisingly simple. It flows like this:
Click → Key.tsx (Animation) → useIntroGame.ts (Logic) → Guess State Update → Win Animation
The Logic
- Mapping: The game converts every letter in the answer string (e.g.,
[a]) to a standardized format. - The Answer: Stored as a string like
[ dont repeat yourself ]. - Win Condition: A strict equality check:
guess === answer.
Performance & Accessibility
- Performance: This component involves heavy string splitting and frequent re-renders during animations. It is intentionally playful and ornamental, not optimized for massive high-frequency render loops.
- Accessibility: ASCII art is inherently difficult for screen readers. Treat this component as ornamental UI, not core navigation.
Prerequisites
You'll need a couple of dependencies to make this work:
- React
- Motion (formerly Framer Motion) for the animations.
- Tailwind CSS for styling (optional, but used here).
The Code
I’ve separated the code like a responsible adult. Squash it all together if you’re feeling rebellious.
1. Constants (constants.ts)
First, we need the actual ASCII art string.
2. Sub-components
Key.tsx - Handles the individual key animations.
WinLights.tsx - Flashing lights when you win.
PhraseReveal.tsx - Shows the guessed phrase.
3. The Logic (useIntroGame.ts)
This hook manages the state of the game: keys clicked, the current guess, and the win condition.
4. The Board (AsciiBoard.tsx)
This parses the ASCII art string and renders the keys.
5. Putting it all together (index.tsx)
Finally, the main component exports it all.
Your Turn
If you dare to put this on your site, send me a link! I’m curious (and a little nervous) to see how my tiny ASCII keyboard fares in the wild.