Signature

A handwritten signature writes itself.

Ada Lovelace

Installation

$ npx shadcn@latest add @textlab/signature

Needs @textlab in your components.json. Setup takes a minute.

usage.tsx

import { Signature } from "@/components/textlab/signature/signature";

<Signature text="Ada Lovelace" />

penbrush

Prop	Type	Default	Description
text*	string	–	The name to sign.
variant	"pen" \| "brush"	"pen"	A fine nib, or a fuller brush where ink pools sooner.
font	string	var(--tl-font-script)	Script font family. Load one with next/font, for example Mrs Saint Delafield.
color	string	currentColor	Ink color.
as	ElementType	"span"	Rendered element.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What starts the animation. manual follows `active`.
active	boolean	false	Drives trigger="manual".
once	boolean	true	In view: play once instead of on every entry.
delay	number	0	Seconds before the first part moves.
duration	number	2.2	Seconds each part takes.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.
onComplete	() => void	–	Called when a one-shot animation finishes.

Writes left to right on a gentle in-out curve, like a hand gaining then losing speed.
Ink fills in behind the nib, never ahead of it.

Reduced motion. Shows the signature in full.