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

Create an endless 3D media ribbon with dynamic center expansion, fluid momentum physics, and ultra-smooth WebGL rendering to elevate your site's visual storytelling.

Features

Endless looping 3D ribbon with seamless boundary wrapping
Dynamic center burst expansion with customizable focus zones
Organic vertical scatter algorithm driven by seed controls
Momentum-based drag, swipe, and horizontal wheel interaction
Smooth exponential velocity damping for fluid glide physics
Adaptive canvas resolution and WebGL context restoration
Fully accessible keyboard arrow navigation and reduced motion support
Zero-friction layout scaling across mobile, tablet, and desktop
Lightweight Three.js plane rendering with optimized draw calls
Built-in fallback states and instant live canvas previewing

Customization Options

Center image size and ribbon thumbnail size
Image spacing along the ribbon axis
Focus burst width and expansion falloff
Vertical scatter spread distance
Center horizontal and vertical focal point
Autoplay toggle, scroll speed, and direction
Drag, mouse wheel, and smoothing glide physics
Random seed arrangement for distinct layouts
Background color, container corner radius, and pixel ratio

How to Use

Drop WebGL Image Ribbon onto your Framer canvas
Upload your image assets directly into the Images property
Set your ribbon spacing, thumbnail scale, and center burst size
Adjust drag smoothing and autoplay speed to match your brand feel
Tweak container background, corner radius, and canvas scale
Publish your site for high-performance interactive 3D media

Use Cases

Creative agency portfolio showcases
Fashion and luxury lookbooks
Photography and visual art exhibitions
Modern SaaS product feature ribbons
Mobile app UI screenshot carousels
Interactive client logo and proof strips
Editorial magazine galleries
Hero header interactive media banners

5a:[["$","$L5d",null,{"post":{"id":"01a0edcf-61e3-7003-9c05-4e3a4f155a70","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tfxhViBixwOhwyiQbxAK","resolved":true,"title":"WebGL Image Ribbon","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Create an endless 3D media ribbon with dynamic center expansion, fluid momentum physics, and ultra-smooth WebGL rendering to elevate your site's visual storytelling."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Endless looping 3D ribbon with seamless boundary wrapping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic center burst expansion with customizable focus zones"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Organic vertical scatter algorithm driven by seed controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Momentum-based drag, swipe, and horizontal wheel interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth exponential velocity damping for fluid glide physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adaptive canvas resolution and WebGL context restoration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully accessible keyboard arrow navigation and reduced motion support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero-friction layout scaling across mobile, tablet, and desktop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight Three.js plane rendering with optimized draw calls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in fallback states and instant live canvas previewing"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Center image size and ribbon thumbnail size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image spacing along the ribbon axis"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Focus burst width and expansion falloff"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical scatter spread distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Center horizontal and vertical focal point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay toggle, scroll speed, and direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag, mouse wheel, and smoothing glide physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Random seed arrangement for distinct layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background color, container corner radius, and pixel ratio"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop WebGL Image Ribbon onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your image assets directly into the Images property"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set your ribbon spacing, thumbnail scale, and center burst size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust drag smoothing and autoplay speed to match your brand feel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tweak container background, corner radius, and canvas scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for high-performance interactive 3D media"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and luxury lookbooks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography and visual art exhibitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern SaaS product feature ribbons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile app UI screenshot carousels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive client logo and proof strips"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial magazine galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero header interactive media banners"}]}]}]}]},"introduction":"Endless 3D ribbon carousel for Fra","slug":"webgl-image-ribbon","author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/01a0edcf-4d82-77ed-b925-7adb44451d38.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T15:36:25.667Z","updatedAt":"2026-10-06T14:31:57.657Z","publishedAt":"2026-09-29T15:36:25.665Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://warmhearted-adapts-921499.framer.app/","price":"7","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/193fbae8-5335-440e-be76-1c4edd2a4cb3","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"XEanZf8x2tt7dLoGbQUr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T15:36:26.339Z","updatedAt":"2026-09-29T15:36:26.339Z","reported":false}}],"$L5f"]

Suggested for you