Pointer field / words in orbit

Every idea has gravity when attention gives it orbit.

Let the sentence drift around your pointer.

Basic recipe

Place words in a field

HTML

<h1 data-a11y-text-split
    data-split-type="words"
    data-split-mode="visual">
  Every idea has gravity...
</h1>

JavaScript

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

splitAll();

const tokens = document.querySelectorAll(
  '[data-split-word], [data-split-punctuation]'
);

tokens.forEach((token, index) => {
  token.style.setProperty('--orbit-index', index);
});

Visual mode exposes the original sentence once, then lets the decorative split words take on a completely different composition.