Tegaki는 글꼴을 획이 차례로 그려지는 손글씨 애니메이션으로 바꾸는 라이브러리다. 수동으로 경로를 만들거나 네이티브 의존성을 설치할 필요 없이 글꼴을 선택해 사용할 수 있다.

웹사이트와 문서에서 자세한 내용을 확인하거나 스튜디오에서 체험할 수 있다. 프로젝트는 GitHub 저장소에서 제공한다.

React에서는 tegaki에서 TegakiRenderer를 가져와 사용할 수 있다.

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

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

명령줄 인터페이스(CLI)로 SVG를 만들 수도 있다. 별도 설치 없이 npx로 실행하며, 기본 출력은 반복 재생되는 애니메이션 SVG다.

sh
npx tegaki "Tegaki is awesome"

글꼴, 재생 방식, 크기, 색상 등을 지정할 수 있다.

sh
npx tegaki "Hello World" --font tangerine --mode once -o hello.svg
npx tegaki "ABC" --stagger 80% --size 140 --color "#222"
npx tegaki "مرحبا بالعالم" --font amiri --stroke-easing ease-in-out-cubic
npx tegaki "Glow" --plugins '[["glow", {"radius": 0.12, "color": "#f0a"}], "taper"]'

--mode는 기본값인 loop(계속 반복), 한 번만 그리는 once, 완성된 그림을 보여주는 static 중에서 선택한다. CLI는 렌더러와 마찬가지로 harfbuzz를 WASM으로 묶어 텍스트 모양을 처리한다. 프로젝트 설명에 따르면 합자, 아랍어 글자 연결, 데바나가리 문자와 오른쪽에서 왼쪽으로 쓰는 텍스트를 지원하며, 스튜디오처럼 획을 글자 윤곽 안으로 제한한다. npx tegaki --help로 옵션을, --list-fonts로 포함된 글꼴을 확인할 수 있다. CLI는 SVG만 출력하며 PNG, GIF, WebM은 인터랙티브 스튜디오에서 만들 수 있다.

Tegaki는 React, Svelte, Vue, SolidJS, Astro, 바닐라 자바스크립트와 웹 컴포넌트를 지원한다.

js
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

포함된 글꼴은 다음과 같다.

  • Caveat, Italianno, Tangerine, Parisienne: 라틴 문자
  • Suez One: 히브리 문자와 라틴 문자
  • Amiri: 아랍 문자와 라틴 문자
  • Tillana: 데바나가리 문자와 라틴 문자
  • Klee One: 일본어 가나, 교육용 1~2학년 한자와 라틴 문자
  • Nanum Pen Script: 한글 음절·자모와 라틴 문자
  • Atma: 벵골 문자와 라틴 문자
  • LXGW WenKai: 가장 자주 쓰이는 중국어 한자 1,000자와 라틴 문자
  • Hershey Script와 EMS Allure: 라틴 문자 단선 글꼴. Hershey Script는 플로터용으로 자체 펜 획으로 그리며, EMS Allure는 Evil Mad Scientist가 만든 Allura의 획 버전이다.

다른 글꼴은 스튜디오에서 사용자 지정 번들을 만들 수 있다. 문서에는 시작 안내, 프레임워크별 안내, 글꼴 생성 안내, API 참조가 있다. Sli.dev 프레젠테이션과 Remotion 영상 제작에도 연동 예제가 제공된다(Sli.dev 예제, Remotion 예제). 라이선스는 MIT다.