Signals can be woven into small bright places.

Focused word: woven

Sticky scroll variation

Thread the sentence through the moving viewport.

The stage stays pinned while scroll progress pulls each word into place.

Basic recipe

Map controls and scroll to words

HTML

<input type="range" min="0">

<h1 data-a11y-text-split
    data-split-type="words">
  Signals can be woven...
</h1>

<section data-split-scroll>
  <h2 data-a11y-text-split
      data-split-type="words"
      data-split-mode="visual">
    Thread the sentence...
  </h2>
</section>

JavaScript

splitAll();

const words = [...document.querySelectorAll(
  '[data-split-word]'
)];

slider.max = words.length - 1;

function update(index) {
  words.forEach((word, wordIndex) => {
    word.style.setProperty(
      '--focus-distance',
      Math.abs(wordIndex - index)
    );
  });
}

scrollRevealAll('.loom-scroll');

Semantic word splitting pairs well with real controls because the words stay normal text while CSS handles the emphasis. The sticky variation uses visual mode so the scroll animation can freely restage the decorative words without duplicating the accessible heading.