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

Add an interactive 3D woven carousel to cards, portfolios, and showcases with realistic thread-tearing shaders, tactile touch flinging, and cinematic drift.

Features

Real-time GLSL ribbon deconstruction shaders
GPU-accelerated WebGL rendering with zero dropped frames
Physics-based inertial drag and kinetic touch flinging
Dynamic viewport tear zones with organic wave flutter
Automated memory budgeting and smart offscreen texture caching
Native prefers-reduced-motion accessibility integration
Seamless infinite cyclical loop with auto-drift motion
Clean fallback mode for static canvas rendering and legacy browsers
Fully responsive ResizeObserver scale and aspect-ratio handling
Direct image upload and custom responsive source support

Customization Options

Autoplay speed and reverse drift direction
Ribbon thread count and mesh vertex detail
Edge unravel tear depth and zone limits
Loose-thread flutter intensity and turbulence
Drag fling limits and deceleration settle duration
Card height, aspect ratio, and dynamic gap spacing
Corner border radius shaping
Initial starting card and pixel offset alignment
Maximum texture cache size and RAM memory limit
Device pixel ratio resolution capping

How to Use

Drop the component directly onto your Framer canvas
Add your image URLs or upload image assets in the properties panel
Adjust card dimensions, aspect ratio, and corner radius to fit your layout
Fine-tune autoplay drift speed and unravel ribbon density
Configure fling inertia and settle duration for desired touch physics
Publish to deliver a high-converting, interactive 3D visual showcase

Use Cases

High-end fashion lookbooks
Creative director and design portfolios
Modern agency client case studies
Premium eCommerce product galleries
Luxury brand hero sections
Photography editorial exhibitions
Dynamic visual storytelling decks
Architectural project showcases
Web3 and digital art drop releases
Engaging interactive landing page headers

5a:[["$","$L5d",null,{"post":{"id":"01a117e0-cae8-7709-bb02-f166a77a3a8c","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":"AIKwgRdy7V8U4EhxCZJr","resolved":true,"title":"Unwoven Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add an interactive 3D woven carousel to cards, portfolios, and showcases with realistic thread-tearing shaders, tactile touch flinging, and cinematic drift."}]},{"type":"customHeading","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time GLSL ribbon deconstruction shaders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GPU-accelerated WebGL rendering with zero dropped frames"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physics-based inertial drag and kinetic touch flinging"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic viewport tear zones with organic wave flutter"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automated memory budgeting and smart offscreen texture caching"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native prefers-reduced-motion accessibility integration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seamless infinite cyclical loop with auto-drift motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean fallback mode for static canvas rendering and legacy browsers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive ResizeObserver scale and aspect-ratio handling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Direct image upload and custom responsive source support"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay speed and reverse drift direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ribbon thread count and mesh vertex detail"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge unravel tear depth and zone limits"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loose-thread flutter intensity and turbulence"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag fling limits and deceleration settle duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card height, aspect ratio, and dynamic gap spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner border radius shaping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Initial starting card and pixel offset alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Maximum texture cache size and RAM memory limit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Device pixel ratio resolution capping"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component directly onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your image URLs or upload image assets in the properties panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust card dimensions, aspect ratio, and corner radius to fit your layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune autoplay drift speed and unravel ribbon density"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configure fling inertia and settle duration for desired touch physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish to deliver a high-converting, interactive 3D visual showcase"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-end fashion lookbooks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative director and design portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern agency client case studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium eCommerce product galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Luxury brand hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography editorial exhibitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic visual storytelling decks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architectural project showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3 and digital art drop releases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Engaging interactive landing page headers"}]}]}]}]},"introduction":"WebGL Ribbon Image Carousel Slider","slug":"unwoven-carousel","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/01a117e0-9dae-7661-8486-850a0e62fa3d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T19:39:29.751Z","updatedAt":"2026-10-07T19:39:29.751Z","publishedAt":"2026-10-07T19:39:29.747Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Efdvf-1sujJq.js@F52SUPhSw8p1d4nvAG4s","previewUrl":"https://superfluous-book-801506.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"F52SUPhSw8p1d4nvAG4s","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-10-07T19:39:30.408Z","updatedAt":"2026-10-07T19:39:30.408Z","reported":false}}],"$L5f"]

Suggested for you