Hero Video Reveal

About This Component

Hero Video Reveal is designed to create immersive sections where a video smoothly appears and expands to fill its container.

The animation combines an entrance motion and a scalable reveal effect. The initial clip (Clip Size) respects the aspect ratio of the component, ensuring a clean and consistent visual before expanding to full size.

Videos are autoplayed, muted by default, and loop seamlessly, creating a smooth, distraction-free experience.

It works perfectly for full-width, 100vh hero sections, but can also be used at any size or placed deeper in a page, as the animation triggers when the component enters the viewport.

Usage Note

The component includes a simple built-in text layer for quick setups.

However, you can completely disable it (Show Text: No) and use the component as a pure background element.

For advanced layouts, you can place the component in absolute positioning and layer any content on top (header, titles, text, buttons, pictures, menu, etc.). By matching your content animation delays with the reveal timing, you can create polished, high-end hero compositions.

Demo with uploaded video — Demo with YouTube video

Key Features

Video Sources

• Supports uploaded videos

• Supports YouTube videos

• Optional custom poster or automatic YouTube thumbnail

• Videos are displayed in true cover mode (no black bars, including YouTube)

Reveal & Animation Controls

• Sequence (On / Off) lets you separate the entrance animation from the clip expansion

• Enter Direction controls how the video enters the scene (top, bottom, left, right)

• Enter Transition defines the duration of the entrance animation

• Enter Delay sets the delay before the animation starts

• Clip Size defines the initial visible size of the video (from 0% to 100%)

• Clip Transition controls how long the expansion takes

• Clip Delay adds a delay before the expansion begins

• Clip Fill adds a background behind the clip for opacity or layering effects

• Start Opacity controls the opacity of the video during entry

• End Opacity defines the final opacity once the video fills the container

• Autoplay, Loop, Muted, and Plays Inline are fully supported

• Background lets you define the global background color of the component

• Lock Scroll prevents page scrolling until the animation is complete

Overlay Text

• Multi-line text support

• Custom text color

• Full typography control

• Animation transition, delay, and stagger

• Adjustable vertical Y offset animation

This text layer is optional and meant as a quick starting point. You can fully disable it and use your own overlay content instead.

Layout Flexibility

• Works at any dimension

• Ideal for full-width / 100vh hero sections

• Can be used in smaller sections or components

• Animation triggers when entering the viewport

How to Set Up

1. Drag Hero Video Reveal onto your canvas

2. Choose your video source (upload or YouTube)

3. Adjust the component size (full-width or custom)

4. Add overlay content using absolute positioning if needed

5. Publish

Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at hellonostromostudio@gmail.com before completing your purchase. I’m happy to help.

Enjoy!