SkillAgentSearch skills...

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/Handwritten

README

<div align="center">

🖋️ Handwritten

<img src="public/images/logo.png" alt="Handwritten Logo" width="160" />

Transform digital text into organic, human-like handwriting instantly.

Vercel Deployment Version License: MIT PRs Welcome Security Policy

Launch the WorkshopFeaturesHow 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:

  1. Clone the Repository

    git clone https://github.com/ArshVermaGit/Handwritten.git
    cd Handwritten
    
  2. Install Dependencies

    npm install
    
  3. Environment Configuration Copy .env.example to .env and add your OpenRouter API key.

  4. Fire it Up!

    npm run dev
    

🛠️ Technical Architecture

<div align="center">

React Vite TailwindCSS JavaScript HTML CSS

</div>

| 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.


☕ 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">

GitHub LinkedIn Twitter Gmail

</div>
<p align="center"> Built with ❤️ by <strong>Arsh Verma</strong> </p>
View on GitHub
GitHub Stars10
CategoryContent
Updated1mo ago
Forks2

Languages

TypeScript

Security Score

95/100

Audited on Feb 27, 2026

No findings