Box Reveal

An animated box reveal effect with customizable colors, duration, and delay.

API

Prop NameTypeDefaultDescription
colorstring"#5046e6"Background color of the reveal box.
durationnumber0.5Duration of the reveal animation in seconds.
delaynumber0.25Delay before the reveal animation starts in seconds.
classstring""Additional CSS classes for custom styling.

Component Code

You can copy and paste the following code to create this component:

BoxReveal.vue

Features

  • Box Reveal Animation: Creates a sliding box reveal effect with smooth transitions.
  • Customizable Animation: Control the animation timing with the duration and delay props.
  • Slot-Based Content: Supports default slot content that appears once the reveal animation completes.
  • Custom Background Color: Easily customize the box's background color using the color prop.

Credits

Blur Reveal
A component to smoothly blur fade in content.
Bubbles Background
An animated background with floating bubbles.