Text Animate React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Pro item: the CLI needs a Pro account. See plans

Usage

Import TextAnimate from @/components/ui/text-animate.

import { TextAnimate } from "@/components/ui/text-animate"

export function Hero() {
  return (
    <section className="mx-auto max-w-2xl text-center">
      <TextAnimate as="h1" effect="blur" by="word" trigger="mount" className="text-5xl font-semibold tracking-tight">
        Ship polished interfaces in an afternoon
      </TextAnimate>
      <TextAnimate effect="slide-up" by="line" trigger="mount" delay={400} stagger={100} className="mt-4 text-lg text-muted-foreground">
        {"Copy the source, keep full control.\nEvery component works on phones first."}
      </TextAnimate>
    </section>
  )
}

// A typewriter with a caret:
// <TextAnimate effect="typewriter" speed={40}>npx wingo-ui add text-animate</TextAnimate>

Props

• children*default "Interfaces that feel alive"
  string

  The text, as a plain string. Line breaks (\n) start a new line and mark the segments for by="line".

• asdefault "p"
  "h1" | "h2" | "h3" | "p" | "span" | "div"

  The element to render, so a headline stays a real heading for SEO and screen readers.

• effectdefault "blur"
  "fade" | "blur" | "slide-up" | "slide-down" | "scale" | "typewriter"

  How each piece enters. blur sharpens from an 8px blur while rising slightly; typewriter types character by character with a caret.

• bydefault "word"
  "word" | "char" | "line"

  The unit that animates. char keeps whole words together so a line never breaks mid-word. Ignored by the typewriter, which always types by character.

• triggerdefault "in-view"
  "mount" | "in-view"

  mount plays as soon as the page loads; in-view waits until the text scrolls into view.

• oncedefault true
  boolean

  With in-view, plays the first time only. Turn it off to hide the text again when it leaves the screen and replay it on the way back.

• amountdefault 0.4
  number

  With in-view, how much of the text (0 to 1) has to be visible before it plays.

• delaydefault 0
  number

  Milliseconds before the first piece starts. Handy for a subtitle that follows its headline.

• staggerdefault 40
  number

  Milliseconds between one piece and the next. Try 15 to 25 for characters and 80 to 120 for lines.

• speeddefault 35
  number

  Typewriter only: milliseconds per character, spaces included.

• caretdefault true
  boolean

  Typewriter only: shows a caret that follows the last typed character and stays at the end.

• caretBlinkdefault true
  boolean

  Typewriter only: makes the caret blink. It never blinks with reduced motion on.

• animatedefault ""
  boolean

  Controls playback yourself and ignores trigger: false hides the text instantly, true plays it. Turn it off and on again to replay. Unset (Default in the playground) follows trigger.

• onComplete
  () => void

  Called once the last piece has finished entering, again after every replay.

• classNames
  Partial<Record<"segment" | "caret", string>>

  Extra classes for each animated piece and for the typewriter caret.

• className
  string

  Extra classes for the root element: font size, weight, color and alignment go here.

• ref
  Ref<HTMLElement> (a useRef object or an (el) => void callback)

  The root element (the h1, p or whichever tag as picks).

Parts

FAQ

More React effect components