CalligraphySignature

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