Animated Text
llms.txtExample
Usage
Animated handwriting text powered by tegaki . Text draws itself stroke by stroke.
<AnimatedText text="Hello world" font="caveat" style="font-size: 64px" />
Built-in fonts
Four handwriting fonts are bundled: caveat, italianno, tangerine, parisienne.
<AnimatedText text="Elegant script" font="parisienne" speed={1.5} />
Controlled progress
Drive the animation yourself by binding progress (0 → 1):
<AnimatedText text="Scrub me" mode="controlled" progress={0.5} />
API Reference
AnimatedText
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:
1loop
boolean
Whether to loop the animation (uncontrolled mode). Default:
truemode
enum
Use 'controlled' to drive the animation progress yourself via the progress prop. Default:
'uncontrolled'progress
number
Progress from 0 to 1. Only used when mode is "controlled". Default:
0Property
text
font
speed
loop
mode
progress