Tegaki

Handwriting animation for any font

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

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.

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)

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

Documentation

Visit gkurt.com/tegaki 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