Autograph

A React component that renders text as handwritten letters using a dataset of 3,410 handwritten letter images.

Installation

npm install handscript
# or
pnpm add handscript
# or
yarn add handscript

The package includes the complete processed dataset with 3,410 handwritten letter images (transparent backgrounds), so no additional setup is required!

Setup

No setup required! The package automatically copies the dataset to your public/dataset folder on install via a postinstall script.

Just install and use:

npm install handscript

The component uses useEffect for data loading, so it's SSR-safe and will only load the dataset on the client side.

Custom Dataset Path (Optional)

If you want to use a different path or CDN, use the datasetBasePath prop:

<Autograph datasetBasePath="https://your-cdn.com/dataset/">
  Hello World
</Autograph>

Example Next.js Usage

Important: For Next.js App Router, you still need to add 'use client' in your page/component file:

'use client' // Required for Next.js App Router

import { Autograph } from 'handscript'

export default function Page() {
  return (
    <div>
      <Autograph>Hello World</Autograph>
    </div>
  )
}

Note: Even though the component files include 'use client', Next.js requires it in the file that imports the component when using App Router.

Usage

import { Autograph } from 'handscript'

function App() {
  return (
    <div>
      <Autograph>Robin</Autograph>
    </div>
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | required | The text to render as handwritten (string, number, or React node) | | className | string | - | Optional CSS class name | | style | React.CSSProperties | - | Optional inline styles | | useVariants | boolean | true | Whether to use random letter variants (55 variants per character) for more natural handwriting | | datasetBasePath | string | '/dataset/' | Base path where the dataset directory is located (contains english.csv and Img_processed/ folder) | | useProcessedImages | boolean | true | Whether to use processed images with transparent backgrounds (always true - only processed images are included) | | animate | boolean | false | Whether to animate characters appearing one by one (writing flow effect) | | animationSpeed | number | 50 | Animation speed in milliseconds per character | | variant | 'subtle' \| 'bold' | 'subtle' | Style variant: 'subtle' for blog posts/footers, 'bold' for emphasis | | fontSize | string | '2.5em' | Font size (any CSS size value: '1em', '1rem', '16px', '120%', etc.) | | color | string | - | Text color (any CSS color: 'black', 'white', '#000', 'rgba(0,0,0,0.4)', etc.) |

Dataset Structure

The package includes a dataset with:

• 62 characters: 0-9 (10), A-Z (26), a-z (26)
• 55 variants per character: 3,410 total handwritten images
• CSV format: image,label

  image,label
  Img/img001-001.png,0
  Img/img001-002.png,0
  ...
  Img/img011-001.png,A
  Img/img028-001.png,R
  Img/img054-001.png,r

Dataset Directory Structure

The package includes:

dataset/
├── english.csv           # CSV mapping images to labels
└── Img_processed/        # 3,410 PNG images with transparent backgrounds
    ├── img001-001.png (through img001-055.png)  # Number 0
    ├── img002-001.png (through img002-055.png)  # Number 1
    ...
    ├── img011-001.png (through img011-055.png)  # Letter A
    ├── img028-001.png (through img028-055.png)  # Letter R
    ...
    ├── img037-001.png (through img037-055.png)  # Letter a
    ├── img054-001.png (through img054-055.png)  # Letter r
    ...
    └── img062-001.png (through img062-055.png)  # Letter z

Note: Only Img_processed (with transparent backgrounds) is included to keep the package size smaller. The original Img folder is not included.

Examples

Blog Post / Footer (Subtle)

<Autograph variant="subtle">
  Written by John Doe
</Autograph>

Inline in Text

<p>
  This article was written by{' '}
  <Autograph variant="subtle">Sarah Johnson</Autograph>
  {' '}on January 24, 2026.
</p>

With Animation

<Autograph animate={true} animationSpeed={50}>
  Signature
</Autograph>

Custom Font Size and Color

<Autograph 
  variant="subtle"
  fontSize="1.5rem"
  color="black"
>
  Solid Black Text
</Autograph>

<Autograph 
  fontSize="3em"
  color="white"
  style={{ backgroundColor: '#000', padding: '10px' }}
>
  White on Black
</Autograph>

Custom Styling

<Autograph 
  variant="subtle"
  style={{ fontSize: '1rem', color: '#666' }}
>
  Custom Style
</Autograph>

Bold Variant (for Emphasis)

<Autograph variant="bold" style={{ fontSize: '1.5rem' }}>
  Heading Text
</Autograph>

Development

# Build the package
pnpm build

# Watch mode
pnpm dev

License

MIT