---
title: "Masked Video FX — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Mattia Astorino · Backgrounds. Masked Video FX brings advanced video masking to Framer."
canonical: "https://framer.elliotli.dev/component/masked-video-fx"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Masked Video FX

# Masked Video FX

Create unique patterns from videos

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

![Masked Video FX preview image 1](https://framer.elliotli.dev/og/component/masked-video-fx/65f0bd2b15064a12/1600x1200.jpg)

## Summary

Masked Video FX brings advanced video masking to Framer.

## Description

Create video sections with custom SVG masks, pattern effects, blur, color shifts, and full playback controls directly inside Framer.

[SOME EXAMPLE](https://quaint-orchid-006743.framer.app/demo)

Use this code `WI475I7W` to get a gorgeous 50% discount for the first 50 people.

**Masked Video FX** brings advanced video masking to Framer. Create animated backgrounds, pattern-based video reveals, and high-end visual effects using custom SVG masks. Control the mask source, size, repeat, position, blur, color shift, opacity, and playback settings directly from the Framer interface. Combine SVG Masks with SMIL to create animated masks to apply on your video.

Perfect for designers who want to add motion, depth, and texture to landing pages, portfolios, hero sections, and creative websites without building a custom video masking setup from scratch.

-   **Custom SVG masks**Use either an external SVG URL or paste an inline SVG string directly into the component.
    
-   **Flexible mask controls**
    
    Adjust mask size, repeat behavior, and position using standard CSS values.
    
-   **Video playback options**
    
    Enable or disable autoplay, loop, and muted playback from Framer controls.
    
-   **Creative visual effects**
    
    Add blur, change hue rotation, and control opacity to create more atmospheric video treatments.
    
-   **Responsive by design**
    
    The video fills the component area and adapts to any Framer layout size.
    
-   **No code needed after setup**
    
    All key settings are exposed in the Framer property controls panel.
    
-   **Great for premium visuals**
    
    Useful for hero sections, animated textures, background loops, editorial layouts, and portfolio pages.
    

If you don't know where to start, explore [pattern.monster](https://pattern.monster) to find some cool pattern, and ask you AI to animate it with SMIL.

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

-   All · #8045

## Details

- **Author**: Mattia Astorino
- **Price**: $7.00
- **Published**: 2026-06-06
- **Updated**: 2026-06-26
- **Added**: 2026-05-29
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background