3D Cube Gallery with Scrollable Art Sections

215 alejandrokundrah

<div id="scene">
  <div id="cube">
    <div class="face" data-face="top" data-i="0"><span class="face-ph">TOP</span></div>
    <div class="face" data-face="front" data-i="1"><span class="face-ph">FRONT</span></div>
    <div class="face" data-face="right" data-i="2"><span class="face-ph">RIGHT</span></div>
    <div class="face" data-face="back" data-i="3"><span class="face-ph">BACK</span></div>
    <div class="face" data-face="left" data-i="4"><span class="face-ph">LEFT</span></div>
    <div class="face" data-face="bottom" data-i="5"><span class="face-ph">BOTTOM</span></div>
  </div>
</div>

<div id="hud">
  <div id="hud_pct">000%</div>
  <div class="progress-bar">
    <div class="progress-fill" id="prog_fill"></div>
  </div>
  <div class="scene-label" id="scene_name">DESCENT</div>
</div>

<div id="face_caption">
  <div id="face_caption_num">01</div>
  <div id="face_caption_name">DESCENT</div>
</div>

<section id="s0">
    <div class="text-card">
      <div class="tag">Cube Gallery — Bad Art</div>
      <h1>WORK<br>AGAINST<br>THE MODEL</h1>
      <p class="body-text">
        What happens when you ask AI
        to do the opposite of what it was built for?
        Break proportion. Flip symmetry.
        Leave the mistakes in place.
        Scroll to find out.
      </p>
      <div class="cta-row">
        <a class="cta" href="#s1">
          Enter
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

<section id="s1">
    <div class="text-card right">
      <div class="h-line"></div>
      <div class="tag">01 — Art Rebellion</div>
      <h2>FLIP<br>THE<br>PROMPT</h2>
      <p class="body-text">
        A cow walking a monster
        instead of a monster walking a cow.
        That inversion is enough
        to break template thinking.
        The cape ends up on the wrong body.
      </p>
      <div class="cta-row">
        <a class="cta-back" href="#s0">
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 6H1M6 11L1 6l5-5" />
          </svg>
          Back
        </a>
        <a class="cta" href="#s2">
          Turn
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

<section id="s2">
    <div class="text-card">
      <div class="h-line"></div>
      <div class="tag">02 — Moo Walk</div>
      <h2>NEITHER<br>LEADS</h2>
      <p class="body-text">
        Clashing colors. No balance.
        A dance with no choreography.
        When the model works against itself
        something more genuine surfaces.
      </p>
      <div class="cta-row">
        <a class="cta-back" href="#s1">
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 6H1M6 11L1 6l5-5" />
          </svg>
          Back
        </a>
        <a class="cta" href="#s3">
          Turn
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

<section id="s3">
    <div class="text-card right">
      <div class="h-line"></div>
      <div class="tag">03 — Bad Art</div>
      <h2>REVERSE<br>CREATIVITY</h2>
      <p class="body-text">
        AI is trained to polish and regularize.
        The harder direction is unlearning that.
        A television for a head
        is not an error.
        It is the point.
      </p>
      <div class="stat-row" style="justify-content: flex-end">
        <div class="stat">
          <span class="stat-num">6</span>
          <span class="stat-label">Works</span>
        </div>
        <div class="stat">
          <span class="stat-num">360</span>
          <span class="stat-label">Degrees</span>
        </div>
        <div class="stat">
          <span class="stat-num">1</span>
          <span class="stat-label">Object</span>
        </div>
      </div>
      <div class="cta-row">
        <a class="cta-back" href="#s2">
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 6H1M6 11L1 6l5-5" />
          </svg>
          Back
        </a>
        <a class="cta" href="#s4">
          Turn
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

<section id="s4">
    <div class="text-card">
      <div class="h-line"></div>
      <div class="tag">04 — No Rules</div>
      <h2>NONSENSE<br>AT THE<br>CENTER</h2>
      <p class="body-text">
        Dada and the surrealists knew this.
        Put the absurd at the center
        and the edges stop pretending.
        Nine heads in the branches.
        The sun has a face and it approves.
      </p>
      <div class="cta-row">
        <a class="cta-back" href="#s3">
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 6H1M6 11L1 6l5-5" />
          </svg>
          Back
        </a>
        <a class="cta" href="#s5">
          Turn
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

