Text splitting · Kinesis

Split text into characters, words, or lines that can move, without breaking screen readers.

The text module wraps each character, word, or line in a span you can animate with Kinesis CSS.

import { splitText } from "@amineyarman/kinesis/text"

splitText(".headline", "chars")   // or "words", or "lines"

.headline .k-char {
  --k-when: view once;
  --k-opacity: 0 1;
  --k-y: 0.5em 0;
  --k-stagger: 35ms;
}

Motion, declared.

Edit

.headline-scene {
  display: grid;
  place-items: center;
  height: 100%;
}

.headline {
  margin: 0;
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: -0.03em;
}

.headline .k-char {
  --k-when: view once;
  --k-opacity: 0 1;
  --k-y: 0.5em 0;
  --k-rotate: 14deg 0deg;
  --k-stagger: 35ms;
  --k-motion: bouncy;
}

<div class="headline-scene" data-kinesis>
  <h2 class="headline" data-k-split="chars">Motion, declared.</h2>
</div>

import { splitAll } from "@amineyarman/kinesis/text"

const root = document.querySelector("[data-kinesis]")
splitAll(root)

Declaratively

Mark elements with data-k-split and split them all at once:

<h1 data-k-split="words">Motion, declared.</h1>

import { splitAll } from "@amineyarman/kinesis/text"

splitAll()   // or splitAll(someContainer)

What you get

Each piece is an inline-block span, so it can be transformed.

Split by	Classes on each piece
`chars`	`.k-word` wrapping `.k-char`, so words never break mid-line
`words`	`.k-word`
`lines`	`.k-line` wrapping `.k-word`

Each piece gets --k-index, its position in the whole element, so --k-stagger follows reading order across words. It works in your own CSS too, for example transition-delay: calc(var(--k-index) * 20ms).

splitText() returns { chars, words, lines, revert() }. revert() restores the original content. Splitting an element again reverts it first.

Lines

"lines" groups words where the browser wraps them, and splits again when the element's width changes. It needs plain text. For text containing links or other elements, split by words.

Accessibility

Screen readers read split text normally. Each run of text keeps a visually hidden copy, and the animated pieces are hidden from assistive technology. A heading is announced as the phrase "Motion, declared." Links and emphasis inside the text keep working.

Characters are split by grapheme, so emoji and accented letters stay whole.