5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8ce,

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

5a:[["$","$L5d",null,{"post":{"id":"01a01355-8107-713f-99b9-5a99932574e0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7e6GjpAKENIzD6uj1oRR","resolved":true,"title":"Mask Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"customHeading","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Endless looping WebGL carousel physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom SVG and PNG mask support (Alpha & Luma modes)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progressive scroll edge blur overlay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time media contrast and saturation controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth touch drag and trackpad wheel scrolling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-play with customizable damping and speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal and vertical layout direction modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-performance resource caching and memory management"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses WebGL rendering when off-screen for peak site speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive auto-resizing and native Framer integration"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media items (Images & Videos)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom SVG or PNG masks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mask modes (Alpha Transparent or Luma B/W)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Carousel layout direction (Horizontal / Vertical)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Item width, height, and gap spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge blur strength and coverage size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media contrast and saturation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll damping (motion smoothness)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag, wheel, and auto-play speeds"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your images, videos, and custom SVG masks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your layout direction (horizontal or vertical)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune the gap sizing and media dimensions to fit your layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the progressive edge blur, contrast, and scrolling speeds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish for a premium, highly optimized WebGL interactive slider"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium SaaS feature showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-end eCommerce product galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive masking slider sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Client logo ticker loops"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video highlight reels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive landing page hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern interactive UI systems"}]}]}]}]},"introduction":"Endless Masked Media Slider","slug":"mask-carousel","author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/682fc11e-0644-4920-8b94-8b794b0ece9e/01a01355-6ca7-7758-8ffc-6319a86ab018.png","metadata":{"tint":{"h":330,"s":41,"l":64},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-18T05:26:05.257Z","updatedAt":"2026-08-23T06:36:03.179Z","publishedAt":"2026-08-18T05:26:05.253Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://creative-pear-245595.framer.app","price":"7","paymentUrl":"https://designsbysadat.lemonsqueezy.com/checkout/buy/1dc27355-4324-40f4-be6b-25bdc2320f0e","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"vTr5VbpJZOQTaAkVKQYS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":17,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-18T05:26:05.831Z","updatedAt":"2026-08-18T05:26:05.831Z","reported":false}}],"$L5f"]

Suggested for you