Skip to content

component

Text Video Reveal

By sherwin

Details

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 The Hook: The user lands on a clean section featuring bold, minimalist text overlaying a dimmed canvas. The Scroll: As they scroll down, the text scales up smoothly, acting as a portal. The video is subtly visible inside the letters. 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.

Introduction

SVG Mask Text Video Reveal

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400157348/148/228/309/79/15
  • All · #4569