The clear button was unnecessary clutter - users can simply select and delete text in the input field if they want to clear it. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> |
||
---|---|---|
app | ||
.eslintrc.json | ||
.gitignore | ||
.prettierrc | ||
bun.lock | ||
CLAUDE.md | ||
justfile | ||
LICENSE | ||
lint-references.py | ||
package.json | ||
README.md | ||
server.py |
Ǧ̴̝̲̙̱̳̗̱͊̒̀̀̀l̶̰̲̯̗̾̊͌̀̊̃̓̚i̴̧̘͕̺͉̘̇̃̄̏͂̃͛̎̐t̷̢̨̙̗̞̯͖̗̳͌c̷̖͓̟̞͋h̷̨̻̝̻̩̼̤̣̟̓͗̑͝C̴̺̺̘͍̙̈͐̀̾̔̈́̒̃r̷̢̧̢̛̬̱̻̝̭̈́̍̐͒̇ā̸̤̜͌̓̋̉̓̉̚f̸̘̘̤͙̠̈́̐̍̀͋͊̕͝t̸̨̹̪̭̲̮̗̳̽̎
Artisanal text corruption, served fresh!
Transform your boring text into b̴̧̧̯̰̲̤̫̲͇̅̀̓̆̈́̈́̄̀e̵̫̥̱̿̾̊̉͊́̚a̸̫̺̘̤̰̝̿̐̍͗̇̋u̸̢̳̝̯̲̮̦̇̍̔̈́̎̊t̸̨̲̘̺̹̙̋͆̀̅̚i̸̧̦̩̥̫̭̬̍̑̎́̒f̵̰̰̺̹̤̋ù̴̧̡̢̘̱̇͛̉̇̂͌l̶̺̩̰̥̀̉̄̄̈́͝ć̵̨̧̦̞̤̤̠̃́̔̀͝h̴̭̙̋̊̾͛́a̴̻̦̹̰̖̅̀͌̃ō̴̳̜̝̮͇͍̄̓̋͌̍̔s̷̘̺̤̩͂̽̌̅̈͠! GlitchCraft is a Progressive Web App that generates zalgo text using Unicode combining characters.
✨ F̴̛̪̞̯̀̔́ͅe̷̮̮̗̣̎a̸̤̺̜̾̃̓͜t̶̛̘̝̾u̴̢̬͇̒ṛ̴̭̖̈́e̷̲̺̔̓͝ş̷̝̑̀
- 🎨 Six Corruption Modes: From subtle glitches to complete chaos
- 📱 Mobile-First Design: Perfect experience on all devices
- ⚡ Real-Time Generation: See corruption as you type
- 📋 One-Click Copy: Tap the output to copy instantly
- 🔧 Adjustable Intensity: Fine-tune your chaos level (1-10)
- 💾 PWA Ready: Install as an app, works offline
- 🌐 Universal Support: Works on all modern browsers
🎭 Corruption Modes
Mode | Example | Description |
---|---|---|
Full Chaos | ĥ̵̝̮̀è̸̘̩l̴̹̩̔l̵̲̎ô̶̰ ̷̳̎w̸̰̄o̶̜̅r̷̰̄l̴̨̾d̶̰̈ | Balanced corruption above, middle, and below |
Above Only | h̸̘̤́ë̸́l̴̮̆l̸̘̀ö̴́ ̶̘̀w̴̮̌ö̴́ř̶̰l̴̮̀d̸̮̆ | Marks above characters only |
Below Only | h̴̖̆ë̵l̵̰l̵̲ö̴ ̷̰w̴̰ö̴̰r̴̲l̵̲d̴̰ | Marks below characters only |
Middle Only | h̶e̷l̷l̶o̵ ̴w̵o̴r̷l̴d̵ | Marks overlaying characters |
Mini Glitch | ḧ̴e̵l̴l̷o̵ ̴w̶o̴r̷l̴d̵ | Subtle corruption |
Heavy Corruption | h̸̨̬̘̤̖̱̗̘̄̀́̌̈́̀̇̚ë̴̛̖̘̩̰̱̳̤́̓̒̚l̷̢̧̰̲̫̲̝̹̈́̔̃̀̈́̇̚l̴̢̧̰̲̫̲̝̹̈́̔̃̀̈́̇̚ö̴́̓̒̚ ̷̰̔̈́w̸̰̄̌ö̴́̓̒̚r̷̰̄̌l̴̰̔̈́d̶̰̈́̌ | Maximum chaos overload |
🚀 Quick Start
🌐 Online
Visit the deployed app at: [Your deployment URL]
💻 Local Development
# Clone the repository
git clone <your-repo-url>
cd zalgo
# Install dependencies
just install
# or: bun install
# Start development server
just serve
# or: python3 server.py
# Open http://localhost:8000
🛠️ Development
Prerequisites
- Bun (for dependencies and linting)
- Python 3 (for development server)
- Just (for task automation, optional)
Available Commands
# Development
just serve # Start development server
just serve-bg # Start server in background
just stop # Stop background server
# Code Quality
just lint-all # Lint JavaScript and Python
just format-all # Format all code
just check-all # Run all linting and validation
# Testing & Validation
just validate # Full validation suite
just validate-references # Check file references exist
just validate-html # Validate HTML (requires Java)
just validate-manifest # Validate PWA manifest
# PWA Icons
just icons-png # Generate PNG icons (requires canvas)
just icons-browser # Open browser icon generator
# Project Info
just info # Show project information
just status # Check server status
📱 Mobile Experience
GlitchCraft is designed mobile-first with:
- Touch-optimized controls with larger touch targets
- Responsive layout that adapts from 320px to 4K
- iOS zoom prevention with proper font sizes
- Haptic feedback for copy actions (where supported)
- Full-screen support when installed as PWA
- Offline functionality via service worker
Mobile Features
- Tap output text to copy instantly
- Swipe-friendly interface
- Portrait and landscape support
- Works great on tablets
🔧 Technical Details
Architecture
- Pure JavaScript - No frameworks, maximum performance
- Service Worker - Full offline support with cache-first strategy
- Progressive Enhancement - Works without JavaScript
- Accessible - Screen reader compatible, keyboard navigation
Zalgo Algorithm
The corruption engine uses Unicode combining diacritical marks from three categories:
- Above (U+0300-U+036F): Accents and marks above characters
- Middle (U+0315-U+0489): Overlaying marks
- Below (U+0316-U+0359): Marks below characters
Each mode strategically applies different combinations for unique effects.
Browser Support
- ✅ Chrome/Chromium 88+
- ✅ Firefox 85+
- ✅ Safari 14+
- ✅ Edge 88+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
🥚 Hidden Easter Eggs
GlitchCraft contains several hidden easter eggs for the curious:
🌩️ "He Comes" Mode
- Trigger: Type
he comes
orzalgo
- Effect: Auto-switches to Heavy Corruption with max intensity + red flash
- Reference: Original zalgo creepypasta
🔍 404 Text Not Found
- Trigger: Type
404
- Effect: Shows "T̷̢̧e̴̢̧x̷̰t̸̨̧ ̷̢̧n̴̢̧o̷̰t̸̨̧ ̷̢̧f̴̢̧o̷̰ų̸̧n̷̢̧d̴̢̧"
- Bonus: Copy notification says "Error copied successfully!"
💊 Matrix Mode
- Red Pill: Type
red pill
→ Heavy corruption + red tint + "Welcome to the real world" - Blue Pill: Type
blue pill
→ Calm mode + blue tint + "You chose... wisely" - Reference: The Matrix (1999)
👨💻 Developer Credits
- Trigger: Type
credits
OR click the title 10 times rapidly - Effect: Shows corrupted developer credits
🌙 Witching Hour (3:33 AM)
- Trigger: Use the app at exactly 3:33 AM (any timezone)
- Effect: Dark theme + screen shake + subtitle becomes "T̷̢̧h̴̢̧ḛ̷ ̸̨̧w̷̢̧i̴̢̧t̷̰c̸̨̧h̷̢̧i̴̢̧n̷̰g̸̨̧ ̷̢̧h̴̢̧o̷̰ų̸̧r̷̢̧"
- Duration: Lasts for 1 minute
📱 Mobile Shake
- Trigger: Shake your phone/device
- Effect: Random corruption mode + intensity + haptic feedback
- Message: "S̷̢̧h̴̢̧a̷̰k̸̨̧e̷̢̧n̴̢̧,̷̰ ̸̨̧n̷̢̧o̴̢̧t̷̰ ̸̨̧s̷̢̧t̴̢̧ḭ̷r̸̨̧r̷̢̧e̴̢̧d̷̰"
- Note: Requires device motion permissions on iOS
🎨 Examples
Here are some z̴̳̈a̸̭̾l̵̰̔g̶̱̈ó̴̬ ̷̲̎t̸̰̄e̶̮̾x̷̲̄ẗ̴̰ examples:
Normal Text → Corrupted
Hello World → H̸̖̄e̶̮̾l̵̰̔ḻ̶̈ó̴̬ ̷̲̎W̸̰̄ö̶̮̾r̵̰̔ḻ̶̈d̴̬̈
Welcome to GlitchCraft → Ẁ̴̛̪̞̯̔́ͅe̷̮̮̗̣̎l̴̹̩̔c̸̘̩̀ö̴̝̮̀m̵̲̎ë̸̘̩ ̶̰̔t̷̳̎ő̶̰ ̴̨̾G̴̮̀l̸̘̀i̵̲t̴̖̆c̵̰h̴̘Č̶̮r̴̮̀a̵̲f̴̰t̸̮̆
The quick brown fox → T̷̨̄h̶̨̍ë̴́ ̵̌q̷̇ű̴i̸̇c̸̈ǩ̶ ̴̈b̵̄ř̷ö̴́ẇ̸n̶̈ ̴̌f̷̄ö̴́ẋ̸
Heavy Corruption Mode
CHAOS → C̸̨̧̬̘̤̖̱̗̘̄̀́̌̈́̀̇̚Ḧ̷̢̧̰̲̫̲̝̹́̔̃̀̈́̇̚Ä̴̢̧̰̲̫̲̝̹́̔̃̀̈́̇̚Ö̷̰́̓̒̚S̷̰̔̈́
🤝 Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Run
just check-all
to ensure quality - Submit a pull request
📄 License
MIT License - Feel free to use this for your own projects!
🎭 Fun Facts
- The name "zalgo" comes from a creepypasta character
- Unicode combining characters were designed for legitimate text rendering
- GlitchCraft generates infinite unique corruptions
- The glitch animations are pure CSS - no JavaScript!
- Works offline once loaded (thanks to service worker)
Made with ❤️ and ḉ̴̨̧̰̲̫̲̝̹̈́̔̃̀̈́̇̚h̷̰̔̈́ä̸̰́̌ō̶̰̔̈́s̷̰̔̈́
Transform your text, embrace the glitch, spread the chaos!