Hero

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