Edoardo Lunardi

New open source library: kugiri (区切り). Already running in production on several of my sites, now public. It splits text into lines, words and characters, the thing every text reveal needs. The difference is where it cuts. Most splitters guess where a line breaks, and the guess falls apart the moment the text does something real: text-wrap: balance, hyphenation, a drop cap, a float, a link that wraps, RTL, Japanese. kugiri does not guess. It asks the browser where the lines already are and cuts exactly there, so the split text looks pixel for pixel like the text before it. No animation, no scroll watching, no opinions. Every unit gets an index and the library gets out of the way. Animate with CSS, the Web Animations API, GSAP or Motion. One file, no dependencies, about 7 kB gzipped. The demo is also the test suite: fifty situations, each checked against what the browser painted, in Chromium, WebKit and Firefox. Demo: npm: Source:

42,401 views