Back to Components

Signature

Animated SVG signature for portfolios and author credits with smooth Framer Motion drawing effects.

Installation

pnpm dlx shadcn@latest add https://itsalfi.in/r/signature.json

Usage

import  { SignatureDisplay }  from "@/components/ui/signature-display"
<SignatureDisplay
  name="Ada Lovelace"
  color="#111111"
  glyphHeight="var(--signature-lg)"
/>

Props

Notes

  1. Supports letters A-z , a-z and spaces only.
  2. Input is sanitized to two words and a maximum of 25 characters.
  3. Respects prefers-reduced-motion skips the draw animation when set.