Skip to main content

​
What is Griffo?

Griffo is a kerning-aware text splitting library that lets you split text into characters, words, and lines for animation — without breaking your typography. Most splitting libraries wrap each character in a <span> and call it done, but that destroys the kerning between character pairs. Griffo compensates for this automatically, maintaining pixel-perfect spacing even when every character is wrapped in its own element. 
import { splitText } from "griffo";
import { animate, stagger } from "motion";

const { chars } = splitText(document.querySelector("h1"), { type: "chars" });
animate(chars, { opacity: [0, 1], y: [20, 0] }, { delay: stagger(0.02) });

Quickstart

Get up and running in minutes with vanilla JS, React, or Motion

Installation

Install Griffo with npm, yarn, or pnpm

Core API

Learn the splitText() function API

​
Key Features

Kerning Compensation

Maintains original character spacing when splitting by chars — no visual jumping

Nested Elements

Preserves <a>, <em>, <strong> and other inline elements with all attributes

Line Detection

Groups words into rendered lines automatically based on layout

Dash Handling

Wraps naturally after em-dashes, en-dashes, hyphens, and slashes

Auto Re-split

Re-splits on container resize for responsive animations

Auto Revert

Restores original HTML after animations complete

Masking

Clip containers for reveal animations

Emoji Support

Handles compound emojis and complex Unicode characters

Accessible

Automatic screen reader support, even with nested links or emphasis

TypeScript

Full type definitions included

Zero Dependencies

7 kB core with no external packages

Library Agnostic

Works with Motion, GSAP, CSS, WAAPI, or any animation code

​
Entry Points

Griffo provides multiple entry points optimized for different use cases:
ImportUse forSize
griffoVanilla JS or any framework7.11 kB
griffo/reactReact with callback/lifecycle control8.23 kB
griffo/motionDeclarative Motion animations13.78 kB
griffo/morphStandalone MorphText component7.95 kB
Sizes are minified + brotli compressed

​
Why Griffo?

​
The Problem

When you wrap each character in a <span> for animation, browsers lose the kerning information between character pairs. This causes text to subtly shift and look awkward: 
<!-- Before: natural kerning preserved -->
<h1>WAVE</h1>

<!-- After naive split: kerning lost, text looks spaced out -->
<h1>
  <span>W</span>
  <span>A</span>
  <span>V</span>
  <span>E</span>
</h1>

​
The Solution

Griffo measures the exact kerning between each character pair before splitting, then applies margin compensation after splitting to restore the original spacing: 
import { splitText } from "griffo";

const { chars } = splitText(element, { type: "chars" });
// Each char span has compensating margins that restore kerning
The result is pixel-perfect typography that maintains your design’s integrity while enabling character-level animation.

​
Next Steps

1

Install Griffo

Add Griffo to your project with npm, yarn, or pnpmInstallation Guide →
2

Follow the Quickstart

Learn the basics with vanilla JS, React, or Motion examplesQuickstart →
3

Explore the API

Dive into the full API documentation for advanced featuresAPI Reference →

Build docs developers (and LLMs) love

Get started for freeTalk to us