slot-text

slot-text is a small JavaScript library that animates text labels with a rolling or slot-machine effect: when the text changes, the old characters slide out and the new characters slide in, one by one. It is designed for short UI labels like buttons, status indicators, or counters where a quick animated transition feels more polished than an instant swap.

The library has no dependencies and works in plain JavaScript, React, and Vue. You install it from npm, import a CSS file once, and then attach it to any HTML element. Two main methods cover the common cases: set() changes the text and leaves the new value in place permanently, while flash() temporarily swaps the text and then rolls it back to the original after a short delay. The flash method handles rapid repeated clicks gracefully by restarting the revert timer instead of stacking up extra animations.

Several options let you control how the animation looks and feels. You can choose whether characters roll upward or downward, adjust the timing between characters and the duration of each character's movement, tune a bounce overshoot, and assign a color to the incoming characters. A built-in helper called chromatic() cycles through rainbow hues across the characters if you want a colorful effect.

The library animates each character in its own measured cell using the element's actual font metrics, so it stays accurate across fonts. The trade-off is that tight letter-pair spacing (kerning) and typographic ligatures are lost because each character sits in its own slot. The authors note this is invisible at typical label sizes and that the library is best suited for short text: labels, numbers, statuses, and button states like "Copy" rolling to "Copied" and back.

React and Vue components are included as optional add-ons. Plain JavaScript users do not need either.