Text Warp

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

Buildlazily.

Customize

Trigger

Word stagger (s)0.20s

Letter stagger (s)0.04s

Entry duration (s)1.2s

Exit duration (s)1.6s

Usage

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>
  );
}