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

Showcase dynamic images and video reels in an interactive 3D WebGL card slider built with smooth spring mechanics, cinematic tilt motion, and fluid depth blurring.

Features

Smooth spring-damped transition physics
Native WebGL rendering via Three.js
Full support for mixed images and autoplaying videos
Dynamic edge-blur and depth opacity transitions
Natural pointer drag and touch flick navigation
Passive wheel scroll and keyboard controls
Lightweight memory management with auto texture disposal
Full static renderer compliance for fast Framer canvas editing
Built-in client-side visitor media upload toggle
Accessible ARIA slide labels and live status announcements

Customization Options

Card width, aspect ratio, and layout zoom
Vertical tilt angle and card gap spacing
Autoplay toggle, interval timing, and travel duration
Pre-movement anticipation dip strength
Slide direction (Up / Down) and hover-to-pause
Corner radius and dynamic edge-blur intensity
Side card opacity and bottom drop shadow depth
Drag sensitivity and wheel scroll navigation
Maximum texture resolution and pixel ratio clamping
Reduced motion preferences support

How to Use

Drop the Twist Carousel component onto your Framer canvas
Add your image URLs or upload video files directly in the properties panel
Adjust card width, aspect ratio, and 3D tilt to match your layout
Customize slide speed, spring easing, and auto-advance intervals
Toggle visitor drag, mouse wheel, or navigation buttons
Publish your site for smooth, GPU-accelerated 3D transitions

Use Cases

Modern creative portfolio showcases
Cinematic studio client project decks
High-converting SaaS product tour slides
Fashion lookbooks and editorial look showcases
Brand media feeds and hero section sliders
Agency case study presentations
Dark-mode landing page highlights
Video reel displays and motion showcases

5a:[["$","$L5d",null,{"post":{"id":"01a10ce2-f288-7658-9c0d-2dd3363e0e4c","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":"hcAFuoalX2jTimVW5fbA","resolved":true,"title":"Twist Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Showcase dynamic images and video reels in an interactive 3D WebGL card slider built with smooth spring mechanics, cinematic tilt motion, and fluid depth blurring."}]},{"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":"Smooth spring-damped transition physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native WebGL rendering via Three.js"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full support for mixed images and autoplaying videos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic edge-blur and depth opacity transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Natural pointer drag and touch flick navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Passive wheel scroll and keyboard controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight memory management with auto texture disposal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full static renderer compliance for fast Framer canvas editing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in client-side visitor media upload toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible ARIA slide labels and live status announcements"}]}]}]},{"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":"Card width, aspect ratio, and layout zoom"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical tilt angle and card gap spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay toggle, interval timing, and travel duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pre-movement anticipation dip strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide direction (Up / Down) and hover-to-pause"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner radius and dynamic edge-blur intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Side card opacity and bottom drop shadow depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag sensitivity and wheel scroll navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Maximum texture resolution and pixel ratio clamping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion preferences support"}]}]}]},{"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 Twist Carousel component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your image URLs or upload video files directly in the properties panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust card width, aspect ratio, and 3D tilt to match your layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize slide speed, spring easing, and auto-advance intervals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle visitor drag, mouse wheel, or navigation buttons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for smooth, GPU-accelerated 3D transitions"}]}]}]},{"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":"Modern creative portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic studio client project decks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-converting SaaS product tour slides"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion lookbooks and editorial look showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand media feeds and hero section sliders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency case study presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode landing page highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video reel displays and motion showcases"}]}]}]}]},"introduction":"Interactive 3D WebGL media slider","slug":"twist-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/01a10ce2-c494-73fc-96e6-7eb8798d996f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-05T16:26:01.538Z","updatedAt":"2026-10-05T17:09:27.468Z","publishedAt":"2026-10-05T16:26:01.531Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://welcomed-size-392782.framer.app/","price":"4","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/8f253932-37e7-45f9-acc0-8c058eb0715c","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"BZFUZ5xaFlxFgShAc60a","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T16:26:02.248Z","updatedAt":"2026-10-05T16:26:02.248Z","reported":false}}],"$L5f"]

Suggested for you