A11yTextSplit playground

Split the text, not the experience.

A11yTextSplit turns text into styleable letter, word, or rendered-line tokens for animation while preserving one readable source for assistive technologies.

Quick start

Split a heading in two steps.

Add the data attributes, import the stylesheet, and initialize matching elements. Visual mode keeps the generated animation tokens out of the accessibility tree.

HTML

<h2
  data-a11y-text-split
  data-split-type="letters"
  data-split-mode="visual"
>
  Accessible motion
</h2>

JavaScript

import { initTextSplitAll } from "a11y-text-split";
import "a11y-text-split/styles.css";

initTextSplitAll();

View the repository on GitHub

Choose an effect

Creative demos

01 Kinetic poster Pointer-reactive letters and bold editorial type. Open demo 02 Line reveal Responsive lines unfold like an opening title. Open demo 03 Word spotlight An interactive reading focus that follows the pointer. Open demo 04 Type wave Letters travel through a colorful looping signal. Open demo 05 · Scroll Letter cascade Letters pour into view and lift away on exit. Open demo 06 · Scroll Word drift Semantic words sharpen and settle near the viewport center. Open demo 07 · Scroll Line chapters Responsive lines slide through a sequence of chapters. Open demo 08 · Scroll Exit echo Words animate in both directions as they enter and leave. Open demo 09 Orbit poem Words drift through a pointer-driven gravitational field. Open demo 10 Mood mixer Buttons rebuild the sentence and restage every word. Open demo 11 Signal loom A range control scrubs one sentence through live emphasis. Open demo 12 · Native Trust current A dependency-free pinned trust section that scrolls horizontally and bends toward pointer or touch. Open demo 13 · Mouse Mouse mischief A tiny mouse chases the punchline and makes the words scatter. Open demo 14 · Brutal Neo-brutal split Chunky poster controls rebuild loud type with clean source text. Open demo

Developer reference

API at a glance

Start with the creation helpers for most integrations. The class methods and lower-level utilities are available when you need explicit lifecycle control or custom segmentation.

Core package and documented add-on entry points
Member	Kind	Returns	Purpose
`createTextSplit(root, options?)`	Function	`A11yTextSplit`	Initializes one element or returns its existing instance.
`initTextSplitAll(options?, selector?)`	Function	`A11yTextSplit[]`	Initializes every matching element; the default selector is `[data-a11y-text-split]`.
`A11yTextSplit`	Class	`A11yTextSplit`	Provides direct construction, normalized options, and lifecycle control.
`instance.refresh()`	Method	`A11yTextSplit`	Rebuilds the generated tokens and any active line grouping.
`instance.destroy()`	Method	`void`	Removes generated state and restores the original DOM nodes.
`A11yTextSplit.get(element)`	Static method	`A11yTextSplit \| undefined`	Returns the existing instance for an initialized element.
`TextSplitOptions`	Interface	Configuration	Controls type, mode, locale, whitespace, nested text, and line tolerance.
`segmentText(text, options?)`	Utility	`TextSplitSegment[]`	Segments a string without rendering it into the DOM.
`normalizeOptions(element, options?)`	Utility	`NormalizedTextSplitOptions`	Resolves JavaScript options and data attributes into frozen, safe values.
`splitAll(selector?, options?)`	Compatibility function	`A11yTextSplit[]`	Legacy bulk initializer; prefer `initTextSplitAll()` in new integrations.
`scrollRevealAll(selector?, options?)`	Add-on function	`() => void`	Initializes optional scroll reveals from `a11y-text-split/scroll` and returns cleanup.