<section id="s5">
    <div class="text-card right">
      <div class="h-line"></div>
      <div class="tag">05 — Super Monsters</div>
      <h2>RAW<br>NOT<br>POLISHED</h2>
      <p class="body-text">
        Forward creativity takes a sketch
        and makes it real.
        This goes the other way.
        Imperfection left in place
        is closer to something honest.
      </p>
      <div class="cta-row">
        <a class="cta-back" href="#s4">
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 6H1M6 11L1 6l5-5" />
          </svg>
          Back
        </a>
        <a class="cta" href="#s0">
          Begin again
          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M1 6h10M6 1l5 5-5 5" />
          </svg>
        </a>
      </div>
    </div>
  </section>

</div>

<div id="credit">
  <a href="https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY" target="_blank" rel="noopener">Reverse Creativity</a>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");

@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer tokens {
  :root {
    color-scheme: dark;

--dark-bg: #1c1814;
    --dark-fg: #ede8df;
    --dark-muted: #8a7b6e;
    --light-bg: #f0ece3;
    --light-fg: #0d0d14;
    --light-muted: #9a9aaa;
    --accent-dark: #d4a84b;
    --accent-light: #3a6e00;

--bg: var(--dark-bg);
    --fg: var(--dark-fg);
    --muted: var(--dark-muted);
    --accent: var(--accent-dark);

--font-display: "Bebas Neue", sans-serif;
    --font-mono: "DM Mono", monospace;
    --hairline: 0.0625rem;
    --ui-inset: 2rem;
    --card-bg: rgba(28, 24, 20, 0.82);
    --card-border: rgba(212, 168, 75, 0.2);
    --nav-x: calc(var(--ui-inset) + 0.125rem);
    --reveal-offset: 0.625rem;
    --reveal-duration: 0.5s;
    --z-ui: 10;
  }
}

@layer base {
  html {
    color-scheme: dark;
  }

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    overflow-x: hidden;
    transition: background 0.3s ease, color 0.3s ease;
  }
}

@layer layout {
  #scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    pointer-events: none;
  }

#scroll_container {
    position: relative;
    z-index: 1;
  }

section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem;
  }
}

@layer cube {
  #cube {
    --s: min(74vw, 74vh, 560px);
    width: var(--s);
    height: var(--s);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(90deg) rotateY(0deg);
    will-change: transform;
  }

.face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 48px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0,
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px,
        transparent 48px
      ),
      #14100d;

img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

&:has(img) .face-ph {
      display: none;
    }
  }

.face-ph {
    position: absolute;
    bottom: 1.5rem;
    left: 1.75rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 5rem);
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    user-select: none;
  }

.face[data-face="front"] {
    transform: translateZ(calc(var(--s) / 2));
  }
  .face[data-face="back"] {
    transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="right"] {
    transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="left"] {
    transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="top"] {
    transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  }
  .face[data-face="bottom"] {
    transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  }
}

@layer ui {
  #hud {
    position: fixed;
    top: var(--ui-inset);
    right: var(--ui-inset);
    z-index: var(--z-ui);
    text-align: right;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;

.progress-bar {
      width: 7.5rem;
      height: var(--hairline);
      background: var(--muted);
      margin-block-start: 0.5rem;
      margin-inline-start: auto;
      position: relative;
      overflow: hidden;
    }

.progress-fill {
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: 0%;
      background: var(--accent);
      transition: width 0.1s linear;
    }

.scene-label {
      font-size: 0.6rem;
      color: var(--accent);
      margin-block-start: 0.4rem;
    }
  }

#scene_strip {
    position: fixed;
    left: var(--nav-x);
    top: 50%;
    translate: -50% -50%;
    z-index: var(--z-ui);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

.scene-dot {
    position: relative;
    display: block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.3s, scale 0.3s;
    cursor: pointer;

&::before {
      content: "";
      position: absolute;
      inset: -0.2rem;
    }

&.active {
      background: var(--accent);
      scale: 1.8;
    }
  }

