Signature Draw Capture
The scrawl strokes on at hand speed and the baseline confirms once the pen lifts.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Signature Draw Capture
*
* A signing pad that puts the stroke down the way a hand would: the main
* scrawl runs first, the flourish follows it, and only once the pen isAbout this pattern
Signing, staged the way a hand does it. The main stroke runs first at writing pace, the flourish follows it, and nothing confirms until the pen has left the paper — then the accent runs along the baseline in the direction the hand moved and the capture line fades in beneath it. Nothing springs anywhere in the sequence: a signature is a record, and a stroke that overshoots and settles back would be drawing something the signer did not write. The ink is the page's own text colour, so it reads on a light sheet and on a dark one.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
The signing pad confirms only after the finger leaves the glass.
Related patterns
- Date Picker OpenThe calendar unfolds from the field and the days arrive in a wave, today already marked.
- Color Picker SwatchA ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.
- Currency Input FormatSeparators fade in where they belong as the amount groups itself, and the caret holds its place.