Animated SVG signature that traces text with OpenType.js paths and Motion stroke reveals.
Place LastoriaBoldRegular.otf in your public directory, or pass a custom path via fontUrl.
| Prop | Type | Default |
|---|---|---|
textText converted into handwriting paths. | string | "Signature" |
colorStroke and fill color. Omit to inherit theme foreground via currentColor. | string | — |
fontSizeFont size used while converting glyphs to paths. | number | 14 |
durationAnimation duration in seconds for each character. | number | 1.5 |
delayDelay before the first character starts animating. | number | 0 |
classNameAdditional classes on the SVG element. | string | — |
inViewAnimate only when the element enters the viewport. | boolean | false |
oncePlay the in-view animation only once. | boolean | true |
fontUrlCustom font URL. Defaults to /LastoriaBoldRegular.otf. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { Signature } from "@/components/ui/signature"export default function Page() {
return <Signature text="Spider UI" fontSize={48} />
}