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

Add a high-performance interactive 3D circular media ring to your site with tactile tangential dragging, smooth inertial spin, cursor-driven louvre wave ripples, and interactive scroll zoom.

Features

Real-time 3D circular WebGL media carousel
1:1 tangential steering dial dragging physics
Smooth cursor-driven louvre card wave ripple
Native support for looping videos and high-res images
Aspect-ratio-preserving texture mapping without distortion
Responsive auto-scaling ring layout
Dynamic 3D mouse parallax gyroscope tilt
Interactive mouse wheel and two-finger pinch zoom
Inertial momentum rotation with customizable glide friction
Full WebGL memory optimization and context-loss protection

Customization Options

Ring radius and total card item count
Auto-spin idle speed and rotation direction
Card dimensions (width, height, and border corner radius)
Camera zoom limits (default, minimum, and maximum distance)
Scroll zoom and touch pinch sensitivity
Hover ripple radius and 3D deflection angle
Interactive card lift distance and magnetic radial push
Full-scene mouse parallax tilt toggle
Momentum drag sensitivity and physics friction
Custom media manager supporting uploaded files and video URLs

How to Use

Drag and drop the component onto your Framer canvas
Upload your custom photos or paste looping MP4 video URLs
Set the ring radius and choose your total card count
Tweak card dimensions and border radius to fit your style
Adjust hover ripple range, lift depth, and spin speed
Publish your site for an unforgettable 3D media interaction

Use Cases

Editorial and fashion portfolio showcases
Creative design agency project rings
Music album, trailer, and videography reels
SaaS feature highlights and interactive product tours
Modern 3D hero sections and landing page centerpieces
NFT, 3D render, and digital collectible galleries
Interactive client testimonial and logo wheels
Dark-mode futuristic product displays
Luxury brand visual lookbooks
High-converting interactive visual CTAs

5a:[["$","$L5d",null,{"post":{"id":"01a0e97e-654a-757a-88e3-dde532761979","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":"FfWAjZpzsv0TjkEsiwEp","resolved":true,"title":"Circular 3D Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a high-performance interactive 3D circular media ring to your site with tactile tangential dragging, smooth inertial spin, cursor-driven louvre wave ripples, and interactive scroll zoom."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time 3D circular WebGL media carousel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"1:1 tangential steering dial dragging physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth cursor-driven louvre card wave ripple"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native support for looping videos and high-res images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Aspect-ratio-preserving texture mapping without distortion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive auto-scaling ring layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic 3D mouse parallax gyroscope tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive mouse wheel and two-finger pinch zoom"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inertial momentum rotation with customizable glide friction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full WebGL memory optimization and context-loss protection"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ring radius and total card item count"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-spin idle speed and rotation direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card dimensions (width, height, and border corner radius)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Camera zoom limits (default, minimum, and maximum distance)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll zoom and touch pinch sensitivity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover ripple radius and 3D deflection angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive card lift distance and magnetic radial push"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-scene mouse parallax tilt toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Momentum drag sensitivity and physics friction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom media manager supporting uploaded files and video URLs"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your custom photos or paste looping MP4 video URLs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the ring radius and choose your total card count"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tweak card dimensions and border radius to fit your style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust hover ripple range, lift depth, and spin speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for an unforgettable 3D media interaction"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial and fashion portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative design agency project rings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Music album, trailer, and videography reels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS feature highlights and interactive product tours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern 3D hero sections and landing page centerpieces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"NFT, 3D render, and digital collectible galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive client testimonial and logo wheels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode futuristic product displays"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Luxury brand visual lookbooks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-converting interactive visual CTAs"}]}]}]}]},"introduction":"Interactive 3D circular media ring","slug":"circular-3d-gallery","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/01a10ce7-eb82-77b8-a00c-ac1cc1948cdb.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T19:29:29.217Z","updatedAt":"2026-10-05T16:31:40.096Z","publishedAt":"2026-09-28T19:29:29.214Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Dcfdc-fgHuSb.js@x0VfUdj2187L14w8XT9Z","previewUrl":"https://ancient-manatee-315518.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"x0VfUdj2187L14w8XT9Z","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T19:29:29.930Z","updatedAt":"2026-09-28T19:29:29.930Z","reported":false}}],"$L5f"]

Suggested for you