Text Warp

Per-letter depth animation — letters zoom in blurred from below and dissolve outward on exit.

text-warp

Buildlazily.

0px

Customize

Edit props; preview updates instantly.

Customize

Word stagger (s)

0.20s

Letter stagger (s)

0.04s

Entry duration (s)

1.2s

Exit duration (s)

1.6s

Props

Props accepted by TextWarp.

Prop	Type	Default	Description
text	string	—	Text to animate. Words split on spaces; each letter is its own motion span.
trigger	boolean	true	Toggle to play. `true` runs the entry (letters zoom in from depth); `false` runs the exit (letters dissolve outward).
wordStagger	number	0.2	Seconds between word starts. Drives the parent motion variant's `staggerChildren`.
letterStagger	number	0.04	Seconds between letter starts inside a word. Drives the word's `staggerChildren`.
entryDuration	number	1.2	Entry animation duration in seconds.
exitDuration	number	1.6	Exit animation duration in seconds.
className	string	—	Extra class names merged onto the root span.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/text-warp.json

Usage

Import the component and drop it into a render.

demo.tsx15 lines

import { useState } from "react";
import { TextWarp } from "@/components/lazy-ui/text-animate/text-warp";

export function Demo() {
  const [shown, setShown] = useState(true);
  return (
    <button onClick={() => setShown((v) => !v)}>
      <TextWarp
        text="Animate every letter."
        trigger={shown}
        className="text-5xl font-light text-neutral-100"
      />
    </button>
  );
}