Tegaki

Handwriting animation for any font

Tegaki (手書き) turns any Google 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

Four handwriting fonts are bundled and ready to use:

• Caveat — tegaki/fonts/caveat
• Italianno — tegaki/fonts/italianno
• Tangerine — tegaki/fonts/tangerine
• Parisienne — tegaki/fonts/parisienne

For other Google 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

License

MIT