Reveal Animate

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

reveal-animate

Reveal me, hide me.

0px

Customize

Edit props; preview updates instantly.

Customize

From

Duration (ms)

450ms

Props

Props accepted by RevealAnimate.

Prop	Type	Default	Description
children	ReactNode	—	Content to reveal.
trigger	boolean	true	Reveal when true, hide when false. Toggle to play.
from	"left" \| "right"	"left"	Side the reveal sweeps in from.
duration	number	450	Animation duration in milliseconds.
className	string	—	Extra class names merged onto the wrapper span.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/reveal-animate.json

Usage

Import the component and drop it into a render.

demo.tsx11 lines

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

Credits

CSS mask-imageMask sweep that drives the reveal treatment.