Docs·Signature

Signature

An animated SVG signature effect using Opentype.js and Framer Motion to draw out text as if hand-written.

Installation

pnpm dlx shadcn@latest add @componentry/signature

Usage

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.

Download LastoriaBoldRegular.otf

import { Signature } from "@/components/ui/signature"

<Signature text="Componentry" />

API Reference

Property	Type	Default
`text` Text to generate signature for.	`string`	—
`color` Color of the signature path.	`string`	`"currentColor"`
`fontSize` Font size of the signature.	`number`	`32`
`duration` Animation duration in seconds.	`number`	`1.5`
`delay` Delay before animation starts in seconds.	`number`	`0`
`className` Additional CSS classes.	`string`	—
`inView` Only animate when in view.	`boolean`	`false`
`once` Only animate once.	`boolean`	`true`

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X