Word loom

The idea

A sentence unfolds in a small wave. Switch from words to characters, change the rhythm, or try the Japanese and emoji preset. The interesting part is deciding what a “character” actually is.

Split language, not bytes

Intl.Segmenter finds word or grapheme boundaries. A grapheme is a user-perceived character: an emoji with a skin tone modifier can contain multiple code points but should still move as one piece.

const segmenter = new Intl.Segmenter(undefined, {  granularity: "grapheme",});
const pieces = Array.from(  segmenter.segment("A little curiosity 👩🏽‍💻"),  item => item.segment,);

Using undefined selects the runtime's default locale. For a known language, pass its locale explicitly. Word boundaries can differ by locale and by the browser's Unicode data.

Animate on demand

The Web Animations API animates the rendered pieces when Replay is pressed. The stagger is capped so a longer sentence cannot create an excessively long wait.

const animations = elements.map((element, index) =>  element.animate(    [      { opacity: 0, transform: "translateY(18px) rotate(3deg)" },      { opacity: 1, transform: "translateY(0) rotate(0)" },    ],    {      duration: 650,      delay: index * Math.min(stagger, 1800 / elements.length),      easing: "cubic-bezier(.2,.7,.2,1)",      fill: "backwards",    },  ),);
// Cancel when replacing the text or leaving the component.animations.forEach(animation => animation.cancel());

The final line belongs in cleanup, not immediately after starting the animation. The live demo also softens the entrance with a small blur.

A readable baseline

The original sentence remains available to assistive technology as one passage. Decorative animated fragments are hidden from screen readers. Reduced motion skips the animation, and missing segmentation support keeps the whole sentence intact. Text is limited to 120 characters to keep the DOM and animation work small.

Further reading

• Intl.Segmenter — MDN
• Element.animate() — MDN