Text that moves like air

Gust animates changing React text one character at a time. Shared prefixes stay put while old glyphs lift out and new ones settle in.

$ bun add @maniktherana/gustbun add @maniktherana/gustbun add @maniktherana/gust

import { useEffect, useState } from "react";
import { Gust } from "@maniktherana/gust";
import "@maniktherana/gust/styles.css";

const messages = ["Queued", "Building", "Live"];

export function GustExample() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setIndex((current) => (current + 1) % messages.length);
    }, 2000);

    return () => window.clearInterval(timer);
  }, []);

  return <Gust value={messages[index] ?? ""} />;
}

Import the stylesheet once in your app.

How it works

Gust leaves the shared prefix untouched and staggers only the characters that changed. New glyphs rise from below, fade and sharpen into view, overshoot slightly, then settle; outgoing glyphs lift away, blur, shrink, and disappear while the word eases to its new width.

Props

Prop	Default	Description
value	-	The controlled string. Animates whenever its value changes.
className	-	Style the rendered text with CSS or utility classes.
duration	440	Incoming character duration, in milliseconds.
exitDuration	400	Outgoing character duration, in milliseconds.
enterAngle	-90°	Incoming travel direction. -90° moves up.
exitAngle	-90°	Outgoing travel direction. -90° moves up.
down	false	Send both directions down unless an angle overrides it.
stagger	20	Delay between neighboring characters, in milliseconds.
entranceHeight	12	Entrance overshoot distance.
entranceOffset	90	Initial entry distance, where 100 equals 1em.
entranceScale	1.1	Peak scale during entrance.
exitHeight	90	Exit distance as a percentage of line height.
exitScale	0.4	Final scale for outgoing characters.
exitBlurCap	4	Maximum exit blur, in pixels.
blur	true	Blur outgoing characters as they exit.
scale	true	Scale characters as they enter and exit.
preservePrefix	true	Keep matching leading characters still.

When Gust fits

Good for

Action labels that move through states: Save, Saving…, Saved.
Prices and counters where only a few digits change.
Status changes such as deploys, uploads, presence, and build steps.
Compact headlines cycling through a few phrases.

Skip it for

Paragraphs and long sentences. Gust animates characters, not reading flow.
Telemetry that updates before the current transition can finish.