Apppublic

banao-tech/handwriting-vizualization

sourceHugging Faceupdated 2mo agoView on Hugging Face

0likes

App README

✒️ Vidya v3 · Handwritten Visualization & Diagram Engine

An interactive, production-ready handwriting and diagram animation engine built for headless video generation (AWS ECS Fargate) and interactive web presentations.

🌟 Highlights & Features

—🎨 Zero-Canvas / Zero-WebGL: Built 100% on HTML5, SVG path morphing, and CSS clip-path keyframes. Guaranteed 60fps Playwright video capture without GPU hardware requirements.
—✒️ Tegaki Per-Character SVG Animation: Real-time handwriting simulation with stroke-order sweeps, variable pen pressure, and chalk-dust particles.
—📐 Rule-Based Diagram Generator: Auto-compiles markdown slides into centered Flowcharts, Timelines, Stack Diagrams, and Neural Network Topologies.
—🌓 Dual Theme Engine: Switch seamlessly between Modern SCN Whiteboard and Midnight Blackboard modes.
—🔒 100% Offline / ECS Container Compatible: Zero CDN dependencies, offline embedded font system, Base64 fallback assets.

🏗️ Architecture Overview

mermaid

graph TD
    A[Markdown Slide Input] --> B[Slide Classifier]
    B -->|render_mode: handwritten| C[Lesson Action Generator]
    B -->|render_mode: handwritten_diagram| D[Diagram Action Generator]
    C --> E[HandwritingRenderer JS]
    D --> E[HandwritingRenderer JS]
    E --> F[Playwright Headless Chrome]
    F --> G[MP4 Video Output]

🕹️ Interactive Web Controls (Live Demo)

—🎬 Topic / Slide Selector: Jump directly to any of the 7 interactive demo slides.
—⊞ Theme Toggle: Switch between SCN Whiteboard, Blackboard, and Midnight themes.
—✒️ Stroke Mode: Toggle between Tegaki SVG and CSS Clip-Path fallback engines.
—🐢 ✏️ ⚡ Writing Speed: Adjust animation speed in real-time (22 cps $\rightarrow$ 90 cps).

📄 License & Credits

Developed by Vidya AI Video Generation Team. Built with HTML5, SVG, and CSS3.