@congresswiki/handwritten-signature

Animated handwriting React component that renders text as cursive SVG stroke paths. Each letter draws on sequentially with configurable timing, spacing, and overlap.

Install

Install from npm:

npm install @congresswiki/handwritten-signature

Demo: congresswiki.github.io/handwritten-signature

Usage

import { HandwrittenSignature } from '@congresswiki/handwritten-signature';

<HandwrittenSignature text="John Hancock" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | text | string | "Signature" | Text to render | | letterHeight | number | 68 | Height of each letter in pixels | | letterSpacing | number | 0 | Extra spacing between letters in pixels | | durationPerLetterMs | number | 320 | Base animation duration per letter | | initialDelayMs | number | 300 | Delay before animation starts | | strokeWidth | number | 2 | SVG stroke width | | overlapRatio | number | 0.58 | How much adjacent letter animations overlap (0-0.9) | | className | string | — | Additional CSS class on the container |

All standard div HTML attributes are also supported.

Entry Points

| Import | Contents | |--------|----------| | @congresswiki/handwritten-signature | HandwrittenSignature component + types | | @congresswiki/handwritten-signature/glyphs | SVG path definitions for all glyphs | | @congresswiki/handwritten-signature/layout | Per-character spacing, dash lengths, timing constants | | @congresswiki/handwritten-signature/types | GlyphDefinition, GlyphLayoutConfig, HandwrittenSignatureProps |

Supported Characters

Full uppercase (A-Z), lowercase (a-z), and symbols: . - '

Multi-stroke letters (F, I, T, X, f, t, x) animate each stroke sequentially.

Styling

The component includes its own keyframes. It inherits color from its parent for stroke color. Animation is CSS-based using stroke-dashoffset. Pause animation with:

.hws-signature {
  --hws-play: paused;
}

Development

yarn install
yarn lint
yarn typecheck
yarn test:run
yarn build
yarn site:typecheck
yarn site:build

Community

• Contributing
• Code of Conduct
• Security Policy