A gallery of real app UI motion — 2000+ screen recordings across 487 apps, filterable by gesture and interaction pattern
Tegaki
Turn any font into stroke-by-stroke handwriting animation - CJK included, studio runs in your browser
Content updated · 2026-10-13
What is it · 它是什么
What is Tegaki?
Tegaki is an open-source handwriting animation library and generator: it extracts strokes, stroke order and thickness from any font, then "writes" the text stroke by stroke on real selectable DOM text via canvas - Latin, Arabic, Chinese, Japanese and Korean writing systems all supported. The in-browser Studio runs without a server, and the library adds streaming text (typewriter for AI output), timeline control and Remotion video export. The most striking move a page headline can make. MIT licensed.
How to use · 怎么用
How to use Tegaki
- Pick a font and type text in the Studio to preview live.
- Wire the generated config into React/Vue/Svelte components.
- Use streaming mode for AI output, or export video via Remotion.
Key features · 核心特点
Key features of Tegaki
- Stroke extraction from any font, animated on real DOM text
- CJK, Arabic and more writing systems
- In-browser generator, no server
- Streaming text, timeline, video export - MIT
Related sites
Compose animations by stacking words - fade, up, slide - no keyframes, 3KB core
A front-end playground — a dense hub of motion snippets and experiments