Scifi

Scifi hud (interactive)

<div class="bigbang container-gyro" style="background: black"> <div class="gravity-spot gyro" style=" transform-style: preserve-3d; perspective: 300px;"> <div class="orbit-6 from-120 range-240" style="transform: translateZ(-15px);"> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> <div class="vector shrink-40 outer-orbit dashed-small"></div> </div> <div class="orbit-6" style="transform: translateZ(-35px);"> <o-arc value="25" class="from-215 shrink-70 outer-orbit" style="--o-color: var(--o-pink); "></o-arc> </div> <div class="orbit-5 " > <o-arc value="25" class="from-315 shrink-80 inner-orbit" style="--o-color: var(--o-cyan-light)"></o-arc> </div> <div class="orbit-5 from-48 range-130"> <o-arc class=" shrink-40 outer-orbit" style="--o-color: var(--o-cyan-dark); opacity: .6;"></o-arc> </div> <div class="orbit-5 from-180 range-100" > <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> <div class="vector shrink-40 outer-orbit dashed-big"></div> </div> <div class="orbit-4" style="transform: translateZ(-85px);"> <o-arc value="40" class="from-10 shrink-40" style="--o-color: var(--o-pink)"></o-arc> </div> <div class="orbit-6 from-320" style="transform: translateZ(-110px);"> <o-arc value="40" class="shrink-40" style="--o-color: var(--o-cyan-light)"></o-arc> </div> <div class="orbit-6 from-30" style="transform: translateZ(-120px);"> <o-arc class="shrink-60" style="--o-color: var(--o-cyan-light)"></o-arc> <o-arc class="shrink-60" style="--o-color: transparent"></o-arc> <o-arc class="shrink-60" style="--o-color: var(--o-cyan-light)"></o-arc> <o-arc class="shrink-60" style="--o-color: transparent"></o-arc> </div> <div class="orbit-6 from-100" style="transform: translateZ(-155px);"> <o-arc value="40" class="shrink-90 inner-orbit" style="--o-color: var(--o-cyan-light)"></o-arc> </div> <div class="orbit-6 from-185 range-80" style="transform: translateZ(-75px);"> <o-arc class=" grow-0.5x" style="--o-color: var(--o-cyan-dark); opacity: .6;"></o-arc> </div> <div class="orbit-0" style="color:white">ORBIT</div> </div> </div>

.dashed-small {
opacity: 0.5; 
height: 3px; 
background: var(--o-cyan-darker);
}

.dashed-big {
opacity: 0.8; 
height: 6px; 
background: var(--o-cyan);
}

const container = document.querySelector('.container-gyro');
const gyro = document.querySelector('.gyro');

// Función común para manejar el cálculo de rotación
function handleMove(event) {
  // Obtenemos las dimensiones del contenedor
  const containerRect = container.getBoundingClientRect();
  const containerWidth = containerRect.width;
  const containerHeight = containerRect.height;

  // Determinamos las coordenadas dependiendo de si es un mouse o un toque
  let clientX, clientY;
  if (event.touches) {
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  } else {
    clientX = event.clientX;
    clientY = event.clientY;
  }

  // Calculamos la posición del mouse/touch relativa al contenedor
  const mouseX = clientX - containerRect.left;
  const mouseY = clientY - containerRect.top;
  const centerX = containerWidth / 2;
  const centerY = containerHeight / 2;
  const distanceX = mouseX - centerX;
  const distanceY = mouseY - centerY;

  // Normalizamos las distancias al rango de -1 a 1
  const normalizedX = distanceX / centerX;
  const normalizedY = distanceY / centerY;

  // Aseguramos que los valores estén dentro del rango de -1 a 1
  const clampedX = Math.max(-1, Math.min(1, normalizedX));
  const clampedY = Math.max(-1, Math.min(1, normalizedY));

  // Mapeamos las distancias normalizadas al rango de -45 a +45 grados
  const rotateY = clampedX * 45; // Más lejos del centro, mayor el ángulo
  const rotateX = clampedY * -45; // Ahora se corrige el eje X para que sea consistente

  // Aplicamos el transform al elemento gyro
  gyro.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}

// Eventos para dispositivos de entrada
container.addEventListener('mousemove', handleMove);
container.addEventListener('touchmove', handleMove);

HTML

