Building a Signature That Feels Alive

The gap between functional and premium

Signbee's homepage has always looked sharp. The landing page, the API docs, the copy — all polished. But the moment you logged in, there was a subtle dip in quality. The dashboard felt like a different product. Cards stacked on top of each other. A basic table for documents. Nothing wrong, but nothing that made you think “these people care about details.”

If you're building a product that handles contracts and signatures, trust is everything. And trust is often communicated through craft. The tiny things. The weight of a button. The way information is organised. Whether the interface feels like it was assembled or designed.

Tonight I decided to close that gap.

The dashboard needed hierarchy

The old dashboard showed everything at once: your plan, your documents, your API keys, your settings — all in separate cards scrolling down the page. It was honest, but it was flat. No hierarchy. No sense of what mattered.

I restructured it around what a logged-in user actually cares about:

• A welcome message — you're greeted by name
• Three stat cards — your plan with a visual usage bar, quick links to docs, and an upgrade path
• Tabs instead of cards — Documents, API Keys, Settings as tab navigation rather than a vertical scroll
• A Quick Start — if you have zero documents, you see a curl command ready to copy

Added a subtle dot-grid background and an ambient glow effect. Tiny detail, but it creates depth. The page no longer feels like a spreadsheet with margins.

The signature that writes itself

This was the fun part.

I found an open-source React component called signature-animation that renders text as SVG paths — each letter drawn stroke-by-stroke as if someone is writing it in front of you. Not a handwriting font. Not a typed word that fades in. Actual pen strokes, animated.

The first version was too clever. I tried to combine it with a font picker — let users choose between Dancing Script, Great Vibes, and Caveat. The problem? The SVG animation draws its own letterforms. It doesn't use CSS fonts. So you'd pick a font and nothing would change in the preview. Confusing.

I tried replacing it with a CSS clip-path text reveal. Technically it worked — the font changed, a left-to-right wipe revealed the text. But it felt flat. Generic. It looked like a loading animation, not a signature.

Then I had the obvious realisation: the SVG animation IS the feature. Ditch the font picker entirely. One signature style. The one that looks like someone actually writing your name. The user just types — and watches it appear, stroke by stroke.

Simpler UX, more impressive result. 190 lines of code deleted.

The small things that create trust

While I was in the codebase, I polished everything the logged-in user touches:

• Login & register pages — added the logo, the dot-grid background, consistent card styling
• Documents table — replaced the basic HTML table with card-style rows, relative timestamps, colour-coded status badges
• Signing flow — refined step indicators, added the handwriting animation, a proper “Done” state with PDF download
• Sender setup — same treatment, consistent from the moment you hit the API to the final signed PDF

None of these changes affect functionality. The API is identical. Documents still get signed, PDFs still get generated, certificates still get attached. But the experience of doing those things now feels like a product that respects your time.

Testing the full loop

After deploying, I ran the full end-to-end flow. Sent a contract via the API:

curl -X POST https://signb.ee/api/v1/send \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -d '{
    "markdown": "# NDA\nConfidential terms...",
    "recipient_name": "Jane Smith",
    "recipient_email": "jane@example.com"
  }'

Recipient gets the email. Opens the signing link. Types their name. Watches it get written out in that handwriting animation. Signs. Downloads the certified PDF. The whole thing takes about 30 seconds and it feels good.

Then I tested with an existing PDF via pdf_url. Same flow, same animation, same result. Both paths work.

What I learned

Three things:

1. Removing features can be the feature. The font picker added complexity without value. Deleting it made the product better.
2. The post-login experience is your real product. The landing page gets attention, but the dashboard is where trust lives. If the quality drops after login, people notice.
3. Small animations earn disproportionate trust. That handwriting animation takes 0.4 seconds. It's cosmetic. But it communicates something important: we care about how this feels.

The Mathematics of Bézier Smoothing & Velocity Dynamics

When a user signs on a glass touchscreen or drags a trackpad, raw JavaScript pointer events report discrete points: (x0, y0), (x1, y1), (x2, y2). If you simply draw straight lines between these consecutive coordinates, the signature looks jagged, pixelated, and robotic.

Real fountain pens and ballpoints do not produce sharp angular polylines; they deposit ink through continuous fluid curves. To simulate physical physics, we interpolate between discrete sample points using quadratic Bézier curves where the control point is the midpoint of successive segments:

interface Point {
  x: number;
  y: number;
  time: number;
}

export class SmoothSignatureCanvas {
  private lastPoint: Point | null = null;
  private ctx: CanvasRenderingContext2D;

  constructor(canvas: HTMLCanvasElement) {
    this.ctx = canvas.getContext("2d")!;
    this.ctx.lineCap = "round";
    this.ctx.lineJoin = "round";
  }

  public addPoint(current: Point) {
    if (!this.lastPoint) {
      this.lastPoint = current;
      return;
    }

    // 1. Calculate midpoint between last point and current point
    const midX = (this.lastPoint.x + current.x) / 2;
    const midY = (this.lastPoint.y + current.y) / 2;

    // 2. Derive drawing velocity to simulate physical fountain pen pressure
    const distance = Math.hypot(current.x - this.lastPoint.x, current.y - this.lastPoint.y);
    const timeDelta = Math.max(1, current.time - this.lastPoint.time);
    const velocity = distance / timeDelta;

    // Faster motion = thinner line; deliberate slow motion = richer ink pooling
    const strokeWidth = Math.max(1.2, Math.min(3.5, 4.0 - velocity * 1.5));

    this.ctx.lineWidth = strokeWidth;
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastPoint.x, this.lastPoint.y);
    this.ctx.quadraticCurveTo(this.lastPoint.x, this.lastPoint.y, midX, midY);
    this.ctx.stroke();

    this.lastPoint = current;
  }
}

Vector SVG Serialization vs Canvas Rasterization

Most signing software takes the easy route: it reads canvas.toDataURL("image/png") and stamps a blurry 72 DPI PNG onto the PDF. When a recipient zooms into the signed agreement on a 4K display or prints it on paper, the signature blurs and degrades into pixelated artifacts.

Signbee records signature paths as pure vector SVG coordinate arrays. When embedding the signature into the final PDF via pdf-lib, the path is rendered directly as native vector bezier curves. Whether viewed at 100% or 800% zoom, the ink lines remain infinitely crisp, yielding an executive-grade document indistinguishable from authentic wet ink.

Retina Scaling & Touch Cancellation Resilience

Mobile devices present subtle edge cases that break naive signature components. When rendering on iOS Safari or Android Chrome, the browser's window.devicePixelRatio (often 2x or 3x) causes unscaled canvas elements to appear fuzzy. Multiplying internal canvas dimensions by the DPR while retaining CSS display dimensions ensures physical pixel density.

Furthermore, incoming phone calls, accidental palm rests, or multi-finger pinch gestures trigger pointercancel events. A resilient signature engine must listen for cancel events, smoothly terminate active Bézier paths without leaving orphan points, and disable parent viewport scroll gestures (touch-action: none) while the user is actively drawing their signature.