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

About this Component

Visual & layout

5 immersive 3D layouts:Switch seamlessly between Ring, Fan, Helix, Sphere, and Wall formations — each offering a unique spatial arrangement and cinematic viewing experience.

Advanced card masking:Supports built-in mask presets along with fully custom SVG mask paths for highly creative image presentations.

Cinematic visual effects:Optional enhanced styling includes depth lift, blur, dimming, shimmer overlays, floating motion, and vignette effects for a more immersive premium aesthetic.

Layered spatial depth:Cards dynamically shift through 3D space using perspective transforms, scaling, opacity, and depth positioning.

–––––––––––––––––––––––––––

Interaction

Cursor drag rotation:Users can rotate the gallery naturally using click-and-drag interactions for smooth spatial exploration.

Mouse wheel navigation:Optional wheel-based rotation with adjustable sensitivity for precise control and immersive browsing.

Auto-rotation system:Enable continuous ambient rotation with intelligent hover slowdown and viewport-aware pausing.

Performance-aware behavior:Animations pause automatically when offscreen using IntersectionObserver for smoother rendering and improved efficiency.

Reduced motion support:Respects accessibility motion preferences while maintaining a polished experience.

–––––––––––––––––––––––––––

Customization

Fully customizable via the properties panel:

5 layout variants
Perspective & depth controls
Rotation speed & sensitivity
Cursor drag behavior
Wheel scroll controls
Card masking presets
Custom SVG masks
Blur & vignette intensity
Floating & shimmer effects
Scale & opacity ranges
Background styling
Responsive layouts

–––––––––––––––––––––––––––

Responsive behavior

Desktop:Large cinematic 3D layouts with immersive motion and layered visual depth.

Tablet & Mobile:Optimized responsive scaling with smoother interactions for touch devices and smaller screens.

Viewport optimized:Animations intelligently pause when outside the viewport for better performance and reduced resource usage.

Editor-aware controls:Supports freezing motion inside the Framer editor and canvas for easier designing and previewing.

–––––––––––––––––––––––––––

Perfect for

SaaS landing pages
AI startup websites
portfolio showcases
creative galleries
product storytelling
hero sections
brand presentations
visual case studies
interactive media sections

–––––––––––––––––––––––––––

Why it works

Creates cinematic visual depth
Makes static galleries feel interactive
Adds premium motion to modern websites
Encourages exploration through spatial interaction
Supports highly customizable visual styles
Blends performance with immersive design

–––––––––––––––––––––––––––

Need a High-End Framer Website?

Orbix3D is just one piece.

At Blanq Studio, we design and build conversion-focused Framer websites for SaaS, AI, and modern brands — crafted to feel premium, interactive, and built to convert.

From high-performing landing pages to fully custom digital experiences, every detail is designed to help brands stand out online.

–––––––––––––––––––––––––––

Future enhancement idea

Add snap-to-focus card alignment and optional thumbnail navigation for faster browsing and more controlled gallery interaction.

–––––––––––––––––––––––––––

Preview / Functionality

https://goodness-badger-090727.framer.app/

5a:[["$","$L5d",null,{"post":{"id":"019e9890-bafe-7b91-a32a-356b29505c65","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c90db83d-eea5-4080-b136-e7529e97e2b4","name":"SAMEER","slug":"sameer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/30930/avatar-JRmdsDqtewd6AUgD9lc689JAQFR6F1.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"Z5C7wzBl8kjMLwW8pfKU","resolved":true,"title":"Orbix3D","body":"$5e","bodyJson":null,"introduction":"Cinematic 3D image gallery","slug":"orbix3d","author":{"framerUserId":"c90db83d-eea5-4080-b136-e7529e97e2b4","name":"SAMEER","slug":"sameer","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/30930/avatar-JRmdsDqtewd6AUgD9lc689JAQFR6F1.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Z5C7wzBl8kjMLwW8pfKU/orbix3d-e6Wyi0CSqHtdVpok1SRTUHK3fDrIsW","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-27T09:01:11.059Z","updatedAt":"2026-06-16T08:27:39.445Z","publishedAt":"2026-06-05T16:14:42.430Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://orbix3d.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_6jx54FlDNYy6cVxY7tGgfy2Cz5j3aES6b2LPQ2fwIHe","workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"sivUT8CIdLk9w8hdq4VP","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:14:42.430Z","updatedAt":"2026-06-05T16:14:42.430Z","reported":false}}],"$L5f"]

Suggested for you