Le pagine in fila nello spazio

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pages lined up in space</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
  <script type="importmap">
    { "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
    } }
  </script>
</head>
<body>
  <!-- the work page of a made-up designer. The projects are thin pages standing in a row in space, like magazines on a
       shelf seen from the side; the wheel, the arrows or a finger move the row, the pages bend with the speed, and the
       one in the middle steps out of the row and turns to face you -->
  <main class="sala" data-sala>
    <canvas class="tela" data-tela aria-hidden="true"></canvas>

    <header class="testata">
      <p class="firma">KAI VERO<sup>&reg;</sup></p>
      <p class="sopra">Selected work</p>
    </header>

    <section class="scheda" aria-live="polite">
      <p class="scheda__tipo" data-tipo>Brand &middot; editorial</p>
      <h1 class="scheda__nome" data-nome>Paper Moons</h1>
      <p class="scheda__frase" data-frase>A lunar calendar printed on tracing paper.</p>
    </section>

    <nav class="comandi" aria-label="Projects">
      <button type="button" data-passo="-1" aria-label="Previous project">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
      </button>
      <button type="button" data-passo="1" aria-label="Next project">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
      </button>
    </nav>
    <p class="aiuto">Scroll, use the arrows or drag</p>
  </main>

  <!-- the projects: the script draws a cover for each one -->
  <ul class="progetti" data-progetti hidden>
    <li data-colore="#ff4b3e" data-carta="#f6efe6" data-forma="luna">Paper Moons|Brand · editorial|A lunar calendar printed on tracing paper.</li>
    <li data-colore="#181818" data-carta="#e9e4da" data-forma="solchi">Low Tide Records|Label · website|A record label that only releases at high tide.</li>
    <li data-colore="#3b5bdb" data-carta="#eef0f6" data-forma="griglia">Field Notes Co.|Product · launch|Notebooks with a ruler printed on the spine.</li>
    <li data-colore="#f2b705" data-carta="#1d1b18" data-forma="onde">Sunday Ferry|Travel · app|Timetables for a ferry that runs once a week.</li>
    <li data-colore="#2f9e44" data-carta="#f3f1ea" data-forma="foglie">Greenhouse 9|Studio · website|A plant nursery with a room for every season.</li>
    <li data-colore="#e64980" data-carta="#191919" data-forma="cerchi">Neon Choir|Music · campaign|Posters for a choir that sings in car parks.</li>
    <li data-colore="#1971c2" data-carta="#f1ede4" data-forma="righe">Blue Hour Hotel|Hospitality · brand|Rooms named after the minutes after sunset.</li>
    <li data-colore="#e8590c" data-carta="#efe9df" data-forma="scala">Orange Steps|Archive · collection|Every staircase of a hill town, one a day.</li>
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script type="module" src="script.js"></script>
</body>
</html>