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

Overview

Hero Orbit is a premium interactive component designed to create a visually rich, circular image experience. It combines smooth motion, depth effects, and user interaction to transform static layouts into engaging hero sections.

Core Experience

Circular orbit layout with perfectly balanced spacing
Smooth, continuous rotation for a cinematic feel
Clean and consistent image sizing for a polished UI
Subtle tilt and scale variations for visual rhythm

Depth & Motion System

Dynamic depth effect using scale + blur
Foreground images appear sharper and slightly larger
Background images softly blur for a natural 3D illusion
Smooth easing ensures motion feels fluid, not mechanical

Interaction

Hover to pause animation for better focus
Drag to rotate the orbit manually
Inertia-based motion for a realistic, tactile feel
Responsive interaction that enhances user engagement

Center Card

Acts as a visual anchor within the orbit
Ideal for:
- Upload actions
- Call-to-action buttons
- Highlighted content
Keeps layout structured while motion happens around it

Customization

Adjustable orbit radius
Control rotation speed
Light and dark theme support
Replace images بسهولة inside Framer
Toggle center card visibility

Performance & Design Quality

Optimized for smooth rendering and performance
Maintains layout consistency across screen sizes
Designed with modern SaaS and portfolio standards in mind

Best Use Cases

SaaS landing pages
Portfolio hero sections
AI / creative tools
Image-driven platforms
Product showcases

5a:[["$","$L5d",null,{"post":{"id":"019d7857-5414-7539-a17b-bdc1a3830cd0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"G4Nfd0AnwSkYnXuHcQov","resolved":true,"title":"Hero","body":"$5e","bodyJson":null,"introduction":"Interactive 3D Image Orbit Motion","slug":"hero","author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/Yqck4F15JjwAhfEVUu0Y/hero-7Q3Wdv4TXdBginRVbmEQnK5Kp4JfmK","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-23T16:29:59.219Z","updatedAt":"2026-05-13T17:54:38.540Z","publishedAt":"2026-04-10T17:01:22.324Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://make-advantage-605505.framer.app/","price":"1","paymentUrl":"https://buy.polar.sh/polar_cl_gPWVZ3hdCWVKrlRbbSyRljiKC68gFSqk9VG3P3umFrK","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"8jKP0llgNMq2NbR3do0j","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-04-10T17:01:22.324Z","updatedAt":"2026-04-10T17:01:22.324Z","reported":false}}],"$L5f"]

Suggested for you