---
title: "Text Video Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by sherwin · Interactive. SVG Mask Text Video Reveal"
canonical: "https://framer.elliotli.dev/component/text-video-reveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Text Video Reveal

# Text Video Reveal

SVG Mask Text Video Reveal

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

![Text Video Reveal preview image 1](https://framer.elliotli.dev/og/component/text-video-reveal/96914f56d244484f/1600x1200.jpg)

## Summary

SVG Mask Text Video Reveal

## Description

Transform your website’s landing page into a premium cinematic experience. This production-ready Framer component features a **scroll-driven animation** where bold, customizable SVG text acts as a dynamic mask. As the user scrolls, the text scales seamlessly from the center to fill the screen, flawlessly transitioning into a full-bleed, immersive video reveal.

Perfect for portfolios, creative agencies, and product launches looking to make an unforgettable first impression.

### Key Features

-   **100% Scroll-Driven Precision:** Perfectly synchronized with the native browser scroll, offering a butter-smooth scaling effect.
    
-   **Immersive Video Background:** Supports high-quality background video that unlocks seamlessly as the mask expands.
    
-   **Fully Responsive:** Engineered to scale perfectly across Desktop, Tablet, and Mobile devices without breaking the layout.
    
-   **No-Code Customization:** Text can customize easily via the Framer properties panel.
    

### How It Works

1.  **The Hook:** The user lands on a clean section featuring bold, minimalist text overlaying a dimmed canvas.
    
2.  **The Scroll:** As they scroll down, the text scales up smoothly, acting as a portal. The video is subtly visible _inside_ the letters.
    
3.  **The Reveal:** The text expands past the viewport boundaries until the mask disappears entirely, locking the full-screen video into place.
    

### What’s Included?

-   **Ready-to-Use Framer Component:** Simply copy and paste it into your existing project.
    

### Perfect For:

-   **Design Portfolios** looking for a high-end, premium feel.
    
-   **Product Launches** wanting to reveal a sleek promotional video.
    
-   **Creative Agencies** aiming to showcase their front-end interactive capabilities.
    

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

-   All · #5099

## Details

- **Author**: sherwin
- **Published**: 2026-06-17
- **Updated**: 2026-10-03
- **Added**: 2026-06-17
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase