Mouse Parallax Scene

<div class="fx-0021-root">
  <div class="parallax-scene" data-parallax-scene>
    <div class="parallax-layer" data-depth="0.1">
      <div class="parallax-stars">
        <span class="parallax-star" style="top:10%;left:15%"></span>
        <span class="parallax-star" style="top:20%;left:75%"></span>
        <span class="parallax-star" style="top:35%;left:45%"></span>
        <span class="parallax-star" style="top:15%;left:90%"></span>
        <span class="parallax-star" style="top:50%;left:25%"></span>
        <span class="parallax-star" style="top:8%;left:55%"></span>
        <span class="parallax-star" style="top:42%;left:80%"></span>
        <span class="parallax-star" style="top:28%;left:10%"></span>
      </div>
    </div>
    <div class="parallax-layer" data-depth="0.25" style="display:flex;align-items:flex-start;justify-content:flex-end;padding:60px 90px 0 0;">
      <div class="parallax-moon"></div>
    </div>
    <div class="parallax-layer" data-depth="0.4">
      <div class="parallax-mountains">
        <div class="parallax-mountain mountain-1"></div>
        <div class="parallax-mountain mountain-2"></div>
        <div class="parallax-mountain mountain-3"></div>
        <div class="parallax-mountain mountain-4"></div>
      </div>
    </div>
    <div class="parallax-layer" data-depth="0.6">
      <div class="parallax-trees">
        <div class="parallax-tree tree-sm"></div>
        <div class="parallax-tree tree-lg"></div>
        <div class="parallax-tree tree-md"></div>
        <div class="parallax-tree tree-sm"></div>
        <div class="parallax-tree tree-lg"></div>
        <div class="parallax-tree tree-md"></div>
        <div class="parallax-tree tree-sm"></div>
      </div>
    </div>
  </div>
</div>

.fx-0021-root,
.fx-0021-root *,
.fx-0021-root *::before,
.fx-0021-root *::after {
  box-sizing: border-box
}

.fx-0021-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.parallax-scene {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #0a0a2e 0%, #1a1a4e 50%, #2a1a3e 100%);
  cursor: crosshair;
  /* Touch: a sideways drag moves the layers, a vertical swipe still scrolls the page */
  touch-action: pan-y;
}

.parallax-layer {
  position: absolute;
  inset: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.parallax-stars {
  width: 100%;
  height: 100%;
}

.parallax-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.6;
}

.parallax-moon {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.4), 0 0 80px rgba(251, 191, 36, 0.2);
}

/* The layers overflow the scene by 30 px on every side: the mountains stand 24 px below
   the bottom edge, the trees 6 px below, so both stay visible when the layers move */
.parallax-mountains {
  position: absolute;
  bottom: 6px;
  width: 120%;
  left: -10%;
}

.parallax-mountain {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.mountain-1 {
  left: 5%;
  border-width: 0 80px 120px 80px;
  border-color: transparent transparent #1e1b4b transparent;
}

.mountain-2 {
  left: 25%;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #2e1065 transparent;
}

.mountain-3 {
  left: 55%;
  border-width: 0 90px 130px 90px;
  border-color: transparent transparent #1e1b4b transparent;
}

.mountain-4 {
  left: 75%;
  border-width: 0 70px 90px 70px;
  border-color: transparent transparent #2e1065 transparent;
}

.parallax-trees {
  position: absolute;
  bottom: -40px;
  width: 120%;
  left: -10%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  /* Ground strip under the trees, hidden below the edge at rest: it shows when the trees rise */
  padding-bottom: 64px;
  background: linear-gradient(to top, #022c22 64px, transparent 64px);
}

.parallax-tree {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #064e3b transparent;
}

.tree-sm {
  border-width: 0 12px 40px 12px;
}

.tree-md {
  border-width: 0 16px 55px 16px;
}

.tree-lg {
  border-width: 0 20px 70px 20px;
}

/* Reduced motion: the landscape stays still in its rest position */
@media (prefers-reduced-motion: reduce) {
  .fx-0021-root .parallax-layer {
    transform: none !important;
    transition: none;
  }
}

(function() {
  // ========== SPATIAL DEPTH ==========
  // ==========================================
  // 1. Mouse Parallax Scene (pointer events: mouse, pen and touch)
  // One instance per .fx-0021-root: several scenes on one page each move on their own.
  // ==========================================
  document.querySelectorAll('.fx-0021-root').forEach(function(root) {
    var scene = root.querySelector('[data-parallax-scene]');
    if (!scene) return;
    var layers = scene.querySelectorAll('.parallax-layer');
    scene.addEventListener('pointermove', function(e) {
      var rect = scene.getBoundingClientRect();
      var centerX = rect.width / 2;
      var centerY = rect.height / 2;
      var mouseX = e.clientX - rect.left - centerX;
      var mouseY = e.clientY - rect.top - centerY;
      layers.forEach(function(layer) {
        var depth = parseFloat(layer.getAttribute('data-depth')) || 0.1;
        var moveX = mouseX * depth * 0.5;
        var moveY = mouseY * depth * 0.5;
        layer.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';
      });
    });
    scene.addEventListener('pointerleave', function() {
      layers.forEach(function(layer) {
        layer.style.transform = 'translate(0, 0)';
      });
    });
  });
})();