Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <html>

<head>
  <base href="https://cdn.skypack.dev/">
  <meta charset="utf-8">
  <title>Abstract Cellshading Corridor</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

html,
    body {
      width: 100%;
      height: 100%;
    }

body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }

canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

#collection-btn {
      position: fixed;
      bottom: 20px;
      left: 20px;
      padding: 15px 25px;
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(10px, 2vw, 14px);
      color: #fff;
      background: linear-gradient(45deg, #ff00ff, #00ffff);
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(10deg);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5),
        0 0 15px rgba(255, 0, 255, 0.5),
        0 0 25px rgba(0, 255, 255, 0.5);
      transition: all 0.3s ease-in-out;
      text-decoration: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

#collection-btn:hover {
      transform: perspective(1000px) rotateX(5deg) translateY(-2px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 0, 255, 0.7),
        0 0 35px rgba(0, 255, 255, 0.7);
    }

#credits {
      position: fixed;
      bottom: 20px;
      right: 20px;
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(10px, 2vw, 14px);
      color: #fff;
      text-shadow: 0 0 10px #ff00ff,
        0 0 20px #00ffff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

#title {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Press Start 2P', cursive;
      font-size: 64px;
      color: #fff;
      text-shadow: 0 0 20px #ff00ff,
        0 0 40px #00ffff,
        0 0 60px #ffff00;
      z-index: 1000;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

@media (max-width: 768px) {
      #collection-btn {
        padding: 10px 15px;
      }

#title {
        font-size: 32px;
      }
    }
  </style>
</head>

<body>
  <div id="title">TWISTING</div>
  <a href="https://codepen.io/your-work?item_type=collection" id="collection-btn">MY COLLECTIONS</a>
  <div id="credits">CODE by HL</div>
  <script>
    let scene, camera, renderer, corridor;
    const colors = [0xff00ff, 0x00ffff, 0xffff00, 0xff0066];

function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
    window.addEventListener('resize', onWindowResize, false);
    window.addEventListener('orientationchange', onWindowResize, false);
    init();
  </script>
</body>

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

Frontend Forever App