---
title: "Mask Carousel — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Saadat Ali · Carousels. Endless Masked Media Slider"
canonical: "https://framer.elliotli.dev/component/mask-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Mask Carousel

# Mask Carousel

Endless Masked Media Slider

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

![Mask Carousel preview image 1](https://framer.elliotli.dev/og/component/mask-carousel/cd407129384c4136/1600x1200.jpg)

## Summary

Endless Masked Media Slider

## Description

Add a premium infinite scrolling media carousel to your site with custom SVG masking, smooth WebGL physics, and progressive edge blurring for a high-end cinematic feel.

## **Features**

-   Endless looping WebGL carousel physics
    
-   Custom SVG and PNG mask support (Alpha & Luma modes)
    
-   Progressive scroll edge blur overlay
    
-   Real-time media contrast and saturation controls
    
-   Smooth touch drag and trackpad wheel scrolling
    
-   Auto-play with customizable damping and speed
    
-   Horizontal and vertical layout direction modes
    
-   High-performance resource caching and memory management
    
-   Pauses WebGL rendering when off-screen for peak site speed
    
-   Responsive auto-resizing and native Framer integration
    

## **Customization Options**

-   Media items (Images & Videos)
    
-   Custom SVG or PNG masks
    
-   Mask modes (Alpha Transparent or Luma B/W)
    
-   Carousel layout direction (Horizontal / Vertical)
    
-   Item width, height, and gap spacing
    
-   Edge blur strength and coverage size
    
-   Media contrast and saturation
    
-   Scroll damping (motion smoothness)
    
-   Drag, wheel, and auto-play speeds
    

## **How to Use**

-   Drop the component onto your Framer canvas
    
-   Upload your images, videos, and custom SVG masks
    
-   Choose your layout direction (horizontal or vertical)
    
-   Tune the gap sizing and media dimensions to fit your layout
    
-   Adjust the progressive edge blur, contrast, and scrolling speeds
    
-   Publish for a premium, highly optimized WebGL interactive slider
    

## **Use Cases**

-   Premium SaaS feature showcases
    
-   Creative agency portfolios
    
-   High-end eCommerce product galleries
    
-   Interactive masking slider sections
    
-   Client logo ticker loops
    
-   Video highlight reels
    
-   Immersive landing page hero sections
    
-   Modern interactive UI systems
    

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

-   All · #834

## Details

- **Author**: Saadat Ali
- **Price**: $7.00
- **Published**: 2026-08-18
- **Updated**: 2026-08-23
- **Added**: 2026-08-18
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view