<div class="first-section">
  <h1 style="text-align: center">Play segments (hover inside of container 👇)</h1>
</div>

<div style="width: 50%; height: 50%; justify-content: center; align-items: center; margin: auto">
  <lottie-player
                 id="firstLottie"
                 src="https://assets9.lottiefiles.com/packages/lf20_gr2cHM.json"
                 style="border-color: red; border-style: solid; border-width: 5px"
  >
  </lottie-player> 
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.first-section {
 background-color: white;
}

.second-section {

  height: 100vh;
  width: 100%;
 background-color: white; 
}

.third-section {
  height: 100vh;
  width: 100%;
 background-color: white;  
}

h1 {
font-family: 'Roboto Mono', monospace;
}


.my-font {
font-family: 'Roboto Mono', monospace;
}

let player = document.getElementById("firstLottie");

player.addEventListener("ready", () => {
LottieInteractivity.create({
    player: "#firstLottie",
    mode:"cursor",
actions: [
        {
            position: { x: [0, 1], y: [0, 1] },
            type: "loop",
            frames: [45, 60]
        },
        {
            position: { x: -1, y: -1 },
            type: 'stop',
            frames: [0],
        }
    ]
});
});