flatspace/scene_change.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scene Change — 3D Models</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">
  <style>
    body {
      background: #000;
      color: #eee;
      font-family: 'Space Grotesk', sans-serif;
      margin: 0;
      padding: 0;
    }
    header {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgba(10, 10, 10, 0.8);
      padding: 0.5em;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    header h1 {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      max-width: 100vw;
      text-overflow: clip;
      transition: letter-spacing 1s ease;
    }
    header h1:hover {
      letter-spacing: 10.0em;
      transition: letter-spacing 5s ease;
    }
    main {
      max-width: 1280px;
      margin: 1em auto;
      padding: 0 1em;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      padding: 20px 0;
    }
    .item img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      cursor: pointer;
      background: #111;
      display: block;
    }
    .item p {
      margin: 0.5em 0 0;
      font-size: 0.9em;
      color: #ccc;
      text-align: center;
    }
    .model-viewer-container {
      max-width: 1000px;
      margin: 40px auto;
      display: none;
    }
    model-viewer#viewer {
      width: 100%;
      height: 600px;
      background: #000;
    }
    .back {
      margin: 1em auto 0;
      display: block;
      background: #444;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <header>
    <h1>Grisha Bruskin</h1>
    <p>Scene Change</p>
  </header>

  <main>
    <section>
      <h2 style="text-align: center;">Scene Change – 3D Models</h2>
      <p style="text-align: center; max-width: 800px; margin: 0 auto 2em;">
        “Scene Change” was originally presented in the Russian Pavilion at the 57th Venice
        Biennale in 2017 as part of the <em>Theatrum Orbis</em> exhibition curated by Semyon
        Mikhailovsky. Grisha Bruskin’s installation featured theatrical arrangements of
        gypsum figures, mechanized hybrids such as two-headed birds, soldiers with
        binoculars, drones, and more — staged as a sequence of “scenes” exploring themes
        of power, surveillance, fear, and the transformation of myth in contemporary society.
      </p>

      <div class="gallery">
        <div class="item" onclick="openModel('bird')">
          <img src="models/previews/bird.jpg" alt="Bird">
          <p>Capital</p>
        </div>
        <div class="item" onclick="openModel('bowman')">
          <img src="models/previews/bowman.jpg" alt="Bowman">
          <p>Unleashed Capitalism</p>
        </div>
        <div class="item" onclick="openModel('fish')">
          <img src="models/previews/fish.jpg" alt="Fish">
          <p>Homo Sacer</p>
        </div>
        <div class="item" onclick="openModel('head')">
          <img src="models/previews/head.jpg" alt="Head">
          <p>Art Power</p>
        </div>
        <div class="item" onclick="openModel('shooter_01')">
          <img src="models/previews/shooter_01.jpg" alt="Shooter_01">
          <p>Shooter_01</p>
        </div>
        <div class="item" onclick="openModel('shooter_02')">
          <img src="models/previews/shooter_02.jpg" alt="Shooter_02">
          <p>Shooter_02</p>
        </div>
        <div class="item" onclick="openModel('shooter_03')">
          <img src="models/previews/shooter_03.jpg" alt="Shooter_03">
          <p>Shooter_03</p>
        </div>
        <div class="item" onclick="openModel('cloud_01')">
          <img src="models/previews/cloud_01.jpg" alt="cloud_01">
          <p>cloud_01</p>
        </div>
        <div class="item" onclick="openModel('cloud_02')">
          <img src="models/previews/cloud_02.jpg" alt="cloud_02">
          <p>cloud_02</p>
        </div>
        <div class="item" onclick="openModel('cloud_03')">
          <img src="models/previews/cloud_03.jpg" alt="cloud_03">
          <p>cloud_03</p>
        </div>
          <div class="item" onclick="openModel('circle')">
          <img src="models/previews/circle.jpg" alt="circle">
          <p>circle</p>
        </div>
      </div>

      <div class="model-viewer-container" id="viewerSection">
        <model-viewer id="viewer"
          src=""
          alt="3D model"
          auto-rotate
          camera-controls
          ar
          ar-modes="webxr scene-viewer quick-look"
          shadow-intensity="1"
          exposure="0.8"
          environment-image="neutral">
        </model-viewer>
        <button class="back" onclick="closeModel()">&larr; back</button>
      </div>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 Andrey Flat</p>
  </footer>

  <script>
    function openModel(name) {
      document.querySelector('.gallery').style.display = 'none';
      document.querySelector('#viewerSection').style.display = 'block';
      document.querySelector('#viewer').src = `models/${name}.glb`;
    }
    function closeModel() {
      document.querySelector('#viewerSection').style.display = 'none';
      document.querySelector('.gallery').style.display = 'grid';
    }
  </script>
  <script>
    const h1 = document.querySelector("header h1");
    h1.addEventListener("mouseenter", () => {
      const maxSpacing = 12.0;
      const spacing = Math.min(window.innerWidth / 500, maxSpacing);
      h1.style.letterSpacing = spacing + "em";
      h1.style.transition = "letter-spacing 5s ease";
    });
    h1.addEventListener("mouseleave", () => {
      h1.style.letterSpacing = "";
      h1.style.transition = "letter-spacing 1s ease";
    });
  </script>
</body>
</html>