Text Spin

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

text-spin

Flipintoview.

0px

Customize

Edit props; preview updates instantly.

Customize

Word stagger (s)

0.14s

Letter stagger (s)

0.04s

Entry duration (s)

0.8s

Exit duration (s)

0.6s

Props

Props accepted by TextSpin.

Prop	Type	Default	Description
text	string	—	Text to animate. Words split on spaces; each letter flips individually.
trigger	boolean	true	Toggle to play. `true` flips letters in; `false` rolls them out.
wordStagger	number	0.14	Seconds between word starts.
letterStagger	number	0.04	Seconds between letter starts inside a word.
entryDuration	number	0.8	Entry animation duration in seconds.
exitDuration	number	0.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-spin.json

Usage

Import the component and drop it into a render.

demo.tsx15 lines

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