#theme_toggle {
    position: fixed;
    bottom: var(--ui-inset);
    left: var(--nav-x);
    translate: -50% 0;
    z-index: var(--z-ui);
    width: 2rem;
    height: 2rem;
    border: none;
    background: color-mix(in srgb, var(--muted) 35%, transparent);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;

&:hover {
      background: color-mix(in srgb, var(--muted) 55%, transparent);
    }

svg {
      width: 0.875rem;
      height: 0.875rem;
      position: absolute;
      transition: opacity 0.3s ease, rotate 0.3s ease;
      color: var(--accent);
    }

.icon-sun {
      opacity: 1;
      rotate: 0deg;
    }

.icon-moon {
      opacity: 0;
      rotate: 90deg;
    }
  }

#face_caption {
    position: fixed;
    bottom: var(--ui-inset);
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-ui);
    text-align: center;
    pointer-events: none;
    user-select: none;
  }

#face_caption_num {
    font-size: 0.58rem;
    letter-spacing: 0.28em;
    color: var(--accent);
    text-transform: uppercase;
    margin-block-end: 0.15rem;
  }

#face_caption_name {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    letter-spacing: 0.08em;
    color: var(--muted);
    opacity: 0.5;
    line-height: 1;
  }

#credit {
    position: fixed;
    right: var(--ui-inset);
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    z-index: var(--z-ui);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;

a {
      color: var(--muted);
      text-decoration: none;
    }
  }
}

@layer cards {
  .text-card {
    max-width: 23.75rem;
    padding: 2.25rem 2rem;
    background: var(--card-bg);
    border-left: var(--hairline) solid var(--card-border);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;

&.right {
      margin-inline-start: auto;
      border-left: none;
      border-right: var(--hairline) solid var(--card-border);
      text-align: right;

.h-line {
        transform-origin: right;
        margin-inline-start: auto;
      }
    }

&.center {
      margin-inline: auto;
      border-left: none;
      border-top: var(--hairline) solid var(--card-border);
      text-align: center;
      max-width: 28.75rem;

.h-line {
        transform-origin: center;
        margin-inline: auto;
      }
    }
  }

.tag {
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: 1.1rem;
  }

:where(h1, h2) {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 0.92;
  }

h1 {
    font-size: clamp(3rem, 8vw, 6.5rem);
  }
  h2 {
    font-size: clamp(2.2rem, 5vw, 4rem);
  }

.body-text {
    font-size: 0.78rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--fg) 55%, transparent);
    margin-block-start: 1.25rem;
  }

.stat-row {
    display: flex;
    gap: 2.5rem;
    margin-block-start: 2rem;
    flex-wrap: wrap;
  }

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

.stat-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--accent);
    line-height: 1;
  }

.stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
  }

.h-line {
    width: 3.125rem;
    height: var(--hairline);
    background: var(--accent);
    margin-block-end: 1.2rem;
    transform-origin: left;
  }

.cta-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-block-start: 1.75rem;
  }

.text-card.right .cta-row {
    justify-content: flex-end;
  }

.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    border: var(--hairline) solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;

&:hover {
      background: var(--accent);
      color: var(--bg);
    }

svg {
      width: 0.6875rem;
      height: 0.6875rem;
    }
  }

.cta-back {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    border: var(--hairline) solid
      color-mix(in srgb, var(--muted) 45%, transparent);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;

&:hover {
      background: color-mix(in srgb, var(--muted) 12%, transparent);
      border-color: var(--muted);
      color: var(--fg);
    }

svg {
      width: 0.6875rem;
      height: 0.6875rem;
    }
  }
}

@layer reveal {
  :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
    opacity: 0;
    translate: 0 var(--reveal-offset);
  }

:is(h1, h2) {
    translate: 0 1.125rem;
    transition: opacity var(--reveal-duration) ease 0.08s,
      translate var(--reveal-duration) ease 0.08s;
  }

.tag {
    transition: opacity var(--reveal-duration) ease,
      translate var(--reveal-duration) ease;
  }

