stagger · ease-out

Signature handwriting animation

The handwriting effect is the purest demonstration of scroll-driven path drawing: a single continuous path, drawn at the speed the reader scrolls. It works because a signature is already one long stroke, so the dash offset maps directly onto the pen travelling across the page. The one thing worth getting right is easing — a linear draw reads mechanical, while ease-out lands the way a hand actually lifts.

The code

CEO signature draws on scroll with a staggered underline flourish — label, printed name and date are static context. Looks like ink drying on a real document.

Hero.tsx
<ScrollDraw
  easing="ease-out" speed={0.6}
  stagger={0.35} once
>
  <svg>
    {/* Static: "Authorized Signature" label, name, date */}
    {/* Animated path 1: cursive signature */}
    <path d="M 18 90 C 14 62…" stroke="#111" strokeWidth="2.2" />
    {/* Animated path 2: underline flourish (starts after sig) */}
    <path d="M 12 112 C 90 122…" stroke="#ff90e8" />
  </svg>
</ScrollDraw>

Live — scroll it

Authorized SignatureJ. Anderson, CEOMay 2026

Install

terminal
npm i svg-scroll-draw

MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →