Reveal Effect

Animates content into view with a vertical slide, blur fade-in, and clipping reveal effect.

ReactHTML

Installation

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

Usage

Assign the class="reveal-effect" to any element to apply the reveal effect.

<div class="reveal-effect">
  <h1>Reveal Effect</h1>
</div>

Data Attributes

Data AttributeTypeDefaultDescription
data-speedstring"medium"Animation speed, can be "slow", "medium", or "fast"
data-delaynumber0Delay before the animation starts
data-translateynumber0The Y-axis translation from where the element will initially begin animation

Examples

Speed

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

<div>
  <div class="reveal-effect" data-speed="fast">...</div>
 
  <div class="reveal-effect" data-speed="slow">...</div>
</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>
  <div class="reveal-effect" data-delay="0.2">...</div>
 
  <div class="reveal-effect" data-delay="0.5">...</div>
</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>
  <div class="reveal-effect" data-translatey="10">...</div>
 
  <div class="reveal-effect" data-translatey="15">...</div>
</div>
Letter SwapBox Reveal