Word loom

Die Idee

Ein Satz entfaltet sich in einer kleinen Welle. Wechsle zwischen Wörtern und Zeichen, ändere den Rhythmus oder probiere die Vorgabe mit Japanisch und Emojis. Interessant ist dabei, was ein „Zeichen“ eigentlich ausmacht.

Sprache zerlegen, nicht Bytes

Intl.Segmenter erkennt Wort- und Graphemgrenzen. Ein Graphem ist ein als einzelnes Zeichen wahrgenommenes Element: Ein Emoji mit Hautfarbenmodifikator kann mehrere Codepoints enthalten und sollte sich trotzdem als Einheit bewegen.

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

Mit undefined wird die Standardsprache der Laufzeit verwendet. Ist die Sprache bekannt, sollte ihre Locale ausdrücklich übergeben werden. Wortgrenzen können je nach Sprache und Unicode-Daten des Browsers variieren.

Bei Bedarf animieren

Die Web Animations API animiert die dargestellten Teile, sobald du „Wiederholen“ drückst. Die Staffelung ist begrenzt, damit längere Sätze keine übermäßig langen Wartezeiten erzeugen.

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());

Die letzte Zeile gehört in die Aufräumfunktion und darf nicht direkt nach dem Start ausgeführt werden. In der Demo wird der Einstieg zusätzlich durch eine leichte Unschärfe abgemildert.

Eine lesbare Grundlage

Der ursprüngliche Satz bleibt für assistive Technologien als zusammenhängender Text verfügbar. Die dekorativen Fragmente sind vor Screenreadern verborgen. Bei reduzierter Bewegung entfällt die Animation. Ohne Segmentierungsunterstützung bleibt der gesamte Satz erhalten. Die Eingabe ist auf 120 Zeichen begrenzt, damit DOM und Animation überschaubar bleiben.

Weiterlesen

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