<div class="bigbang container-gyro" style="background: black">
  <div class="gravity-spot gyro" style="
  transform-style: preserve-3d;
  perspective: 300px;">
    <div class="orbit-6 from-120 range-240" style="transform: translateZ(-15px);">
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
      <div class="vector shrink-40 outer-orbit dashed-small"></div>
    </div>
    <div class="orbit-6" style="transform: translateZ(-35px);">
      <o-arc value="25" class="from-215 shrink-70 outer-orbit" style="--o-color: var(--o-pink); "></o-arc>
    </div>
    <div class="orbit-5 " >
      <o-arc value="25" class="from-315 shrink-80 inner-orbit" style="--o-color: var(--o-cyan-light)"></o-arc>
    </div>
    <div class="orbit-5  from-48 range-130">
      <o-arc class=" shrink-40 outer-orbit" style="--o-color: var(--o-cyan-dark); opacity: .6;"></o-arc>
    </div>
    <div class="orbit-5 from-180 range-100"  >
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
      <div class="vector shrink-40 outer-orbit dashed-big"></div>
    </div>
    <div class="orbit-4" style="transform: translateZ(-85px);">
      <o-arc value="40" class="from-10 shrink-40" style="--o-color: var(--o-pink)"></o-arc>
    </div>
    <div class="orbit-6 from-320" style="transform: translateZ(-110px);">
      <o-arc value="40" class="shrink-40" style="--o-color: var(--o-cyan-light)"></o-arc>
    </div>
    <div class="orbit-6  from-30" style="transform: translateZ(-120px);">
      <o-arc  class="shrink-60" style="--o-color: var(--o-cyan-light)"></o-arc>
      <o-arc  class="shrink-60" style="--o-color: transparent"></o-arc>
      <o-arc  class="shrink-60" style="--o-color: var(--o-cyan-light)"></o-arc>
      <o-arc  class="shrink-60" style="--o-color: transparent"></o-arc>
    </div>
    <div class="orbit-6  from-100" style="transform: translateZ(-155px);">
      <o-arc value="40" class="shrink-90 inner-orbit" style="--o-color: var(--o-cyan-light)"></o-arc>
    </div>
    <div class="orbit-6 from-185 range-80" style="transform: translateZ(-75px);">
      <o-arc class="  grow-0.5x" style="--o-color: var(--o-cyan-dark); opacity: .6;"></o-arc>
    </div>
    <div class="orbit-0" style="color:white">ORBIT</div>
  </div>
</div>

CSS

.dashed-small {
opacity: 0.5;
height: 3px;
background: var(--o-cyan-darker);
}

.dashed-big {
opacity: 0.8;
height: 6px;
background: var(--o-cyan);
}

JS

const container = document.querySelector('.container-gyro');
const gyro = document.querySelector('.gyro');

// Función común para manejar el cálculo de rotación
function handleMove(event) {
  // Obtenemos las dimensiones del contenedor
  const containerRect = container.getBoundingClientRect();
  const containerWidth = containerRect.width;
  const containerHeight = containerRect.height;

  // Determinamos las coordenadas dependiendo de si es un mouse o un toque
  let clientX, clientY;
  if (event.touches) {
    clientX = event.touches[0].clientX;
    clientY = event.touches[0].clientY;
  } else {
    clientX = event.clientX;
    clientY = event.clientY;
  }

  // Calculamos la posición del mouse/touch relativa al contenedor
  const mouseX = clientX - containerRect.left;
  const mouseY = clientY - containerRect.top;
  const centerX = containerWidth / 2;
  const centerY = containerHeight / 2;
  const distanceX = mouseX - centerX;
  const distanceY = mouseY - centerY;

  // Normalizamos las distancias al rango de -1 a 1
  const normalizedX = distanceX / centerX;
  const normalizedY = distanceY / centerY;

  // Aseguramos que los valores estén dentro del rango de -1 a 1
  const clampedX = Math.max(-1, Math.min(1, normalizedX));
  const clampedY = Math.max(-1, Math.min(1, normalizedY));

  // Mapeamos las distancias normalizadas al rango de -45 a +45 grados
  const rotateY = clampedX * 45; // Más lejos del centro, mayor el ángulo
  const rotateX = clampedY * -45; // Ahora se corrige el eje X para que sea consistente

  // Aplicamos el transform al elemento gyro
  gyro.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
}

// Eventos para dispositivos de entrada
container.addEventListener('mousemove', handleMove);
container.addEventListener('touchmove', handleMove);

Show & Tell

Join to our Github Discussion and show off what have you done with Orbit.