Skip to main content
Create engaging box reveal animations with customizable colors, duration, and timing.

​
Usage

<BoxReveal
  color="#5046e6"
  :duration="0.5"
  :delay="0.25"
>
  <h1>Your revealed content</h1>
</BoxReveal>

​
Props

​
color
string
default:"#5046e6"
Background color of the reveal box.
​
duration
number
default:"0.5"
Duration of the reveal animation in seconds.
​
delay
number
default:"0.25"
Delay before the reveal animation starts in seconds.
​
class
string
default:""
Additional CSS classes for custom styling.

​
Credits

Ported from Magic UI Box Reveal.

Build docs developers (and LLMs) love

Get started for freeTalk to us