Tegaki

Handwriting animation for any font

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

Website & docs · Try it in the studio

---

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"
npx tegaki "مرحبا بالعالم" --font amiri --stroke-easing ease-in-out-cubic
npx tegaki "Glow" --plugins '[["glow", {"radius": 0.12, "color": "#f0a"}], "taper"]'

--mode is loop (repeats forever, the default), once (draws itself a single time), or static (finished artwork). The CLI shapes text with harfbuzz (bundled as WASM) the way the renderer does, so ligatures, Arabic joining, Devanagari and right-to-left text come out right, and it clips strokes to the letter outlines as the studio does. 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)
• Atma — tegaki/fonts/atma (Bengali + Latin)
• LXGW WenKai — tegaki/fonts/lxgw-wenkai (Simplified Chinese: the 1000 most frequent hanzi + Latin)
• Hershey Script — tegaki/fonts/hershey-script (Latin, single-line: a plotter font drawn in its own pen strokes)
• EMS Allure — tegaki/fonts/ems-allure (Latin, single-line: Evil Mad Scientist's stroke version of Allura)

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

Documentation

Visit tegaki.ink for full documentation:

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

Integrations

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

License

MIT