.body-text {
    transition: opacity var(--reveal-duration) ease 0.2s,
      translate var(--reveal-duration) ease 0.2s;
  }

.stat-row {
    transition: opacity var(--reveal-duration) ease 0.3s,
      translate var(--reveal-duration) ease 0.3s;
  }

:is(.cta, .cta-back) {
    transition: opacity var(--reveal-duration) ease 0.35s,
      translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s,
      border-color 0.2s;
  }

.h-line {
    opacity: 0;
    scale: 0 1;
    transition: opacity 0.4s ease, scale 0.4s ease;
  }

:is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back).visible {
    opacity: 1;
    translate: 0 0;
  }

.h-line.visible {
    opacity: 1;
    scale: 1 1;
  }
}

@layer theme {
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: var(--light-bg);
    --fg: var(--light-fg);
    --muted: var(--light-muted);
    --accent: var(--accent-light);
    --card-bg: rgba(240, 236, 227, 0.08);
    --card-border: rgba(58, 110, 0, 0.14);

.face {
      background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.05) 0,
          rgba(0, 0, 0, 0.05) 1px,
          transparent 1px,
          transparent 48px
        ),
        repeating-linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.05) 0,
          rgba(0, 0, 0, 0.05) 1px,
          transparent 1px,
          transparent 48px
        ),
        #ddd8cf;
    }

.face-ph {
      color: rgba(0, 0, 0, 0.07);
    }

#theme_toggle {
      svg {
        color: var(--fg);
      }
      .icon-sun {
        opacity: 0;
        rotate: -90deg;
      }
      .icon-moon {
        opacity: 1;
        rotate: 0deg;
      }
    }

#face_caption_name {
      opacity: 0.35;
    }
  }
}

@layer responsive {
  @media (width <= 56.25em) {
    #hud {
      top: 1rem;
      right: 1rem;
    }

#scene_strip {
      display: none;
    }

#theme_toggle {
      bottom: 1rem;
      left: 1.25rem;
      translate: 0 0;
    }

#face_caption {
      bottom: 1rem;
    }

section {
      min-height: 150vh;
      align-items: flex-end;
      padding: 0 1.5rem 3.5rem;
    }

#s0 {
      min-height: 100vh;
      align-items: center;
      padding: 4rem 1.5rem;
    }

:is(.text-card, .text-card.right, .text-card.center) {
      max-width: 100%;
      padding: 1.5rem 1.25rem;
    }

.body-text {
      line-height: 1.55;
    }

.stat-row {
      gap: 1.5rem;
      margin-block-start: 1.25rem;
    }

.cta-row {
      margin-block-start: 1.25rem;
    }
  }
}

const IMAGE_SRCS = [
  "https://assets.codepen.io/573855/demo-raw-01.webp",
  "https://assets.codepen.io/573855/demo-raw-02.webp",
  "https://assets.codepen.io/573855/demo-raw-03.webp",
  "https://assets.codepen.io/573855/demo-raw-04.webp",
  "https://assets.codepen.io/573855/demo-raw-05.webp",
  "https://assets.codepen.io/573855/demo-raw-06.webp"
];

const IMAGE_ASPECTS = [1, 1, 1, 1, 1, 1];

const FACE_NAMES = [
  "DESCENT",
  "REBELLION",
  "MOO WALK",
  "BAD ART",
  "NO RULES",
  "SUPER"
];

const SWAP_RADIUS = 3;

const N = IMAGE_SRCS.length;
const STOPS = buildStops(N);

const stopIndex = (s) => Math.min(N - 1, Math.floor(s * (N - 1)));

function faceAtStop(i) {
  if (i < 6) return i;
  return 1 + ((i - 2) % 4);
}

const dom = {
  cube: document.getElementById("cube"),
  faces: [...document.querySelectorAll(".face")],
  scrollEl: document.getElementById("scroll_container"),
  strip: document.getElementById("scene_strip"),
  hudPct: document.getElementById("hud_pct"),
  progFill: document.getElementById("prog_fill"),
  sceneName: document.getElementById("scene_name"),
  captionNum: document.getElementById("face_caption_num"),
  captionName: document.getElementById("face_caption_name"),
  themeToggle: document.getElementById("theme_toggle")
};

for (let i = dom.scrollEl.querySelectorAll("section").length; i < N; i++) {
  const sec = document.createElement("section");
  sec.id = `s${i}`;
  dom.scrollEl.appendChild(sec);
}

dom.strip.innerHTML = "";
for (let i = 0; i < N; i++) {
  const a = document.createElement("a");
  a.href = `#s${i}`;
  a.className = "scene-dot" + (i === 0 ? " active" : "");
  dom.strip.appendChild(a);
}

const sceneDots = [...document.querySelectorAll(".scene-dot")];
const sections = [...document.querySelectorAll("#scroll_container section")];

const faceImgIdx = new Array(6).fill(-1);
let currentStop = -1;

const imagePromises = new Map();

const isDark = () =>
  document.documentElement.getAttribute("data-theme") === "dark";

const getDarkSrc = (src) => src.replace(/\.webp$/, "-dark.webp");

const getActiveSrc = (imgIdx) => {
  const src = IMAGE_SRCS[imgIdx];
  return isDark() ? getDarkSrc(src) : src;
};

IMAGE_SRCS.forEach((src) => {
  preloadImage(src);
  preloadImage(getDarkSrc(src));
});

async function setFaceImage(faceIdx, imgIdx, force = false) {
  if (!force && faceIdx === faceAtStop(currentStop)) return;
  if (!force && faceImgIdx[faceIdx] === imgIdx) return;
  faceImgIdx[faceIdx] = imgIdx;

const src = getActiveSrc(imgIdx);
  const face = dom.faces[faceIdx];

await preloadImage(src);

if (faceImgIdx[faceIdx] !== imgIdx) return;

let img = face.querySelector("img");
  if (!img) {
    img = new Image();
    face.appendChild(img);
  }
  img.alt = FACE_NAMES[imgIdx] ?? "";
  img.src = src;
  img.style.objectFit = (IMAGE_ASPECTS[imgIdx] ?? 1) !== 1 ? "contain" : "";
}

const refreshFaceImages = () => {
  const snapshot = [...faceImgIdx];
  faceImgIdx.fill(-1);
  snapshot.forEach((imgIdx, faceIdx) => {
    if (imgIdx !== -1) setFaceImage(faceIdx, imgIdx, true);
  });
};

for (let i = 0; i < Math.min(N, 6); i++) {
  if (IMAGE_SRCS[i]) setFaceImage(i, i, true);
}

function checkImageSwaps(smooth) {
  const base = stopIndex(smooth);
  for (let offset = -SWAP_RADIUS; offset <= SWAP_RADIUS; offset++) {
    if (offset === 0) continue;
    const si = base + offset;
    if (si < 0 || si >= N) continue;
    setFaceImage(faceAtStop(si), si);
  }
}

let lastFaceIdx = -1;

const easeIO = (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);

let sectionTops = [];

const buildSectionTops = () => {
  sectionTops = sections.map(
    (s) => s.getBoundingClientRect().top + window.scrollY
  );
};

const sectionIndexFromScroll = (y) => {
  const mid = y + innerHeight * 0.5;
  let idx = 0;
  for (let i = 0; i < sectionTops.length; i++) {
    if (mid >= sectionTops[i]) idx = i;
  }
  return Math.min(idx, N - 1);
};

const mq = window.matchMedia("(prefers-color-scheme: dark)");
const getSystemTheme = () => (mq.matches ? "dark" : "light");

const applyTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme);
  document.documentElement.style.colorScheme = theme;
  refreshFaceImages();
};

applyTheme(getSystemTheme());
mq.addEventListener("change", (e) => applyTheme(e.matches ? "dark" : "light"));

dom.themeToggle.addEventListener("click", () => {
  const cur =
    document.documentElement.getAttribute("data-theme") || getSystemTheme();
  applyTheme(cur === "dark" ? "light" : "dark");
});

const mqSmall = window.matchMedia("(max-width: 56.25em)");

let maxScroll = 1;
let lastScrollHeight = 0;
let lastInnerHeight = 0;

