Text Rise

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

Riseintoplace.

Customize

Trigger

Word stagger (s)0.12s

Letter stagger (s)0.035s

Entry duration (s)0.7s

Exit duration (s)0.5s

Usage

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