Text Rise

Per-letter slide-up with a soft blur — letters rise into place and lift away on exit.

text-rise

Riseintoplace.

0px

Customize

Edit props; preview updates instantly.

Customize

Word stagger (s)

0.12s

Letter stagger (s)

0.035s

Entry duration (s)

0.7s

Exit duration (s)

0.5s

Props

Props accepted by TextRise.

Prop	Type	Default	Description
text	string	—	Text to animate. Words split on spaces; each letter rises individually.
trigger	boolean	true	Toggle to play. `true` rises letters into place; `false` lifts them away.
wordStagger	number	0.12	Seconds between word starts.
letterStagger	number	0.035	Seconds between letter starts inside a word.
entryDuration	number	0.7	Entry animation duration in seconds.
exitDuration	number	0.5	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-rise.json

Usage

Import the component and drop it into a render.

demo.tsx15 lines

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

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