---
title: "Hero — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Viper Guy · Sections. Overview Hero Orbit is a premium interactive component designed to create a visually rich, circular image experience."
canonical: "https://framer.elliotli.dev/component/hero"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Hero

# Hero

Interactive 3D Image Orbit Motion

[View on Framer](https://framer.com/marketplace/components/hero/?via=elliot-li)

![Hero preview image 1](https://framer.elliotli.dev/og/component/hero/e235939a75b56aaa/1600x1200.jpg)

## Summary

Overview Hero Orbit is a premium interactive component designed to create a visually rich, circular image experience.

## Description

### 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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-yvw4q6ky-0GoeRBDoePQUk1dw1sFmdod8lnuZTd)

### 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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10571

## Details

- **Author**: Viper Guy
- **Price**: $1.00
- **Published**: 2026-04-10
- **Updated**: 2026-05-13
- **Added**: 2026-03-23
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove