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.