CalligraphySignature

Animate text into a handwriting style

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

Animate text into a handwriting style