Koala UISignature
ProA handwritten signature that writes itself, stroke by stroke, at the pace a hand signs. Close a letter, a testimonial or a hero with it, or sign a Signature Pad and play the hand back.
Installation#
Usage#
The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.
Have a license? Unlock it here
One <path> per pen stroke, in the order they were written: the word, the bar across the t, the dot on the i, the underline. The pen is the component's, so a path needs nothing but its d; ink, weight and round ends override whatever an SVG export wrote on it.
Draw your own#
Sign the pad, pick a speed and a size, and the Signature beside it writes your hand back. Every stroke you add plays the whole signature again, and the snippet under it is that exact drawing, ready to paste. Clear the pad to start from a blank page.
<Signature viewBox="47.2 34.1 197.9 126.4" aria-label="Your name">
<path d="M51.2 119.7C67.2 94.1 82.4 58.9 92.8 42.9C95.5 38.1 98.4 39.7 96.8 46.1C94.4 62.1 92 84.5 93.6 97.3C102.4 81.3 112.8 58.9 122.7 44.5C125.6 39.7 128.3 41.3 126.7 47.7C120.8 71.7 114.4 97.3 112.8 116.5C112.8 122.9 121.6 119.7 128.8 110.1C136 100.5 144 94.1 146.7 95.7C141.1 92.5 129.6 100.5 128.3 111.7C127.7 121.3 137.9 118.1 146.4 103.7C144.8 110.1 143.5 114.9 146.2 117.3C148.8 119.7 154.7 114.9 159.5 108.5C162.4 103.7 160 113.3 164 116.5C168 119.7 175.2 110.1 180.8 94.1C176 113.3 170.4 135.7 162.4 148.5C157.3 156.5 149.6 154.9 153.6 145.3C157.6 135.7 171.2 126.1 183.2 116.5C188.8 106.9 197.6 97.3 202.7 95.7C198.7 92.5 187.2 100.5 185.9 111.7C185.3 121.3 195.5 118.1 202.4 103.7C200.8 110.1 199.5 114.9 202.2 117.3C206.4 119.7 216 113.3 224.8 103.7" />
<path d="M56.8 135.7C106.4 129.3 187.2 126.1 241.1 114.9" />
</Signature>Speeds#
The whole signature takes the same time at a given speed however long the hand is, each stroke getting its share by length, so the pen keeps one pace and a short dot never crawls. base is a person signing without hurry; fast is for a small mark that should not hold up the page; slow is for a hero moment where the writing is the show. delay holds the pen for that many ms once the signature is on screen, so it can wait for whatever enters before it.
Sizes#
size sets the height and the nib together: a small signature writes with a finer pen, so it keeps the weight of handwriting instead of turning into a marker line. The width follows the drawing. For any other height, pass an h-* class; the nib keeps its weight on screen however far the drawing is scaled.
In a testimonial#
The signature is an image with a name, so it drops into any stack: between a Testimonial's quote and its byline, under a founder's letter, or as the last line of a Hero's sign-off. It hugs its drawing and follows its parent's alignment, so it sits left in a left-aligned card and centred in a centred one.
Already signed#
static renders the finished signature with no writing: a signed document in a list, a receipt, anywhere the moment of signing has passed. It is also what everyone sees under prefers-reduced-motion, with or without the prop.
API reference#
Signature
An <svg role="img"> whose children are the strokes, one <path> per pen stroke in writing order; it writes once when a tenth of it is on screen (a new key writes it again). Forwards all native <svg> props and accepts className, merged last; the ink is currentColor, so a text-* class recolours it.
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label* | string | - | What the signature says, read out in place of the drawing. |
| viewBox | string | - | The drawing's box. Leave it out and it fits itself to its ink on the client; pass it to reserve the width from the first paint. |
| size | "sm" | "md" | "lg" | "md" | Height (40, 56 or 80px) and the matching pen weight. |
| speed | "fast" | "base" | "slow" | "base" | Time for the whole signature and the lift between strokes, from signatureDraw in lib/motion.ts (900, 1600 or 2800ms). |
| delay | number | 0 | Milliseconds the pen waits, once on screen, before it touches down. |
| static | boolean | false | Renders the finished drawing with no writing, as under reduced motion. |
| Data attribute | Description |
|---|---|
| data-ready | Set once the client has prepared the strokes; the signature is invisible until then. |
| CSS variable | Description |
|---|---|
| --signature-weight | The pen width in screen pixels, set by size. Override it for a heavier or lighter nib. |
| --signature-scale | Screen pixels per drawing unit, measured on the client; the stroke width divides by it. |