Tegaki

Tegaki (手書き) offers a seamless solution for integrating handwriting animation on the web, transforming any chosen font into an engaging animated text experience. This tool eliminates the need for manual path authoring and native dependencies, allowing for quick and effortless text animation with just a font selection.

Features

• Font Versatility: Support for various fonts enables diverse design possibilities.
• Easy Usage: Integrates effortlessly into popular development frameworks such as React, Svelte, Vue, SolidJS, and more.
• Command Line Interface: Generates SVG animations directly from your terminal without requiring additional installations.

Quick Integration Example

To use Tegaki with React, simply import the TegakiRenderer and specify the desired font:

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

function App() {
  return (
    <TegakiRenderer font={caveat} style={{ fontSize: '48px' }}>
      Hello World
    </TegakiRenderer>
  );
}

This renders text that animates stroke by stroke, providing a natural timing that enhances the visual appeal.

Command Line Usage

For those who prefer command line operations, create an animated handwriting SVG with commands like:

npx tegaki "Tegaki is awesome"

Custom options allow for tailoring the output, such as:

npx tegaki "Hello World" --font tangerine --mode once -o hello.svg
npx tegaki "مرحبا بالعالم" --font amiri --stroke-easing ease-in-out-cubic

Built-in Fonts

Tegaki includes a selection of ready-to-use handwriting fonts, including:

• Caveat (Latin)
• Tangerine (Latin)
• Amiri (Arabic + Latin)
• Klee One (Japanese)

Comprehensive Documentation

Full documentation is available at tegaki.ink, featuring guides for various frameworks, usage instructions, and API references.

Integrations

Tegaki can complement other tools, such as Sli.dev for markdown presentations and Remotion for programmatically creating videos with React. Explore integrations to enhance your projects.