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:T850,

WebGLCurvedCarousel

WebGLCurvedCarousel is a premium infinite WebGL carousel for creating immersive, cinematic project showcases in Framer.

Inspired by the Awwwards Site of the Day-winning website Meech 213, it combines curved perspective, smooth momentum, depth, and fluid drag or scroll interactions in a responsive, customizable component.

Features

Infinite seamless scrolling
Native WebGL rendering
Curved perspective and depth
Drag and swipe interaction
Mouse wheel and trackpad support
Natural momentum
Responsive layout
Clickable project links
Adjustable card size and spacing
Customizable curve, camera, and movement
Automatic off-screen pausing
Performance-optimized rendering
Framer-native property controls

Perfect For

Creative portfolios
Photography and fashion showcases
Design and architecture studios
Artist websites
Product and campaign galleries
Premium hero sections

Why Choose WebGLCurvedCarousel?

WebGLCurvedCarousel brings an immersive WebGL experience directly into Framer without external libraries or complicated setup.

Customize images, links, dimensions, spacing, movement, perspective, and depth from Framer’s property panel. Optimized textures, responsive rendering, and automatic off-screen pausing help provide smooth performance across desktop, tablet, and mobile.

Important Usage Disclaimer

This component is designed for use as a full-width, full-viewport-height hero section.

Use it on a page with no additional sections beyond the initial viewport. While the pointer is over the component, scrolling controls the carousel and may prevent the page from scrolling past it.

5a:[["$","$L5d",null,{"post":{"id":"019f6bd9-ac51-7211-a836-dabfdc37f5c6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9302b079-a7e9-4031-96e5-66d1f6731592","name":"Joe Laub","slug":"joe-laub","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"LxMAEIjpUzX74nUP9UaE","resolved":true,"title":"WebGLCurvedCarousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"WebGLCurvedCarousel"}]},{"type":"paragraph","content":[{"type":"text","text":"WebGLCurvedCarousel is a premium infinite WebGL carousel for creating immersive, cinematic project showcases in Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Inspired by the Awwwards Site of the Day-winning website "},{"type":"text","text":"Meech 213","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://www.meech213.com/photo?category=all","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":", it combines curved perspective, smooth momentum, depth, and fluid drag or scroll interactions in a responsive, customizable component."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite seamless scrolling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native WebGL rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curved perspective and depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and swipe interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse wheel and trackpad support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Natural momentum"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clickable project links"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card size and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable curve, camera, and movement"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic off-screen pausing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-optimized rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer-native property controls"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography and fashion showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design and architecture studios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Artist websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product and campaign galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium hero sections"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why Choose WebGLCurvedCarousel?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"WebGLCurvedCarousel brings an immersive WebGL experience directly into Framer without external libraries or complicated setup."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize images, links, dimensions, spacing, movement, perspective, and depth from Framer’s property panel. Optimized textures, responsive rendering, and automatic off-screen pausing help provide smooth performance across desktop, tablet, and mobile."}]},{"type":"customHeading","content":[{"type":"text","text":"Important Usage Disclaimer"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"This component is designed for use as a "},{"type":"text","text":"full-width, full-viewport-height hero section","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it on a page with no additional sections beyond the initial viewport. While the pointer is over the component, scrolling controls the carousel and may prevent the page from scrolling past it."}]}]},"introduction":"premium infinite WebGL carousel","slug":"webglcurvedcarousel","author":{"framerUserId":"9302b079-a7e9-4031-96e5-66d1f6731592","name":"Joe Laub","slug":"joe-laub","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/9302b079-a7e9-4031-96e5-66d1f6731592/019f6bd9-700c-7769-9181-399d6bdc7b68.png","metadata":{"tint":{"h":180,"s":50,"l":6},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-07-16T16:54:15.000Z","updatedAt":"2026-08-26T02:09:47.832Z","publishedAt":"2026-07-16T16:54:14.993Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spinning-screenshot-306558.framer.app/","price":"6","paymentUrl":"https://joeelaub.gumroad.com/l/webgl-curved-carousel-framer","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"ILZwsuuthLOZLd9vNvo8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-16T16:54:15.377Z","updatedAt":"2026-07-16T16:54:15.377Z","reported":false}}],"$L5f"]

Suggested for you