Tegaki

Handwriting animation for any font

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

npm license

Tegaki is awesome handwriting animation

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.

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.

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

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)
• Atma — tegaki/fonts/atma (Bengali + Latin)

For other fonts, use the interactive studio to create a custom bundle.

Visit gkurt.com/tegaki for full documentation:

• Getting Started
• Framework Guides (React, Svelte, Vue, SolidJS, Astro, Web Components, Vanilla)
• Generating Fonts
• API Reference

• Sli.dev - Create presentations using markdown. See Tegaki integration example
• Remotion - Create videos programmatically with React. See Tegaki integration example

MIT