Hover a word

Curiosity turns ordinary moments into doors worth opening.

Basic recipe

Focus individual words

HTML

<h1 data-a11y-text-split
    data-split-type="words">
  Curiosity turns ordinary moments...
</h1>

JavaScript

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

splitAll();

// CSS applies the decorative hover effect to
// [data-split-word]:hover.

Semantic mode wraps the real words directly without creating duplicate text. The hover effect is decorative, so the words remain ordinary text instead of adding unnecessary keyboard stops.