Orbit Carousel — HTML CSS JS Snippet

<div class="obc-stage">
  <div class="obc-center" id="obcCenter">
    <span id="obcCenterIcon">🎧</span>
  </div>
  <div class="obc-orbit" id="obcOrbit">
    <div class="obc-sat" data-i="0"><span>📷</span></div>
    <div class="obc-sat" data-i="1"><span>⌚</span></div>
    <div class="obc-sat" data-i="2"><span>🎮</span></div>
    <div class="obc-sat" data-i="3"><span>🔊</span></div>
    <div class="obc-sat" data-i="4"><span>💻</span></div>
  </div>
  <div class="obc-label" id="obcLabel">Headphones</div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0e14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.obc-stage{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}
.obc-center{position:absolute;width:96px;height:96px;border-radius:50%;background:linear-gradient(160deg,#6366f1,#4338ca);display:flex;align-items:center;justify-content:center;font-size:40px;box-shadow:0 0 0 8px rgba(99,102,241,.14),0 16px 34px rgba(0,0,0,.5);z-index:2;transition:background .3s}
.obc-orbit{position:absolute;inset:0}
.obc-sat{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#161c2c;border:1.5px solid #2a3348;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:transform .6s cubic-bezier(.65,0,.35,1),background .2s,border-color .2s}
.obc-sat:hover{background:#232c42;border-color:#6366f1}
.obc-label{position:absolute;bottom:-36px;color:#fff;font-size:14px;font-weight:800}

var ITEMS = ['Headphones', 'Camera', 'Watch', 'Console', 'Speaker', 'Laptop'];
var ICONS = ['🎧', '📷', '⌚', '🎮', '🔊', '💻'];
var center = document.getElementById('obcCenter');
var centerIcon = document.getElementById('obcCenterIcon');
var label = document.getElementById('obcLabel');
var sats = document.querySelectorAll('.obc-sat');
var radius = 130;
var centerIndex = 0;

// Build the order of satellite indices (everyone except the current center)
function satelliteOrder() {
  var order = [];
  for (var i = 0; i < ICONS.length; i++) if (i !== centerIndex) order.push(i);
  return order;
}

function layout() {
  var order = satelliteOrder();
  sats.forEach(function (sat, slot) {
    var itemIndex = order[slot];
    var angle = (360 / order.length) * slot - 90;
    var rad = angle * Math.PI / 180;
    var x = Math.cos(rad) * radius;
    var y = Math.sin(rad) * radius;
    sat.style.transform = 'translate(' + x + 'px,' + y + 'px)';
    sat.querySelector('span').textContent = ICONS[itemIndex];
    sat.dataset.item = itemIndex;
  });
  centerIcon.textContent = ICONS[centerIndex];
  label.textContent = ITEMS[centerIndex];
}

sats.forEach(function (sat) {
  sat.addEventListener('click', function () {
    centerIndex = parseInt(sat.dataset.item, 10);
    layout();
  });
});

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') { centerIndex = (centerIndex + 1) % ICONS.length; layout(); }
  else if (e.key === 'ArrowLeft') { centerIndex = (centerIndex - 1 + ICONS.length) % ICONS.length; layout(); }
});

layout();