gyros.svelte

<script lang="ts">

  let gyro = new Gyroscope({ frequency: 60 });

  let x = 0,
    y = 0,
    z = 0;

  gyro.addEventListener("reading", () => {
    x += gyro.x;
    y += gyro.y;
    z += gyro.z;
  });

  gyro.start();
</script>

<p>X: {x} | Y: {y} | Z: {z}</p>

<div class="container">
  <div class="surface" style="--x:{x}deg;--y:{y}deg;--z:{z}deg"></div>
</div>

<style>
  :global(body) {
    background: #111;
    overflow-x: hidden;
  }
  * {
    font-family: sans-serif;
  }
  p {
    color: white;
  }
  .container {
    width: 100%;
    height: calc(100vh - 100px);
    display: grid;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    place-items: center;
  }
  .surface {
    transform: rotateX(var(--x)) rotateY(var(--y)) rotateZ(var(--z));
    background: linear-gradient(to bottom, #333, #aaa);
    width: 80%;
    height: 80%;
  }
</style>

ÇØPYRIGHT LEOPOLD SCHLOFER