Font-Based Handwriting Text Animation for the Web – Tegaki

Tegaki is a JavaScript handwriting animation library that turns font glyphs into stroke-by-stroke text animations.

It ships a vanilla JavaScript engine plus adapters for React, Vue, Nuxt, Svelte, SolidJS, Astro, and Web Components.

The renderer builds handwriting from font data and follows the chosen typeface directly. Hand-authored SVG strokes are unnecessary.

Features:

• Stroke-by-stroke handwriting generated from font data.
• 13 built-in font bundles for Latin, Hebrew, Arabic, Devanagari, Japanese, Korean, Bengali, and Simplified Chinese text.
• Vanilla JavaScript plus React, Vue, Nuxt, Svelte, SolidJS, Astro, and Web Component integrations.
• Uncontrolled, controlled, and CSS-driven time modes.
• Streaming text playback with configurable catch-up behavior.
• Pressure control and ordered plugins for glow, taper, gradients, variation, line boil, and annotations.
• Deterministic seeded rendering for repeatable output.
• Animated and static SVG export from the renderer or command line.
• Optional HarfBuzz shaping for ligatures, Arabic joining, Indic scripts, and complex text layout.
• Custom bundles from Google Fonts or uploaded TTF/OTF files in Tegaki Studio.

See It In Action:

Use Cases:

• Signature-style logos and hero headings that need to match an existing typeface.
• Remotion titles whose handwriting follows video time frame by frame.
• Streaming chat responses that keep writing as new chunks arrive.
• Self-drawing SVG text for READMEs, slides, and static pages.

How To Use It:

1. Install Tegaki

# npm
npm install tegaki
# yarn
yarn add tegaki
# pnpm
pnpm add tegaki
# bun
bun add tegaki

2. Use the Web Component from a CDN

Your static page can load the Web Component and a font bundle through ESM imports.

<tegaki-renderer
  font="Caveat"
  text="Hello, world!"
  style="font-size: 56px"
></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>

3. Render Handwriting with Vanilla JavaScript

Import TegakiEngine from tegaki/core and pass a font bundle to the constructor.

<div id="handwriting" style="font-size: 56px"></div>
<script type="module">
  import { TegakiEngine } from 'tegaki/core';
  import italianno from 'tegaki/fonts/italianno';
  const engine = new TegakiEngine(
    document.getElementById('handwriting'),
    {
      text: 'Welcome Back',
      font: italianno,
      time: { mode: 'uncontrolled', speed: 1, loop: false },
    }
  );
</script>

4. Render Handwriting in React

Import the React renderer from tegaki and pass a font bundle.

import { TegakiRenderer } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';
function SignatureHero() {
  return (
    <TegakiRenderer
      font={caveat}
      time={{ mode: 'uncontrolled', speed: 1, loop: true }}
      style={{ fontSize: 48 }}
    >
      Your Name Here
    </TegakiRenderer>
  );
}

5. Framework Entry Points

6. Configure Nuxt

The Nuxt module auto-imports <TegakiRenderer> and wires the Vue adapter into SSR and client rendering.

export default defineNuxtConfig({
  modules: ['tegaki/nuxt'],
});

7. Style the Handwriting with CSS

Tegaki reads font-size, line-height, color, and letter-spacing from the renderer container.

#handwriting {
  font-size: 64px;
  line-height: normal;
  color: #242424;
  letter-spacing: 0.03em;
}

8. Style the Ink with Plugins

import {
  glowPlugin,
  strokeGradientPlugin,
  taperPlugin,
  variationPlugin,
} from 'tegaki/core';
const plugins = [
  taperPlugin(),
  variationPlugin(),
  strokeGradientPlugin(),
  glowPlugin({ radius: 0.1, color: '#00ccff' }),
];
const engine = new TegakiEngine(container, {
  text: 'Handwritten',
  font: caveat,
  pressure: 0.8,
  plugins,
});

9. Control the Animation from JavaScript

Pass seconds directly to time, use a percentage string for progress, or pass a controlled-time object when another timeline owns playback.

const engine = new TegakiEngine(container, {
  text: 'Scrub me',
  font: caveat,
  time: 0,
});
// Seek to a time in seconds.
engine.update({ time: 1.25 });
// Or seek by progress.
engine.update({ time: '50%' });
// Equivalent controlled object.
engine.update({
  time: {
    mode: 'controlled',
    value: 0.75,
    unit: 'progress',
  },
});

10. Read the Timeline Duration

Use computeTimeline() when external playback needs the natural duration before a renderer starts.

import { computeTimeline } from 'tegaki';
import caveat from 'tegaki/fonts/caveat';
const { totalDuration } = computeTimeline('Handcrafted', caveat);

11. Drive the Animation with CSS

Set time to 'css' and animate --tegaki-progress from 0 to 1. This works with normal CSS animation timelines, including scroll-driven timelines in browsers that implement them.

<tegaki-renderer
  class="scroll-writing"
  font="Caveat"
  text="Scroll to write"
  time="css"
></tegaki-renderer>

@keyframes tegaki-progress {
  from { --tegaki-progress: 0; }
  to { --tegaki-progress: 1; }
}
.scroll-writing {
  animation-name: tegaki-progress;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: cover 10% cover 70%;
}

12. Animate Streaming Text

Update text as chunks arrive. catchUp increases playback speed when buffered text grows.

const writer = new TegakiEngine(container, {
  font: caveat,
  time: {
    mode: 'uncontrolled',
    speed: 4,
    catchUp: 0.5,
  },
});
let response = '';
function appendChunk(chunk) {
  response += chunk;
  writer.update({ text: response });
}

