---
title: "Hero Video Reveal — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Nostromo Studio · Sections. About This Component Hero Video Reveal is designed to create immersive sections where a video smoothly appears and expands…"
canonical: "https://framer.elliotli.dev/component/hero-video-reveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Hero Video Reveal

# Hero Video Reveal

Expanding Video Reveal Interaction

[View on Framer](https://framer.com/marketplace/components/hero-video-reveal/?via=elliot-li)

![Hero Video Reveal preview image 1](https://framer.elliotli.dev/og/component/hero-video-reveal/d8bdd1424b732fb6/1600x1200.jpg)

## Summary

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

## Description

## 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](https://herovideoreveal-component.framer.website/) — [Demo with YouTube video](https://herovideoreveal-component.framer.website/youtube)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-vofdfdjs-jwbQJfvcpGlIifSsX50eaW1QBZRQ1f)

## 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**
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-vofdfdjs-cPAo4N55YcHzqEiFUBrTuxQZOhqMsZ)

## 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](mailto:hellonostromostudio@gmail.com) before completing your purchase. I’m happy to help.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #1939

## Details

- **Author**: Nostromo Studio
- **Price**: $14.00
- **Published**: 2026-04-15
- **Updated**: 2026-04-21
- **Added**: 2026-03-28
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove