CalligraphySignature: Free Typography Component by Chy 🐾

Turn text into a calligraphy-style handwriting animation. Customize fonts, animation speed, looping, and thickness with preset fonts or a custom font URL. Perfect for personal websites, portfolios, landing pages, or adding a soft, human touch to your UI.

Features

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

Controls

Text
Font (preset or custom URL) & font size
Color & stroke thickness
Animation time
Loop & interval
After animation behavior (stay / fade)

Custom Font Usage

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

Use Cases

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://hy.chujiqiqi.com/remix/jRX2anROOcD9oAhAMR85

CalligraphySignature — Animate text into a handwriting style

Turn text into a calligraphy-style handwriting animation. Customize fonts, animation speed, looping, and thickness with preset fonts or a custom font URL. Perfect for personal websites, portfolios, landing pages, or adding a soft, human touch to your UI.

Features

Controls

Custom Font Usage

Use Cases

Details

Category

Support

More from Chy 🐾

More Components

More from Chy 🐾