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.
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
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)
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
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.
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
Drag Hero Video Reveal onto your canvas
Choose your video source (upload or YouTube)
Adjust the component size (full-width or custom)
Add overlay content using absolute positioning if needed
Publish
All sales of digital products are final and non-refundable.
If you have any questions about the product, please contact me at pierrevion90@gmail.com before completing your purchase. I’m happy to help.
Enjoy!
Nostromo Studio
