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.
| Prop | Type | Default |
|---|---|---|
textText to generate signature for. | string | — |
colorColor of the signature path. | string | "currentColor" |
fontSizeFont size of the signature. | number | 32 |
durationAnimation duration in seconds. | number | 1.5 |
delayDelay before animation starts in seconds. | number | 0 |
classNameAdditional CSS classes. | string | — |
inViewOnly animate when in view. | boolean | false |
onceOnly animate once. | boolean | true |
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"
<Signature text="Componentry" />