Skip to content

tildemark/kanamask

Repository files navigation

🎭 KANA-MASK (カナ-マスク)

Next.js PWA Tailwind CSS Docker

KANA-MASK is a specialized identity obfuscation utility for gamers. It converts standard English usernames into visually similar "Pseudo-Japanese" text (Henohenomoheji style), creating unique, cryptic handles for gaming profiles.

🔴 Live Demo

🚀 Deployed at: https://kana.sanchez.ph


⚡ Features

  • Real-time Obfuscation: Instantly converts text as you type.
  • Dual Complexity Modes:
    • Basic: Uses Katakana/Hiragana for a cleaner look.
    • Elite: Uses complex Kanji and Radicals for a "Heavy Industry" aesthetic.
  • PWA Support: Installable on mobile devices (iOS/Android) with offline capabilities.
  • Smart Sharing:
    • Tap Card: Instantly copies only the username (for game lobbies).
    • Share Button: Uses the native mobile Share Sheet to send the app to friends.
  • Dynamic Assets: Open Graph images and App Icons are generated on the fly via code.
  • Mobile First: Responsive "Cyberpunk" UI designed for phones and tablets.

🧩 Visual Mapping Logic

This tool does not translate phonetically. It translates based on visual silhouette.

English Character Source Visual Logic
A Kanji (Gather) Sharp peaked roof
L Radical (Hidden) Sharp 90-degree angle
R Katakana (Ma) Top-heavy 'R' curve
V Katakana (Re) Slanted checkmark shape
W Kanji (Mountain) Inverted 'W' / Trident
X Kanji (Shears) Crossing blades

🛠️ Tech Stack

  • Framework: Next.js 14 (App Router)
  • Styling: Tailwind CSS
  • PWA: next-pwa + Web Manifest
  • Containerization: Docker (Multi-stage build)
  • Registry: GitHub Container Registry (GHCR)
  • Architecture: Multi-arch support (AMD64 & ARM64/Ampere)

🚀 Deployment (Portainer / Docker)

This project is optimized for self-hosting on Portainer, specifically tested on Oracle Cloud Ampere (ARM64) instances.

1. Docker Compose (Stack)

Use this configuration in your Portainer Stack editor:

services:
  app:
    image: ghcr.io/tildemark/kanamask:latest
    container_name: kana-mask
    restart: unless-stopped
    networks:
      - net

# Assumes you have an external network named 'net' for Nginx Proxy Manager
networks:
  net:
    external: true

2. GitHub Package Visibility (Crucial)

If Portainer fails to pull the image with manifest unknown or access denied:

  • Go to your GitHub Profile → Packages.
  • Select kanamask.
  • Settings → Change visibility → Public.

💻 Local Development

To run this project locally on your machine:


📂 Project Structure

├── app/
│   ├── icon.tsx           # Dynamic PWA Icon generator
│   ├── layout.tsx         # Root layout + Metadata
│   ├── opengraph-image.tsx # Dynamic Social Preview
│   └── page.tsx           # Main UI & Logic
├── public/
│   └── manifest.json      # PWA Manifest
├── utils/
│   └── converter.ts       # Character Mapping Logic
├── Dockerfile             # Production Image Build
└── next.config.mjs        # PWA & Docker Config

🤝 Contributing

Contributions are welcome! If you find a Japanese character that looks more like an English letter than our current mapping, please open an Issue or Pull Request.


📄 License

Distributed under the MIT License.

About

KANA-MASK (カナ-マスク)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors