Tegaki

Handwriting animation for any font

Tegaki (手書き) turns any font into animated handwriting. No manual path authoring. No native dependencies. Just pick a font.

Tegaki is awesome handwriting animation

Quick Start

1. Install

npm install tegaki

2. Use (React example)

import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';
function App() {   return (     <TegakiRenderer font={caveat} style={{ fontSize: '48px' }}>       Hello World     </TegakiRenderer>   ); }

That's it. The text draws itself stroke by stroke with natural timing.

Command Line

Don't want to wire up a component? Generate an animated handwriting SVG straight from your terminal — nothing to install:

npx tegaki "Tegaki is awesome"

This writes a self-drawing, looping tegaki-is-awesome.svg — drop it into a README, a slide, or any page. Pick a font, mode, size, or color:

npx tegaki "Hello World" --font tangerine --mode once -o hello.svg
npx tegaki "ABC" --stagger 80% --size 140 --color "#222"

--mode is loop (repeats forever, the default), once (draws itself a single time), or static (finished artwork). Run npx tegaki --help for every option and --list-fonts for the bundled fonts. The CLI emits SVG only — for PNG, GIF, or WebM use the interactive studio.

Framework Support

Tegaki works with all major frameworks:

import { TegakiRenderer } from 'tegaki/react';   // React
import { TegakiRenderer } from 'tegaki/svelte';  // Svelte
import { TegakiRenderer } from 'tegaki/vue';     // Vue
import { TegakiRenderer } from 'tegaki/solid';   // SolidJS

---
import TegakiRenderer from 'tegaki/astro';       // Astro
---

import { TegakiEngine } from 'tegaki/core';      // Vanilla JS
import { registerTegakiElement } from 'tegaki/wc'; // Web Components

Built-in Fonts

Several handwriting fonts are bundled and ready to use:

Caveat — tegaki/fonts/caveat (Latin)
Italianno — tegaki/fonts/italianno (Latin)
Tangerine — tegaki/fonts/tangerine (Latin)
Parisienne — tegaki/fonts/parisienne (Latin)
Suez One — tegaki/fonts/suez-one (Hebrew + Latin)
Amiri — tegaki/fonts/amiri (Arabic + Latin)
Tillana — tegaki/fonts/tillana (Devanagari + Latin)
Klee One — tegaki/fonts/klee-one (Japanese: kana + Kyōiku grade 1–2 kanji + Latin)
Nanum Pen Script — tegaki/fonts/nanum-pen-script (Korean: Hangul syllables + jamo + Latin)