vysmo
@vysmo/text Library DOM

Text for the modern web.

Multi-property choreographed text animation. splitText (grapheme-safe via Intl.Segmenter) + animateText (single master clock, back-fill, repeat). 229 generated + 14 curated presets across enter, exit, and emphasis.

  • 243 presets
  • ~3 KB gzipped
  • Intl.Segmenter grapheme-safe split
  • tree-shakable import what you ship
$ pnpm add @vysmo/text View on GitHub

Two patterns to start with

Drop a named preset on any element, or import the preset object directly so only that one ships in your bundle.

By name

import { animateText } from "@vysmo/text";

// Drop a preset on any element. animateText splits the text, applies
// the preset's choreography, and starts playing on mount.
animateText(element, { preset: "enter/fade-up" });

Tree-shaken

import { animateText, fadeUp } from "@vysmo/text";

// Pass the preset object instead of the string name and only that
// preset ships in your bundle. The other 242 stay tree-shaken out.
animateText(element, { preset: fadeUp });
Read the full docs

Built for

Hero headlines

The big text on a landing page deserves to arrive. Pair an enter preset with a small delay after the page paints — the headline reads first, then choreographs into place.

Section reveals on scroll

autoPlay: false + handle.play() inside an IntersectionObserver callback gives you reveal-on- scroll without hand-rolling staggered timeline math.

Scroll-driven scrub

handle.seek(progress) drives any progress value straight into the choreography — pair with @vysmo/scroll for cinematic word-by-word reveals tied to scroll position.

Emphasis on action

emphasis/pulse, shake, wobble, spin, coin-flip all autoloop. Wire one to handle.play() on click / hover / state-change to draw attention without breaking flow.

Designed kinetic typography

Skip the presets, declare animations: [...] directly. Multi-prop choreography with per-spec stagger and stagger-order knobs gives you GSAP-quality timelines without GSAP-sized bundles.

Multilingual UIs

splitText uses Intl.Segmenter for grapheme-safe splitting. Word and line modes work across LTR / RTL / connected scripts.