๐ข Hacker Style Font Generator | Cyberpunk Terminal
[](https://github.com/AyhanMansur/dowinb)
[](https://github.com/AyhanMansur/dowinb)
> **Transform boring text into cool `๐๐๐ฅ๐๐๐๐๐ฅ๐๐๐๐ ๐ป๐ ๐ฆ๐๐๐-๐๐ฅ๐ฃ๐ฆ๐๐` Unicode characters.**
> ๐ **Zero Dependencies** | ๐จ **Cyberpunk UI** | ๐ฑ **Mobile Optimized**
[โจ **Try Live Demo**](https://ayhanmansur.github.io/Font-Generator-CyberpunkTerminal/) | ๐ **Features** | ๐ ๏ธ **Installation** | ๐ **License**
๐ธ Visual Preview
*The Cyberpunk Terminal Interface in Action*
๐ง What is this?
This is a client-side web application that converts standard ASCII text into Unicode Mathematical Symbols. Unlike other tools, this project features a full Cyberpunk/Hacker aesthetic with:
- Matrix Rain Background: A real-time HTML5 Canvas animation.
- CRT Screen Effects: Scanlines, curvature, and flicker.
- Typing Animation: The output โtypesโ itself character by character.
- Universal Compatibility: Works on iOS Safari, Android Chrome, and Desktop Browsers.
Perfect for:
- ๐ง Termux / Linux Users who want cool profile names.
- ๐ฎ Gamers looking for unique Discord or Steam names.
- ๐ฑ Social Media users wanting to stand out on Instagram/TikTok.
- ๐จ Designers needing quick Unicode references.
โจ Key Features
๐จ Aesthetic Overload
- Neon Green Theme: Classic Hacker green (
#00ff00) with glow effects.
- Glitch Animations: Titles and buttons have a cyberpunk glitch effect.
- CRT Overlay: Simulates an old-school monitor with scanlines and flicker.
- Instant Conversion: No API calls, no server latency. Everything happens in the browser.
- Typing Effect: The output text appears letter-by-letter for a cool โhackingโ feel.
- Smart Copy: Uses the modern Clipboard API with a robust fallback for older browsers.
- Responsive Design: Uses
vmin units to ensure perfect scaling on phones, tablets, and 4K TVs.
- โ
iOS Safari: Fixed clipboard issues specific to iOS.
- โ
Android Chrome: Optimized for touch screens.
- โ
Desktop: Keyboard shortcuts and hover effects.
๐ Quick Start
No installation required! This is a static site.
Option 1: Run Locally (Desktop)
- Clone the repo:
https://github.com/AyhanMansur/Font-Generator-CyberpunkTerminal.git
- Open
index.html in your browser.
- Start hacking! ๐ฅ๏ธ
๐ ๏ธ Tech Stack
This project is built with pure vanilla technologies to ensure maximum performance and minimal file size.
| Technology |
Usage |
| HTML5 |
Semantic structure, Canvas API for Matrix rain. |
| CSS3 |
Flexbox, Grid, Keyframe animations, Custom Properties. |
| JavaScript (ES6) |
DOM manipulation, Unicode mapping, Clipboard API. |
| Unicode Standard |
Mathematical Alphanumeric Symbols block. |
๐งช How It Works (Under the Hood)
1. The Unicode Mapping
The core logic maps standard characters to their Mathematical Double-Struck Unicode counterparts.
| Input |
Output |
Unicode Code Point |
A |
๐ธ |
U+1D538 |
b |
๐ |
U+1D553 |
1 |
๐ |
U+1D7D9 |
@ |
@ |
U+0040 (No change) |
2. The Matrix Rain
A lightweight HTML5 Canvas script runs in the background. It draws falling characters (0 and 1) with a fade effect to create the trail.
3. The Typing Effect
JavaScript uses setInterval to append characters to the output div one by one, simulating a real-time terminal output.
๐ Project Structure
```text
termux-font-generator/
โโโ index.html # Main HTML structure
โโโ style.css # Cyberpunk styles, CRT effects, animations
โโโ script.js # Logic: Mapping, Matrix Rain, Copy, Typing
โโโ README.md # This file
โโโ assets/
โโโ preview.gif # GIF showing the tool in action
โโโ matrix-bg.gif # GIF of the background animation
@ ๐๐๐ฑ๐ช๐ท ๐๐ช๐ท๐ผ๐พ๐ป ๐ฟ