Animated Text

Example

Animated handwriting text powered by tegaki . Text draws itself stroke by stroke.

		<AnimatedText text="Hello world" font="caveat" style="font-size: 64px" />

Four handwriting fonts are bundled: caveat, italianno, tangerine, parisienne.

		<AnimatedText text="Elegant script" font="parisienne" speed={1.5} />

Drive the animation yourself by binding progress (0 → 1):

		<AnimatedText text="Scrub me" mode="controlled" progress={0.5} />

Animated handwriting text. Any font draws itself stroke by stroke, powered by tegaki.

Property Type Description

text

string

The text to animate. Default: —

font

enum

Built-in handwriting font to use. You can also pass a custom tegaki font bundle. Default: 'caveat'

speed

number

Animation speed multiplier (uncontrolled mode). Default: 1

loop

boolean

Whether to loop the animation (uncontrolled mode). Default: true

mode

enum

Use 'controlled' to drive the animation progress yourself via the progress prop. Default: 'uncontrolled'

progress