Mouse interaction / very serious research

The mouse borrowed my punchline and refuses to give it back.

Move your pointer through the sentence. The words will act innocent, then immediately scatter.

The mouse is pretending to be normal.

Basic recipe

Let words dodge the pointer

HTML

<h1 data-a11y-text-split
    data-split-type="words"
    data-split-mode="visual">
  The mouse borrowed...
</h1>

JavaScript

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

splitAll();

const stage = document.querySelector('.mischief');

stage.addEventListener('pointermove', (event) => {
  // Update a target position here, then let
  // requestAnimationFrame ease the mouse and words.
});

Visual mode keeps one accessible source sentence while the hidden decorative words react to pointer math. This demo eases every movement through requestAnimationFrame so scroll, pointer, and word transforms stay in sync.