WebsiteGitHub

Ink is a calm, high‑end signature studio for the web — designed to convert handwriting and typography into motion-ready React components.

Instead of exporting static images, it lets you draw on a pen‑like canvas or type your name using elegant signature fonts, generating lightweight, custom-animated components that draw themselves in real time.

The Concept

Most signature generators output static PNGs or heavy, pixelated GIFs.

I wanted something different. A signature on a personal website or portfolio should feel premium and responsive.

By generating code instead of media, Ink offers:

  • Perfect Scaling — resolution-independent vector SVGs
  • High Performance — tiny, code-based animation files instead of megabyte-sized assets
  • Theme Flexibility — clean components that seamlessly adapt to light or dark mode styling

How the Animation Works

The animation engine is built using @motiondotdev (Framer Motion) to control sequential path drawing:

  • Stroke-by-Stroke Path Drawing — Animates SVG paths from 0 to 1 using the pathLength property. This mimics the actual speed and pressure of drawing with a pen.
  • Mask-Reveal Reveal — For text mode, filled font glyphs are animated from left to right using SVG masks, creating a natural handwriting reveal effect.
  • Ink‑Indent Base Layer — An optional depth layer simulates physical ink absorption, adding contrast and texture to the drawing.

The compiler logic, residing in lib/signature/export.ts, handles the clean conversion from raw coordinates or text glyphs into modular React code.

Core Features

  • Draw or Type — Freehand drawing mode on HTML5 Canvas or type-based inputs using handwriting fonts.
  • Two Animation Styles — Choose between a standard stroke reveal (Draw) or a mask-reveal style (Fill).
  • Live Preview & Replay — Interactive sandbox to test, preview, and replay animations.
  • Direct TSX Export — Copy production-ready React component code in a single click.

Tech Stack

  • Framework: Next.js (React)
  • Animation: @motiondotdev
  • Canvas Interface: HTML5 Canvas API
  • State Management: Jotai
  • Styling: Tailwind CSS