Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/reveal-effect.json

Usage

import { RevealEffect } from "@/components/reveal-effect";

<RevealEffect>
  <h1>Reveal Effect</h1>
</RevealEffect>
 
<RevealEffect>
  // Pass any children here, and the reveal effect will be applied to it.
</RevealEffect>

Props / Data Attributes

Example

Speed

To change the speed of the animation, you can pass the speed prop or use the data-speed attribute. The default speed is "medium". You can set it to "slow" or "fast".

<div>
  <RevealEffect speed="slow">...</RevealEffect>
 
  <RevealEffect speed="fast">...</RevealEffect>
</div>

Delay

To add a delay before the animation starts, you can pass the delay prop or use the data-delay attribute. The default delay is 0.

<div>
  <RevealEffect delay={0.2}>...</RevealEffect>
 
  <RevealEffect delay={0.5}>...</RevealEffect>
</div>

Translate Y

To change the Y-axis translation from where the element will initially begin animation, you can pass the translateY prop or use the data-translatey attribute. The default value is 0. You can set the value between 10-15 for a subtle effect or any other value suitable for your needs. Pair translateY with a small delay for a more pronounced effect.

<div>
  <RevealEffect translateY={10}>...</RevealEffect>
 
  <RevealEffect translateY={15}>...</RevealEffect>
</div>