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>

You can increase/decrease the speed of the animation by passing the speed prop.

Props

Examples

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>