Notes on attention · No. 04

The pause between thoughts is part of the thought.

Resize the window and the rendered lines regroup automatically.

Basic recipe

Reveal rendered lines

HTML

<h1 data-a11y-text-split
    data-split-type="lines"
    data-split-mode="visual">
  The pause between thoughts...
</h1>

JavaScript

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

splitAll();

// Animate .a11y-text-split__line in CSS.

The line add-on observes width and font changes, then rebuilds the visual wrappers to match the new rendered lines.