Mask Carousel

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