Text Spin

Per-letter 3D X-axis flip — letters tumble in through a small perspective and roll out on exit.

Flipintoview.

Customize

Trigger

Word stagger (s)0.14s

Letter stagger (s)0.04s

Entry duration (s)0.8s

Exit duration (s)0.6s

Usage

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

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