Demo 014 / Type poster

Acid tone selected.

Loud wrappers. Calm source.

Split hard. Read easy.

Every block can shout while the original sentence stays intact.

Basic recipe

Restage a poster

HTML

<h1 data-a11y-text-split
    data-split-type="letters"
    data-split-mode="visual"
    data-split-whitespace="trim">
  Split hard. Read easy.
</h1>

<p data-a11y-text-split
   data-split-type="words">
  Every block can shout...
</p>

JavaScript

import { A11yTextSplit, splitAll } from
  '../dist/index.js';

splitAll();

A11yTextSplit.get(title)?.destroy();
title.textContent = next.title;
new A11yTextSplit(title, {
  type: 'letters',
  mode: 'visual',
});

The headline uses visual mode for decorative letter motion; the supporting copy uses semantic words so each token remains the real text.