An animated SVG signature effect using Opentype.js and Framer Motion to draw out text as if hand-written.
Font Requirement: To enable the hand-written effect accurately, you must download the required font file and place it in your project's public directory.
pnpm dlx shadcn@latest add @componentry/signatureDependencies: framer-motion opentype.js
import { Signature } from "@/components/ui/signature"
<Signature text="Componentry" />| Prop | Type | Default |
|---|---|---|
fontUrl | stringURL of a font file to load instead of the default Lastoria font paths. | — |
text | stringText to generate signature for. | "Signature" |
color | stringColor of the signature path. | "currentColor" |
fontSize | numberFont size of the signature. | 32 |
duration | numberDrawing duration per character in seconds. Characters start 0.2 seconds apart. | 1.5 |
delay | numberDelay before animation starts in seconds. | 0 |
className | stringAdditional CSS classes. | — |
inView | booleanOnly animate when in view. | false |
once | booleanAnimate only on the first viewport entry when inView is enabled. | true |
Use Signature for a name, a short sign-off, or a handwritten accent. It generates SVG paths from text; it does not capture handwriting or sign a document.
Serve LastoriaBoldRegular.otf from your public directory, or pass fontUrl for another font asset. If no font loads, the component has no paths to draw. Duration applies to each character, and characters start 0.2 seconds apart, so longer phrases take longer to finish.
Set inView to start when the SVG enters the viewport. With inView enabled, once controls whether it can animate on later entries. Keep a readable text equivalent when the name conveys essential information.
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.