The appearance and motion of text can have a major impact on how a page feels.

HTML and CSS alone can handle a certain amount of styling, but effects such as switching text strings or morphing, where character shapes transition smoothly into each other, take time to implement and fine-tune from scratch. When text needs to change, using a JavaScript library that fits the purpose lets you create polished effects without building complex logic yourself.

This article introduces several JavaScript libraries for text effects, including their characteristics, suitable use cases, and impressions from trying them.

JavaScript libraries covered

The libraries introduced in this article were selected based on the following criteria as of July 2026.

• Not designed exclusively for a specific framework such as React or Vue.js
• Released under the MIT License, allowing both personal and commercial use
• Able to implement effects related to the appearance or transformation of text

With text effects, it is important to consider not only appearance but also accessibility, including screen readers, text selection, and copying. Check whether the original text remains in a readable structure, and whether decorative characters interfere with selection or copying.

slot-text

slot-text is a library for switching short UI labels like a slot reel. It is well suited to cases where you want to show that a state has changed, such as Copy / Copied, Online / Offline, or Saving / Done.

In the demo below, the text switches with an animation where each character changes vertically. Compared with a simple cross-fade, the response to the interaction is easier to perceive, giving the UI a more tactile feel. This works better for short labels such as buttons and badges than for long text passages.

• Open the demo in a new window
• View the source code

import { slotText } from "slot-text";

// Pass the initial text and create a controller for the target element.
const label = slotText(document.querySelector(".js-copy-label-en"), "Copy");

// Passing the next string to set() switches it with a slot-like effect.
label.set("Copied", {
  direction: "up",
});

NumberFlow

NumberFlow is a library for smoothly animating changes in numeric values. It is available for React, Vue.js, Svelte, and vanilla JavaScript/TypeScript, and internally it is implemented using Web Components Custom Elements. When using a framework, you can use the dedicated component; when using vanilla JavaScript, you can treat it as a custom element called <number-flow>. By specifying values and display formats, you can easily add animation to numeric expressions such as count-ups, prices, and percentages.

NumberFlow has around 7,400 GitHub Stars, making it one of the most notable libraries covered here. Instead of numbers changing abruptly, each digit moves naturally, which makes it useful for presenting the fact that a value has been updated, such as in dashboards or price displays on e-commerce sites.

• Open the demo in a new window
• View the source code

<!-- Add a custom element where the number should appear. The element can be empty. -->
<number-flow class="js-flow"></number-flow>

// Importing the package enables the <number-flow> tag.
import { continuous } from "number-flow";

const flow = document.querySelector(".js-flow");

// Set the display format, locale, and motion plugin on the element.
flow.locales = "ja-JP";
flow.format = { maximumFractionDigits: 0 };
flow.plugins = [continuous];

// Passing a number to update() animates the difference.
flow.update(12480);

Torph

Torph is a library for smoothly morphing text strings. When used to switch headlines or keywords, it creates the impression that one word is flowing into the next rather than simply being replaced.

The effect is visually striking, but it is easier to handle when used for short hero copy or specific words rather than body text that users need to read carefully. The smooth horizontal transition feels pleasant.

• Open the demo in a new window
• View the source code

import { TextMorph } from "torph";

const wordElement = document.querySelector(".js-morph-word");

// Create a TextMorph instance with the target element and animation settings.
const wordMorph = new TextMorph({
  element: wordElement,
  duration: 460,
  ease: "cubic-bezier(0.19, 1, 0.22, 1)",
  locale: "ja",
});

// update() morphs the element to the next string.
wordMorph.update("Copied");

shuffle-text

shuffle-text is a library for creating an effect where random characters change rapidly and converge into the intended text. It works well when you want a cyber-like feel or the atmosphere of retro Flash content, and it is easy to use for headlines and menus where you want a stronger visual effect.

shuffle-text was created by Ikeda at ICS. For basic usage and production examples, see the article JavaScript library shuffle-text for Scramble Text.

The visual impact is strong, so it should be useful when it matches the tone of the site.

• Open the demo in a new window
• View the source code

import ShuffleText from "shuffle-text";

const title = document.querySelector(".js-shuffle-title");

// Create a ShuffleText instance with the target element.
const shuffle = new ShuffleText(title);

shuffle.duration = 760;
shuffle.emptyCharacter = ".";

// Specify the final text with setText(), then play the effect with start().
shuffle.setText("COPY FROM THE FUTURE");
shuffle.start();

Fitty

Fitty is a library that automatically adjusts text size to fit the width of the parent element. It is useful when you want headlines or catch copy to sit neatly inside a container.

Unlike the other libraries, Fitty is not for adding animation. It is useful for refining the appearance of text. In card titles, variable-width headlines, responsive hero copy, and similar cases, it helps prevent text from wrapping too much or appearing too small.

Fitty has around 3,800 GitHub Stars. It is also simple to install and easy to apply later to existing HTML.

• Open the demo in a new window
• View the source code

import fitty from "fitty";

const frame = document.querySelector(".js-fit-frame");
const title = document.querySelector(".js-fit-title");

// Specify the target text and the font-size range to adjust within.
const fittedTitle = fitty(title, {
  minSize: 10,
  maxSize: 220,
});

frame.style.setProperty("--fit-width", "280px");

// When the parent element's width changes, call fit() to recalculate.
fittedTitle.fit({ sync: true });

In Chrome 150 and Edge 150, released around July 2026, the CSS text-fit property became available. This property adjusts the font size of a text node so that it fits within the width of its containing box.

• Reference: Chrome 150 | Release notes | Chrome for Developers

There will likely be more situations where text can be fit to a container width using only CSS. However, as of July 2026, browser support is still limited, so Fitty is a good option when you need the same behavior across browsers.

Conclusion

Effects that are still difficult to create with CSS alone, or that tend to look unpolished when implemented from scratch, can often be added more easily with JavaScript libraries.

AI-assisted implementation is also becoming more common, but even when asking AI to implement something, being able to specify “use this library” helps avoid spending too much time on fine-grained animation tuning.

At the same time, text is the information you want to communicate to users. Be careful that animation does not make text harder to read or temporarily obscure important content. These effects are best used selectively in places where change needs to be communicated, such as short labels, headlines, and status displays.

For CSS techniques for refining the appearance of text, also see CSS techniques for improving text selection, carets, and highlights.