Reveal Animate

A masked text reveal that sweeps content in or out with blur.

Hello, world.

Customize

From

Duration (ms)450ms

Usage

import { useState } from "react";
import { RevealAnimate } from "@/components/lazy-ui/reveal-animate";

export function Demo() {
  const [shown, setShown] = useState(true);
  return (
    <button onClick={() => setShown((v) => !v)}>
      <RevealAnimate trigger={shown}>Hello, world.</RevealAnimate>
    </button>
  );
}