Convert text into a handwriting-style animation
Stroke-by-stroke drawing effect
Built-in script font presets
Supports custom fonts via URL
Customize color, thickness, animation, and looping
Text
Font (preset or custom URL) & font size
Color & stroke thickness
Animation time
Loop & interval
After animation behavior (stay / fade)
You can use custom fonts by providing a direct font URL.
Supported formats: .ttf, .otf, .woff, .woff2
Notes: The font file must be publicly accessible (CORS enabled)
Example:
https://raw.githubusercontent.com/google/fonts/main/ofl/pacifico/Pacifico-Regular.ttf
Personal portfolio signatures
Landing page hero sections
Brand signatures / logos
🍪 Tips: You can wrap this component inside other components or sections to create more advanced animations (e.g. onboarding flows, or layer it with view-triggered animations as shown in the demo.
Feel free to remix the demo: https://sub.chujiqiqi.com/remix/jRX2anROOcD9oAhAMR85