const resize = () => {
  const h = document.documentElement.scrollHeight;
  const vh = innerHeight;
  if (h === lastScrollHeight && vh === lastInnerHeight) return;
  lastScrollHeight = h;
  lastInnerHeight = vh;
  maxScroll = Math.max(1, h - vh);
  buildSectionTops();
};

resize();

let tgt = 0;
let smooth = 0;
let velocity = 0;

const ease = 0.1;
const dynamicFriction = (v) => (Math.abs(v) > 200 ? 0.8 : 0.9);

window.addEventListener("resize", () => {
  resize();
  tgt = maxScroll > 0 ? scrollY / maxScroll : 0;
  smooth = tgt;
});

let resizePending = false;
const ro = new ResizeObserver(() => {
  if (resizePending) return;
  resizePending = true;
  requestAnimationFrame(() => {
    resize();
    tgt = maxScroll > 0 ? scrollY / maxScroll : 0;
    smooth = tgt;
    resizePending = false;
  });
});
ro.observe(document.documentElement);

window.addEventListener(
  "scroll",
  () => {
    tgt = maxScroll > 0 ? scrollY / maxScroll : 0;
    tgt = Math.max(0, Math.min(1, tgt));
  },
  { passive: true }
);

window.addEventListener(
  "wheel",
  (e) => {
    e.preventDefault();
    const linePx = 16;
    const pagePx = innerHeight * 0.9;
    const delta =
      e.deltaMode === 1
        ? e.deltaY * linePx
        : e.deltaMode === 2
        ? e.deltaY * pagePx
        : e.deltaY;
    if (Math.abs(delta) < 5) return;
    stopAnchorAnim();
    velocity += delta;
    velocity = Math.max(-600, Math.min(600, velocity));
  },
  { passive: false }
);

const revealEls = [
  ...document.querySelectorAll(
    ".tag, h1, h2, .body-text, .stat-row, .cta, .cta-back, .h-line"
  )
];

let lastNow = performance.now();

const frame = (now) => {
  requestAnimationFrame(frame);

if (document.hidden) {
    lastNow = now;
    return;
  }

const dt = Math.min((now - lastNow) / 1000, 0.05);
  lastNow = now;

velocity *= Math.pow(dynamicFriction(velocity), dt * 60);
  if (Math.abs(velocity) < 0.01) velocity = 0;

if (Math.abs(velocity) > 0.2) {
    const next = Math.max(0, Math.min(scrollY + velocity * ease, maxScroll));
    window.scrollTo(0, next);
    tgt = next / maxScroll;
  }

smooth += (tgt - smooth) * (1 - Math.exp(-dt * 8));
  smooth = Math.max(0, Math.min(1, smooth));

updateHUD(smooth);
  checkImageSwaps(smooth);
  setCubeTransform(smooth);
};

requestAnimationFrame(frame);

let anchorAnim = null;
let isAnchorScrolling = false;

const stopAnchorAnim = () => {
  if (anchorAnim) {
    cancelAnimationFrame(anchorAnim);
    anchorAnim = null;
  }
  isAnchorScrolling = false;
};

const easeInOutCubic = (t) =>
  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;

window.addEventListener("touchstart", stopAnchorAnim, { passive: true });
window.addEventListener("mousedown", stopAnchorAnim, { passive: true });
window.addEventListener("keydown", stopAnchorAnim);

document.addEventListener("click", (e) => {
  const a = e.target.closest('a[href^="#s"]');
  if (!a) return;
  const target = document.querySelector(a.getAttribute("href"));
  if (!target) return;
  e.preventDefault();
  const isHero = a.getAttribute("href") === "#s0";
  const idx = sections.indexOf(target);
  const baseY =
    idx >= 0
      ? sectionTops[idx]
      : target.getBoundingClientRect().top + window.scrollY;
  const extraOffset =
    mqSmall.matches && !isHero
      ? Math.max(0, target.offsetHeight - innerHeight)
      : 0;
  smoothScrollToY(Math.max(0, baseY + extraOffset));
});

3D Cube Gallery with Scrollable Art Sections

Recommended