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

Liquid Lens Carousel is a WebGL image carousel for Framer, rendered with Three.js and custom GLSL shaders. A liquid glass lens magnifies the centered slide with chromatic dispersion, rim ripples, shimmer, and glow, while drag inertia, wheel scrolling, keyboard arrows, and autoplay with hover pause keep browsing effortless. It is fully CMS compatible: flip on CMS Mode to bind each slide’s image, title, subtitle, tag, and link straight from a collection, or curate slides manually with the built-in Items list.

How to Use

Drop the carousel into a frame with a generous fixed size, it automatically fills its parent.
Add slides through the Items list (image, title, subtitle, tag, link, new tab), or enable CMS Mode and bind the fields inside a collection list.
Shape the look with card height, gap, and radius, solid or transparent background, accent, text, and pill colors, plus title, subtitle, and tag fonts.
Tune the optics with lens color, glow, zoom depth, dispersion, rim ripple, scale, shimmer, and vignette.
Set motion and input with reveal style, trigger, and transitions, autoplay interval, drag speed, friction, wheel mode, and keyboard navigation.
Preview or publish to test dragging, refraction, and links, since interactions run at runtime rather than on the design canvas.

Ideal Use Cases

Liquid Lens Carousel works well for:

• Photography and architecture portfolios that want a gallery centerpiece • Agency and studio showcases running slides straight from the CMS • Editorial and lookbook sites presenting curated collections • Landing pages that need one memorable signature interaction

Inspired by the work of Osmo and Yousuf Soomro.

5a:[["$","$L5d",null,{"post":{"id":"01a06bdb-12ca-76af-9731-6f94f23052ee","title":null,"body":"

Liquid Glass Carousel 👀

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Liquid Glass Carousel "},{"type":"emoji","attrs":{"name":"eyes","emoji":"👀"}}]}]},"author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jy8E8ZbbGANNhpqdV009","resolved":true,"title":"Liquid Lens Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Liquid Lens Carousel is a WebGL image carousel for Framer, rendered with Three.js and custom GLSL shaders. A liquid glass lens magnifies the centered slide with chromatic dispersion, rim ripples, shimmer, and glow, while drag inertia, wheel scrolling, keyboard arrows, and autoplay with hover pause keep browsing effortless. It is fully CMS compatible: flip on CMS Mode to bind each slide’s image, title, subtitle, tag, and link straight from a collection, or curate slides manually with the built-in Items list.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the carousel into a frame with a generous fixed size, it automatically fills its parent.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add slides through the Items list (image, title, subtitle, tag, link, new tab), or enable CMS Mode and bind the fields inside a collection list.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape the look with card height, gap, and radius, solid or transparent background, accent, text, and pill colors, plus title, subtitle, and tag fonts.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune the optics with lens color, glow, zoom depth, dispersion, rim ripple, scale, shimmer, and vignette.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set motion and input with reveal style, trigger, and transitions, autoplay interval, drag speed, friction, wheel mode, and keyboard navigation.","marks":[{"type":"bold"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview or publish to test dragging, refraction, and links, since interactions run at runtime rather than on the design canvas.","marks":[{"type":"bold"}]}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Ideal Use Cases","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Liquid Lens Carousel works well for:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"• Photography and architecture portfolios that want a gallery centerpiece • Agency and studio showcases running slides straight from the CMS • Editorial and lookbook sites presenting curated collections • Landing pages that need one memorable signature interaction","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Inspired by the work of Osmo and Yousuf Soomro.","marks":[{"type":"bold"}]}]}]},"introduction":"WebGL CMS liquid glass carousel","slug":"liquid-lens-carousel","author":{"framerUserId":"0377da32-5157-43ad-9c57-e949e915db9e","name":"Daniyal Habib","slug":"daniyalweb","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1271714/avatar-8E77IXnX9HLKLrOPuUGBp3gf2I7AYE.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0377da32-5157-43ad-9c57-e949e915db9e/01a0720c-1f58-7369-857f-2a08e059d3c2.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-04T09:58:33.907Z","updatedAt":"2026-09-05T14:51:19.009Z","publishedAt":"2026-09-04T09:58:33.905Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://liquid-carousel.framer.website/","price":"8","paymentUrl":"https://daniyalweb.gumroad.com/l/ifaixv?wanted=true","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"H50VeLXU7Co8FEZCewWe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-05T14:51:20.031Z","createdAt":"2026-09-04T09:58:34.442Z","updatedAt":"2026-09-05T14:51:20.031Z","reported":false}}],"$L5f"]

Suggested for you