13. Register a Font Bundle by Name

Register a bundle once when later renderers need to reference it by its family name.

import { TegakiEngine } from 'tegaki/core';
import caveat from 'tegaki/fonts/caveat';
TegakiEngine.registerBundle(caveat);
const engine = new TegakiEngine(container, {
  text: 'Thank you',
  font: 'Caveat',
});

14. Pre-render Tegaki Markup for SSR

TegakiEngine.renderElements() creates the renderer tree for a server renderer. The browser can adopt that pre-rendered content with adopt: true.

const { rootProps, content } = TegakiEngine.renderElements(
  { text: 'Server Rendered Note', font: caveat },
  createElement
);
// Render rootProps on the container and content inside it
// with your server renderer.
// In the browser:
const engine = new TegakiEngine(container, {
  adopt: true,
  text: 'Server Rendered Note',
  font: caveat,
});

15. Generate an Animated SVG from the Command Line

The CLI writes SVG only and uses bundled HarfBuzz shaping. Tegaki Studio exports PNG, GIF, and WebM when raster or video output is required.

npx tegaki "Tegaki is awesome"
npx tegaki "Hello World" --font tangerine --mode once -o hello.svg
npx tegaki "Glow" --plugins '[["glow", {"radius": 0.12, "color": "#f0a"}]]'

Renderer Options:

Time Control Options

Timeline Options

Quality Options

Nuxt Module Options

Built-in Plugins:

Built-in plugin factories come from tegaki/core. Plugin order affects the final render. Register plugin factories when configuration must use plain names in HTML attributes, Astro props, or CLI data.

glowPlugin / glow

taperPlugin / taper

strokeGradientPlugin / strokeGradient

globalGradientPlugin / globalGradient

variationPlugin / variation

Presets: Subtle, Loose, and Signature.

boilPlugin / boil

Presets: Cartoon, Nervous, and Sketchy.

annotatePlugin / annotate

Custom Plugin Hooks:

TegakiEngine API:

Constructor

Static Methods

Instance Properties

Instance Methods

SVG Export Options

Additional Public Core APIs:

Built-in Font Bundles:

Most built-in bundles can load their source font as fallback text when a character has no stroke data. LXGW WenKai ships the generated subset only; configure fallbackFont for characters outside that subset.

Custom Font Bundles:

Tegaki Studio accepts Google Fonts and uploaded .ttf or .otf files. Download the generated bundle and import its bundle.ts file in place of a built-in font import.

import customFont from './output/my-font/bundle';

Text Shaping:

Complex scripts and OpenType features can use the optional HarfBuzz shaper. Install harfbuzzjs before importing tegaki/shaper-harfbuzz.

npm install harfbuzzjs

import { TegakiEngine } from 'tegaki/core';
import harfbuzzShaper from 'tegaki/shaper-harfbuzz';
TegakiEngine.registerShaper(harfbuzzShaper);

Migrating from the Old effects API:

The stable 1.x API removes effects. Existing effect configuration must move to plugins and pressure.

Alternatives & Related Resources:

• Latest Free Text Animations In Pure JavaScript And CSS
• Create Handwritten SVG Text Animations in JavaScript – Khoshnus.js
• Animate Text Using SVG Font – svg-text-animate.js
• 10 Best Typewriter Text Animation JavaScript Libraries (2026 Update)
• JavaScript Library For Beautiful Smooth Text Animations – TxtAnime.js

FAQs:

Q: Why does Tegaki lay out text in Vite but fail to draw the handwriting?
A: Vite 7 and earlier can pre-bundle Tegaki in a way that breaks the relative font URL. Exclude tegaki from dependency optimization and restart the dev server.

export default defineConfig({
  optimizeDeps: {
    exclude: ['tegaki'],
  },
});

Q: What does Astro need for server-rendered font bundles?
A: Use the Astro integration in astro.config.mjs. It lets Vite emit bundled fonts as assets and resolves their public URLs during server rendering.

import { defineConfig } from 'astro/config';
import tegaki from 'tegaki/astro/integration';
export default defineConfig({
  integrations: [tegaki()],
});

Q: Why does a registered plugin name fail to resolve?
A: Name-based plugins are not registered automatically in framework renderers. Register each factory with TegakiEngine.registerPlugin() before relying on names like 'glow' or 'taper'.

Changelog:

v1.1.0 (10/12/2026)

• Bundles with several font weights

v1.0.3 (10/07/2026)

• Nib stamps keep their size below full pressure

v1.0.2 (10/02/2026)

• Idle plugin loops pause off screen

v1.0.1 (10/01/2026)

• Unified Vue, Nuxt, Svelte, SolidJS, and Astro adapters on tegaki/core to fix plugin and bundle registry compatibility.

v1.0.0 (09/30/2026)

• Established the stable semver renderer, plugin, and bundle APIs.
• Replaced the old effects configuration with plugins and the pressure option.
• Shipped LXGW WenKai for Simplified Chinese plus the Hershey Script and EMS Allure single-line bundles.
• Introduced deterministic seed, fallbackFont, reducedMotion, plugin registration, and improved SVG export.
• Regenerated bundled fonts with improved stroke extraction and stroke order.
• Shipped annotatePlugin and expanded the public plugin API.

v0.22.2 (09/23/2026)

• Continued rendering when a bundle font file fails to load.

v0.22.1 (07/13/2026)

• Shipped the tegaki/fonts/atma build output.

v0.22.0 (07/12/2026)

• Introduced Bengali support through the Atma font bundle.

v0.19.0 (06/29/2026)

• Introduced Korean Hangul support and the Nanum Pen Script bundle.