Adopt your signature
Draw your signature or type your name: switching between them flows the ink you drew into a script and back, stroke by stroke.
Things to try
- Draw your signature with a mouse, pen or finger. The ink is thicker where you slow down and thinner where you speed up, and it tapers where the pen lifts.
- Switch to Type. The ink you drew flows into your name, set in a script.
- Change your name. The typed signature follows each letter.
- Switch back to Draw. The script flows back into your own handwriting.
Install
npx shadcn@latest add https://your-docs-site/r/signature.jsonDependencies
npm install @base-ui/react @remold-ui/reactHow it works
- Both styles are filled outlines. A drawn stroke is turned into ink: both edges of the line, its width following the pen's speed. The typed name is the real outline of each letter, read from the font ahead of time, so no font loads in the browser.
- One Icon shows the ink as path data. When the style changes, it pairs the strokes of one with the letters of the other and morphs between them. Strokes with no partner grow out of the nearest ink.
- While you draw, the stroke under the pen is drawn plainly and joins the ink when the pen lifts, so drawing never animates.
- The script is Great Vibes, under the SIL Open Font License. Set your own with
scripts/extract-signature-glyphs.mjs. - Adopting is pretend. Save the path data in the Adopt button's handler: it's the signature, ready to place on a document.
Share link
A Share pill with the faces of everyone who can already open the file. It opens into the link, who it lets in and a Copy button; copying says so, then folds back into the pill. Built on Base UI's Button, Toggle Group and Tooltip.
API keys
Creating an API key in one card that springs between its list, a name form and the secret: the secret decodes once in a dark panel, then travels into the newest row and scrambles into its masked form. Revoke turns into Confirm in its row.