# Tegaki: handwriting animation library and generator for any font

> Tegaki is an open-source handwriting animation library and generator for the web: it turns any font into text that writes itself stroke by stroke, in the order a hand would draw it.

Source: https://tegaki.ink/

Tegaki (手書き, Japanese for "handwriting") extracts the strokes of every glyph in a font (their order, direction and width) and draws them on a canvas over real, selectable text. Text is written stroke by stroke in the order a hand would write it, in any font: Latin, right-to-left, Indic and CJK scripts alike.

## Features

- Package: `tegaki` on npm (https://www.npmjs.com/package/tegaki), MIT licensed. Install with `npm i tegaki`. Source: https://github.com/gkurt/tegaki
- Entry points: `tegaki` or `tegaki/react` (React), `tegaki/svelte`, `tegaki/vue`, `tegaki/nuxt` (Nuxt module), `tegaki/solid`, `tegaki/astro`, `tegaki/wc` (`<tegaki-renderer>` custom element), `tegaki/core` (`TegakiEngine`, no framework), `tegaki/shaper-harfbuzz` (optional HarfBuzz text shaping). Remotion uses the React component directly.
- Bundled fonts (import from `tegaki/fonts/<name>`): `caveat` (Caveat, Latin), `italianno` (Italianno, Latin), `tangerine` (Tangerine, Latin), `parisienne` (Parisienne, Latin), `suez-one` (Suez One, Hebrew), `amiri` (Amiri, Arabic), `tillana` (Tillana, Devanagari), `atma` (Atma, Bengali), `klee-one` (Klee One, Japanese), `nanum-pen-script` (Nanum Pen Script, Korean), `lxgw-wenkai` (LXGW WenKai, Simplified Chinese).
- Any other font: generate a bundle in Tegaki Studio (https://tegaki.ink/studio/) and import its `bundle.ts`.
- Rendering: a canvas draws the strokes over real DOM text, so the text stays selectable, copyable and readable by screen readers.
- Time: uncontrolled (plays on its own, `speed`, `loop`, `catchUp` for streaming text), controlled (seconds or `'50%'`), or `'css'` (reads the `--tegaki-progress` custom property, e.g. from a scroll timeline).
- Effects: glow, wobble, pressure width, taper, per-stroke and whole-text gradients; custom `TegakiPlugin`s can reshape and paint strokes, and `createPlugin` gives one typed options and presets. `variationPlugin` makes each glyph a little different, `boilPlugin` makes the lines boil (hand-drawn animation shimmer), `annotatePlugin` underlines, circles, boxes, strikes or highlights the text once written, `textPathPlugin` lays it on an arc, a circle or a (flowing) wave, `captionPlugin` writes each word in time with speech from word timings; a fixed `seed` (default 0) draws the same every time, `seed: "random"` anew on each load.
- Writing systems: Latin; Hebrew and Arabic right to left with positional forms; Devanagari and Bengali with headlines drawn across the word; Japanese, Korean and Simplified Chinese in reference stroke order (KanjiVG, Make Me a Hanzi). Text is shaped with HarfBuzz.
- Editable text: with `editable`, the renderer takes input and writes each letter as it is typed.
- Streaming: update `text` as tokens arrive (for example from an LLM) and the pen continues from where it is.

## Install

```sh
npm i tegaki
```

## Quick start in every framework

### React

```tsx
import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';

export const Note = () => (
  <TegakiRenderer font={caveat} style={{ fontSize: 56 }}>
    Hello, world!
  </TegakiRenderer>
);
```

### Svelte

```svelte
<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import caveat from 'tegaki/fonts/caveat';
</script>

<TegakiRenderer font={caveat} text="Hello, world!"
  style="font-size: 56px" />
```

### Vue

```vue
<script setup>
import { TegakiRenderer } from 'tegaki/vue';
import caveat from 'tegaki/fonts/caveat';
</script>

<template>
  <TegakiRenderer :font="caveat" text="Hello, world!" />
</template>
```

### Solid

```tsx
import { TegakiRenderer } from 'tegaki/solid';
import caveat from 'tegaki/fonts/caveat';

export const Note = () => (
  <TegakiRenderer font={caveat} text="Hello, world!"
    style={{ 'font-size': '56px' }} />
);
```

### Astro

```astro
---
import TegakiRenderer from 'tegaki/astro';
import caveat from 'tegaki/fonts/caveat';
---

<TegakiRenderer font={caveat} text="Hello, world!" />
```

### Web Component

```html
<tegaki-renderer font="Caveat" text="Hello, world!">
</tegaki-renderer>

<script type="module">
  import { registerTegakiElement, TegakiEngine } from 'https://esm.sh/tegaki/wc';
  import caveat from 'https://esm.sh/tegaki/fonts/caveat';
  TegakiEngine.registerBundle(caveat);
  registerTegakiElement();
</script>
```

### Vanilla

```js
import { TegakiEngine } from 'tegaki/core';
import caveat from 'tegaki/fonts/caveat';

new TegakiEngine(document.querySelector('#note'), {
  font: caveat,
  text: 'Hello, world!',
});
```

## Generate a handwriting animation from any font

Tegaki Studio, a free handwriting animation generator in the browser: pick any Google Font or upload a .ttf/.otf, tune the strokes and timing, then export PNG, GIF, WebM, animated SVG, or a font bundle for your app. Open it at https://tegaki.ink/studio/.

## FAQ

### What is Tegaki?

Tegaki is an open-source (MIT) handwriting animation library and generator. It extracts the strokes, stroke order and stroke width of every glyph in a font, then animates text being written by hand on a canvas drawn over real, selectable DOM text.

### How do I add a handwriting animation to my website?

Install the package with `npm i tegaki`, import a font bundle such as `tegaki/fonts/caveat`, and render `<TegakiRenderer font={caveat}>Hello</TegakiRenderer>`. Adapters exist for React, Svelte, Vue, Nuxt, SolidJS, Astro, Web Components and vanilla JavaScript; Remotion renders the same animation to video.

### Can Tegaki animate any font?

Yes. Eleven fonts ship ready to import, and the free Tegaki Studio generates a bundle from any Google Font or your own .ttf/.otf file in the browser, with no server. Handwriting and script fonts look most natural, but any outline font works.

### Which languages and writing systems are supported?

Latin, Hebrew and Arabic (right to left, with positional forms), Devanagari and Bengali, Japanese, Korean and Simplified Chinese. Chinese, Japanese and Korean characters follow reference stroke order from KanjiVG and Make Me a Hanzi, and text is shaped with HarfBuzz.

### How is Tegaki different from an SVG stroke-dashoffset animation?

A stroke-dashoffset trick traces the outline of the letters, so the pen goes around each glyph twice. Tegaki animates the centerline of each stroke with its real width, in natural stroke order, and supports timeline control, streaming text, effects and every writing system above.

### Can I control or scrub the animation?

Yes. Pass `time` as seconds, a percentage such as `'50%'`, or `'css'` to read progress from the `--tegaki-progress` custom property, so the animation can follow a slider, a scroll timeline or a video frame. Uncontrolled mode plays on its own and can loop.

### Can I export a handwriting animation as a video, GIF or SVG?

Tegaki Studio exports PNG, GIF, WebM and animated SVG. For programmatic video, the Remotion integration renders handwriting frame by frame to MP4.

### Is Tegaki free?

Yes. The library, the bundled fonts (each under its own open font license) and the Studio are free; the code is MIT licensed on GitHub.

## Links

- Docs: https://tegaki.ink/getting-started/
- Studio: https://tegaki.ink/studio/
- GitHub: https://github.com/gkurt/tegaki
- npm: https://www.npmjs.com/package/tegaki