Griffo — Kerning-aware text splitting

npm i griffo

Kerning-aware text splitting.

Here‘s the Thing

Text splitting sounds simple: wrap each character in a <span>.

But fonts use kerning — subtle spacing adjustments between character pairs. Wrap each character in its own element and this spacing breaks.

Most splitting libraries skip this, including GSAP's SplitText plugin and SplitType:

AVA WAVE (kerning test)

GSAP SplitText

AVA WAVE (kerning test)

SplitType

AVA WAVE (kerning test)

Griffo

Press ‘Split’ to see the difference. Hover the Griffo text to highlight compensated chars and see the compensation values.

Griffo measures kerning between character pairs and applies margin adjustments so split text keeps the original spacing.

The Good Stuff

Kerning Compensation	Maintains original character spacing when splitting by chars
Nested Elements	Preserves `<a>`, `<em>`, `<strong>` and other inline elements with all attributes
Line Detection	Groups words into rendered lines
Dash Handling	Allows text to wrap naturally after em-dashes, en-dashes, hyphens, and slashes
Auto Re-split	Re-splits on container resize
Auto Revert	Restores original HTML after animations
Masking	Wrap elements in clip containers for reveal animations
Emoji Support	Properly handles compound emojis and complex Unicode characters
Accessible	Automatic screen reader support, even when splitting text with nested links or emphasis
TypeScript	Full type definitions included
React Component	Declarative wrapper for React projects
Motion Component	Variant-driven `SplitText` built on Motion
Viewport Triggers	Scroll enter/leave callbacks with configurable thresholds in React
Library Agnostic	Works with Motion, GSAP, CSS, or any animation library
Zero Dependencies	7 kB core with no external packages

Usage Examples

Vanilla

import { splitText } from 'griffo';
import { animate, stagger } from 'motion';

const element = document.querySelector('h1');
const { chars } = splitText(element, { type: "chars" });

animate(chars, { opacity: [0, 1] }, { delay: stagger(0.02) });

React

import { SplitText } from 'griffo/react';
import { animate, stagger } from 'motion';

<SplitText
  options={{ type: "chars" }}
  onSplit={({ chars }) => {
    animate(chars, { opacity: [0, 1] }, { delay: stagger(0.02) });
  }}
>
  <h1>Hello world</h1>
</SplitText>

Motion

import { SplitText } from 'griffo/motion';
import { stagger } from 'motion';

<SplitText
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: stagger(0.02) }}
  options={{ type: "chars" }}
>
  <h1>Hello world</h1>
</SplitText>

Morph

import { MorphText } from 'griffo/morph';

<MorphText>{string}</MorphText>

Griffo — after Francesco Griffo, the Renaissance punchcutter who carved type into steel so letterforms could be set as individual pieces. He split metal; we split markup.
This article on Griffo is a small but fascinating detour into type history.

Griffo — Kerning-aware text splitting

Animate your text,not your spacing

Here‘s the Thing

The Good Stuff

Usage Examples

Vanilla

React

Motion

Morph

Animate your text,
not your spacing