React component library for adding natural, humanized variations to text
npm install humanetype!Poem
A React component library for adding natural, humanized variations to text. Inspired by the InDesign "Humane Type" plugin, this library allows you to create text with subtle imperfections that make it appear more hand-crafted and less mechanical.
``bash`
npm install humanetypeor
yarn add humanetypeor
pnpm add humanetype
- Title Text Effects: Apply subtle character-by-character variations to create naturally imperfect titles
- Body Text Effects: Transform paragraphs by placing text on curved paths
- Newline Support: Properly handles paragraph breaks and line breaks within text
- Customizable: Control the intensity of all effects
- Accessibility: Maintains text selection and screen reader compatibility
- TypeScript Support: Fully typed component props
`jsx
import { HumaneTitle, HumaneBody } from 'humanetype';
import 'humanetype/style.css';
function MyComponent() {
return (
$3
The
component applies subtle variations to each character:`jsx
rotationVariation: 3, // Controls character rotation (0-15)
baselineVariation: 1, // Controls up/down position (0-5)
trackingVariation: 100, // Controls letter spacing (0-300)
sizeVariation: 0, // Controls size variation (0-300)
}}
>
Humanized Heading Text
`$3
The
component places text on a curved path:`jsx
curveIntensity: 15, // Controls the curve amount (0-45)
horizontalVariation: 5, // Controls left/right variation (0-45)
verticalVariation: 3, // Controls up/down variation (0-30)
}}
>
This paragraph will follow a gentle curved path with slight
variations to create a more natural, human feel.
`$3
The library supports both paragraph breaks (double newlines) and line breaks (single newlines):
jsx
This is the first paragraph.
This is a second paragraph after a double newline.
Each paragraph gets its own styling and spacing.
This paragraph has a line break.
{'\n'}
This continues on a new line but within the same paragraph.
`In titles, you can also use newlines to create multi-line titles:
jsx
Title with a line break
{'\n'}
on two lines
`$3
You can specify which HTML element to use with the
prop:`jsx
Main Heading
Subheading
Block of text
`$3
For more control, you can use the base
component:`jsx
import { HumaneType } from 'humanetype';
titleOptions={{
rotationVariation: 2,
baselineVariation: 1,
trackingVariation: 80,
sizeVariation: 10,
}}
as="blockquote"
>
A custom blockquote with title-style humanization
`Interactive Demo
The package includes an interactive demo that allows you to experiment with different settings for both title and body text effects. Simply run:
bash
pnpm dev
`$3
- Sliders for adjusting all effect parameters in real-time
- Copy buttons to copy your current settings to the clipboard, making it easy to use them in your own code
- Live preview of how the effects look with your current settings
Development
To build the library:
bash
pnpm build
``This library is inspired by the InDesign "Humane Type" plugin. The original plugin concept has been adapted to work as a React component for web applications.
This project is licensed under the Creative Commons Attribution 4.0 International License (CC-BY-4.0).
The original InDesign "Humane Type" plugin that inspired this library is also licensed under the Creative Commons Attribution 4.0 International License.