Handwritten
🖋️ Transform digital text into realistic handwriting with AI-powered humanization. Privacy-first web app featuring procedural rendering, organic jitter simulation, and intelligent pagination. No server storage—everything runs in your browser. Perfect for assignments, notes, and authentic handwritten documents. ⚡ Fast • 🔒 Secure • 🎨 Realistic.
Install / Use
/learn @ArshVermaGit/HandwrittenREADME
🖋️ Handwritten
<img src="public/images/logo.png" alt="Handwritten Logo" width="160" />Transform digital text into organic, human-like handwriting instantly.
Launch the Workshop • Features • How it Works
</div>🎨 What is Handwritten?
Handwritten is a high-performance web application that leverages procedural rendering and AI to convert typed text into realistic, organic handwriting. Version 2.0, the "Atmospheric Update", introduces a premium visual layer and a sophisticated rendering engine that ensures every character feels uniquely human.
🌟 Key Features (v2.0)
- Atmospheric Rendering Engine: A unified visual system featuring fluid mesh gradients and a subtle micro-dot grid for a premium aesthetic.
- Premium 3D Depth: Multi-layered shadow systems and elevation markers that provide a tangible sense of hierarchy.
- AI Humanization Engine: Integrated with OpenAI's GPT-4o-mini via OpenRouter to inject natural phrasing and spontaneous "human" rhythm into your text.
- Deterministic Randomness: Characters are offset dynamically using hash seeds, ensuring stylistic consistency across sessions.
- High-Fidelity Export: Seamlessly export your creations as multi-page PDFs or high-resolution image ZIPs, all processed locally for maximum privacy.
🚀 Quick Start
Get your local handwriting workshop running in less than 2 minutes:
-
Clone the Repository
git clone https://github.com/ArshVermaGit/Handwritten.git cd Handwritten -
Install Dependencies
npm install -
Environment Configuration Copy
.env.exampleto.envand add your OpenRouter API key. -
Fire it Up!
npm run dev
🛠️ Technical Architecture
<div align="center">
| Layer | Technology | | :------------- | :------------------------------------------------------------------------------------------ | | Framework | React + Vite | | Styling | Tailwind CSS (Standardized Utility System) | | Animations | Framer Motion (Global Orchestration) | | State | Zustand (Store & Persist) | | Rendering | html2canvas + jsPDF |
🤝 Community & Development
Handwritten is built by the community, for the community. We've made our repository 100% contributor-friendly.
- 📖 Contribution Guide: Our standards for code, branching, and PRs.
- 🛡️ Security Policy: How to report vulnerabilities safely.
- 📜 Code of Conduct: Standards for a healthy community.
- ❓ Support Guide: Finding help and asking questions.
- 📜 MIT License: Open and free to use.
☕ Support the Project
If you find this tool helpful and want to support its development, consider buying me a coffee! Your support helps keep the project alive and free.
<div align="center"> <a href="https://www.buymeacoffee.com/ArshVerma"> <img src="public/images/buy-me-a-coffee.png" width="200" /> </a> </div>📱 Connect with Me
I'd love to hear your feedback or discuss potential collaborations!
<div align="center"> </div><p align="center"> Built with ❤️ by <strong>Arsh Verma</strong> </p>
