animated-signature

Animate any name as a hand-drawn SVG signature — pass a name and watch it write itself.

Uses opentype.js to convert text + a font file into SVG paths at runtime, then animates them with motion. Ships with Momo Signature as the default font so zero configuration is needed.

Install

npm install animated-signature

npm 7+ automatically installs peer dependencies (react, react-dom, motion). If you're on an older npm or using yarn/pnpm, install them manually:

npm install react react-dom motion

Quick start

import { AnimatedSignature } from 'animated-signature'

export default function App() {
  return (
    <AnimatedSignature
      name="Gitesh Sarvaiya"
      className="w-72 text-zinc-900 dark:text-white"
    />
  )
}

No fontUrl needed — defaults to Momo Signature automatically.

Animation modes

reveal (default) — left-to-right fill

<AnimatedSignature
  name="Gitesh Sarvaiya"
  mode="reveal"
  duration={2}
/>

stroke — pen traces each subpath outline

<AnimatedSignature
  name="Gitesh Sarvaiya"
  mode="stroke"
  strokeWidth={2}
  duration={3}
/>

character — reveals one character at a time

<AnimatedSignature
  name="Gitesh Sarvaiya"
  mode="character"
  duration={1.5}
  overlap={0.2}
/>

Custom font

Pass any TTF / OTF / WOFF / WOFF2 URL — works great with Google Fonts:

<AnimatedSignature
  name="Gitesh Sarvaiya"
  fontUrl="https://fonts.gstatic.com/s/dancingscript/v29/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSoHTQ.ttf"
/>

Font tip: Cursive / handwriting fonts look the most authentic. Try Dancing Script, Great Vibes, Parisienne, Sacramento, or Pacifico from Google Fonts.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Text to animate as a signature | | fontUrl | string | Momo Signature | URL to a TTF / OTF / WOFF / WOFF2 font file | | fontSize | number | 72 | Font size in SVG units | | mode | 'reveal' \| 'stroke' \| 'character' | 'reveal' | Animation style | | duration | number | 2.5 | Total animation duration in seconds | | ease | Easing | [0.4, 0, 0.2, 1] | Motion easing curve | | ghostOpacity | number | 0.1 | Opacity of the faint guide shown behind the animation | | padding | number | 10 | Space around the text bounding box in SVG units | | strokeWidth | number | 2 | Stroke width — stroke / character modes only | | overlap | number | 0.15 | 0–1 stagger overlap between characters — stroke / character modes only | | onAnimationComplete | () => void | — | Callback fired once the animation finishes | | className | string | — | Class applied to the <svg> element | | style | CSSProperties | — | Inline styles applied to the <svg> element |

All other props are forwarded to the underlying motion.svg element.

Vanilla HTML / CDN (no build step)

<div id="my-signature" style="width: 300px; color: #111;"></div>

<script src="dist/animated-signature.global.js"></script>
<script>
  AnimatedSignatureLib.mount('#my-signature', {
    name: 'Gitesh Sarvaiya',
    mode: 'reveal',
    duration: 2.5,
  })
</script>

How it works

1. Font loading — opentype.js fetches and parses the font file in the browser. The result is cached after the first load.
2. Path extraction — font.getPath() / font.getPaths() converts the name string into SVG path data.
3. Animation — depending on mode:
   • reveal — a clipRect expands left → right over the filled signature.
   • stroke — each subpath is drawn with pathLength animated 0 → 1.
   • character — each character is revealed by its own expanding clip rect.
4. Ghost — the full signature is rendered at low opacity behind the animation as a guide.

License

MIT © Gitesh Sarvaiya