Elevate Your Landing Page with SVG Mask Text Video RevealElevate Your Landing Page with SVG Mask Text Video Reveal
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
sherwin's avatar
sherwin hermogenes
• 6h
SVG Mask Text Video Reveal
https://framer.link/3fRnVc3
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.
#framer #framercomponent
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started