Trig.js Example - Shadows

HTML

<html>
    <head>
        <title>Trig.js Example - Shadows</title>
        
        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

        <!-- Google Fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap" rel="stylesheet">
        <!--End Fonts -->

        <!-- Mobile viewport meta tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />

    </head>
    <body>
        <div class="pageContainer">

            <div class="container">

                <h1 id="shadow" class="alignCenter" data-trig-max="200" data-trig-pixels="true" data-trig>Trig.JS Shadow</h1>

            </div>
            
            <div class="container">

                <div class="alignCenter"><div>An iDev Games Production</div></div>

            </div>
            
        </div>
    </body>
</html>

CSS

body{
  margin:0px;
  padding:0px;
  background-color:#060606;
  color:#FFF;
  font-family: 'Space Mono', monospace;
}
.pageContainer{
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.container{
  width:80vw;
  min-height:100vh;
  position:relative;
  margin:auto;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
h1{
  font-family: 'Bebas Neue', cursive;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  font-size:72px;
}
#shadow{
  text-shadow: var(--trig-px) var(--trig-px) 0px rgba(255,110,68,0.48);
  transition: text-shadow ease-out 0.3s;
}