Orbit Depth Carousel

Details

OrbitCarousel is a 3D image carousel that places items on a circular orbit in perspective, creating a “wheel” depth effect: images take turns moving toward the viewer (sharp and prominent), then recede into the background (softer and less dominant), looping continuously.

3D scene (no WebGL)

The component uses CSS perspective and 3D transforms (translate3d) to simulate depth — lightweight and easy to embed in Framer without any WebGL setup.

Orbit & depth controls

• Orbit radius — the size of the orbit. Higher values create a larger “wheel” and wider item travel.

• Depth — how strongly items move along the Z axis. Increase it to amplify the near/far contrast.

• Perspective — the intensity of perspective distortion. Lower values feel more dramatic; higher values feel calmer and flatter.

Camera & orientation

• Tilt X (-90…+90) — tilts the camera angle so you can view the orbit from above, below, or closer to edge-on.

• Orbit yaw Y (-90…+90) — rotates the wheel around its own Y axis (yaw) to set the best viewing angle.

• Twist Z (-90…+90) — rotates the scene around Z for composition (a subtle diagonal framing, etc.).

Motion

• Speed — rotation speed.

• Reverse — toggles rotation direction.

• Pause on hover — hovering any item smoothly eases the rotation down to a full stop, and eases back to the original speed on mouse leave (0.2s easing in both directions). Great for browsing and clicking links.

Focus & depth styling

• Fade back + Min opacity — background items fade out to keep attention on the front.

• Focus blur — progressive depth blur: the farther an item is, the blurrier it becomes; the front stays crisp.

• Max blur / Blur curve — controls blur strength and the falloff curve across depth.

Items & links

• Items is an array of objects. Each item supports:

  • Image — the carousel image

  • Link (optional) — an external URL. Clicking opens in a new tab.

Item styling

• Item W / Item H — item dimensions.

• Item radius — corner rounding.