---
title: "SVG Mask Intro — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Konstantin Nikolaev · Interactive. Reveal Your Hero with a custom SVG"
canonical: "https://framer.elliotli.dev/component/svg-mask-intro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/SVG Mask Intro

# SVG Mask Intro

Reveal Your Hero with a custom SVG

[View on Framer](https://framer.com/marketplace/components/svg-mask-intro/?via=elliot-li)

![SVG Mask Intro preview image 1](https://framer.elliotli.dev/og/component/svg-mask-intro/b6cfefb7d4007eb3/1600x1200.jpg)

## Summary

Reveal Your Hero with a custom SVG

## Description

Create cinematic page intros using any SVG as a fullscreen reveal mask. Upload your logo or shape, choose an overlay color, and customize its position, starting size, animation delay, duration, easing, and final reveal point. The mask expands automatically to uncover the page underneath. Choose whether it plays on every visit or once per session, preview the animation directly on the Framer Canvas, and trigger additional interactions when the reveal completes.

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

-   All · #1323

## Details

- **Author**: Konstantin Nikolaev
- **Price**: $7.00
- **Published**: 2026-08-28
- **Updated**: 2026-10-10
- **Added**: 2026-08-28
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step