component
Mask Carousel
By Saadat Ali

Details
- Saadat AliAuthor
- componentType
- $7.00Price
- 2026-08-18Published
- 2026-08-23Updated
- 2026-08-18Added
- CarouselsCategories
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
Introduction
Endless Masked Media Slider
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #113