Immersive Orbit

Immersive Orbit

About Immersive Orbit

Add a premium interactive 3D sphere gallery to your Framer site with smooth magnetic hover physics, dynamic scroll zooming, and cinematic WebGL motion.

Features

  • Real-time 3D orbit rotation and spatial generation

  • Premium WebGL-powered image and texture rendering

  • Smooth damped hover physics with magnetic cursor pull

  • Dynamic scroll-to-zoom camera controls

  • Seamless Framer router integration for links

  • Highly optimized Three.js performance

  • Responsive resize handling and spatial hashing

  • Clean layered visual architecture

  • Works perfectly for portfolios, sections, and premium UI

  • Customizable colors, sizes, physics, and zoom limits

Customization Options

  • Gallery images and custom links

  • Total image count

  • Global scale and base 3D radius

  • Depth randomness and individual image size

  • Connecting string color and opacity

  • Core nucleus color and size

  • Hover area distance and magnetic attraction

  • Auto-rotation speed and hover damping

  • Min/Max zoom limits and scroll wheel speed

How to Use

  1. Drop the component onto your Framer canvas.

  2. Upload your images and assign custom links.

  3. Adjust the 3D layout scale, radius, and image sizes.

  4. Customize the connecting lines and core colors to match your brand.

  5. Tune the hover physics, magnetic pull, and rotation speed.

  6. Publish for a premium interactive 3D experience.

Use Cases

  • Premium portfolio showcases

  • Interactive team member sections

  • Modern client logo clouds

  • AI product features

  • Hover-enhanced photo galleries

  • Futuristic UI systems

  • Dark mode interfaces

  • Interactive landing page hero blocks