Issue 001 · Move your pointer

Make noise quietly.

An accessible kinetic type study

Basic recipe

Build the poster

HTML

<h1 data-a11y-text-split
    data-split-type="letters"
    data-split-mode="visual">
  Make noise quietly.
</h1>

<!-- CSS uses --a11y-text-split-letter-index -->

JavaScript

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

splitAll();

poster.addEventListener('pointermove', (event) => {
  target.x = event.clientX;
  target.y = event.clientY;
});

requestAnimationFrame(animateTowardTarget);

Visual mode keeps the animated letter wrappers decorative while a clean text source remains available to assistive technology.