HTML
<h1 data-a11y-text-split
data-split-type="words">
Curiosity turns ordinary moments...
</h1>
Hover a word
Basic recipe
<h1 data-a11y-text-split
data-split-type="words">
Curiosity turns ordinary moments...
</h1>
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.