savers.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Savers — Studio Joe</title>
  <meta name="description" content="The StudioJoeSavers macOS screen-savers, ported 1:1 to the web — five raw-WebGPU/WGSL scenes and one Three.js scene.">

  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --font:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                   "Helvetica Neue", Arial, sans-serif;
      --bg:        #060608;
      --bg-g:      radial-gradient(ellipse 90% 60% at 50% -10%,
                     #122 0%, #0c1418 30%, #08090e 62%, #060608 100%);
      --label-1:   rgba(255,255,255,0.92);
      --label-2:   rgba(255,255,255,0.55);
      --label-3:   rgba(255,255,255,0.28);
      --accent:    #2DD4BF;
      --accent-bg: rgba(45,212,191,0.12);
      --fill-1:    rgba(255,255,255,0.04);
      --fill-2:    rgba(255,255,255,0.08);
      --sep:       rgba(255,255,255,0.09);
      --glass-bg:  rgba(255,255,255,0.05);
      --glass-bdr: rgba(255,255,255,0.10);
      --glass-shd: 0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
      --atmo:      45,212,191;
    }

    html {
      background: var(--bg);
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body {
      font-family: var(--font);
      background: var(--bg-g);
      background-attachment: fixed;
      color: var(--label-1);
      min-height: 100svh;
    }

    #atmo {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% 8%,
        rgba(var(--atmo), 0.14) 0%, rgba(var(--atmo), 0.05) 38%, transparent 70%);
    }
    .grain {
      position: fixed; inset: 0; z-index: 9999;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.035; mix-blend-mode: overlay;
    }

    header {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 1000; height: 52px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(24px, 5vw, 80px);
      border-bottom: 1px solid var(--sep);
      background: rgba(6,6,8,0.55);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
    }
    .wordmark {
      font-size: 15px; font-weight: 700;
      letter-spacing: -0.02em; color: var(--label-1);
      text-decoration: none; transition: color 0.2s;
    }
    .wordmark:hover { color: var(--accent); }
    nav { display: flex; align-items: center; gap: 4px; }
    nav a {
      font-size: 13px; font-weight: 500;
      color: var(--label-2); text-decoration: none;
      padding: 6px 12px; border-radius: 6px;
      transition: color 0.2s, background 0.2s;
    }
    nav a:hover { color: var(--label-1); background: var(--fill-2); }
    nav a.current { color: var(--accent); }

    main { position: relative; z-index: 10; }
    .zone {
      position: relative;
      display: flex; flex-direction: column; align-items: flex-start;
      padding: clamp(88px, 14vh, 160px) clamp(24px, 6vw, 96px) clamp(64px, 10vh, 120px);
    }
    .eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--accent);
      margin-bottom: 18px;
    }
    .zone h1 {
      font-size: clamp(2.6rem, 7vw, 6.4rem);
      font-weight: 700; letter-spacing: -0.035em; line-height: 1.02;
      color: var(--label-1); max-width: 18ch;
    }
    .zone h1 .accent { color: var(--accent); }
    .lede {
      margin-top: 22px;
      font-size: clamp(15px, 1.6vw, 19px);
      font-weight: 400; line-height: 1.55;
      color: var(--label-2); max-width: 60ch;
    }

    .savers-grid {
      margin-top: clamp(36px, 6vh, 64px);
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
      gap: clamp(16px, 2vw, 24px);
      width: min(100%, 1180px);
    }
    .saver-card {
      display: flex; flex-direction: column;
      border-radius: 18px; overflow: hidden;
      background: var(--glass-bg);
      border: 1px solid var(--glass-bdr);
      box-shadow: var(--glass-shd);
      text-decoration: none; color: inherit;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s;
    }
    .saver-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
      border-color: rgba(45,212,191,0.45);
    }
    .saver-thumb {
      position: relative;
      width: 100%; aspect-ratio: 16 / 10;
      background: #060a0c;
      border-bottom: 1px solid var(--sep);
      overflow: hidden;
    }
    .saver-thumb iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0; display: block;
      pointer-events: none;       /* the whole card is the click target */
    }
    .saver-thumb .scrim {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(6,6,8,0.55) 100%);
      pointer-events: none;
    }
    .saver-body { padding: clamp(16px, 1.8vw, 22px); }
    .saver-tag {
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--accent);
    }
    .saver-title {
      margin-top: 6px;
      font-size: clamp(17px, 1.7vw, 20px); font-weight: 700;
      letter-spacing: -0.02em; color: var(--label-1);
    }
    .saver-desc {
      margin-top: 8px;
      font: 12.5px/1.55 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
      color: var(--label-2);
    }
    .saver-go {
      margin-top: 14px;
      font-size: 13px; font-weight: 600; color: var(--accent);
    }

    .note {
      margin-top: clamp(24px, 4vh, 40px);
      font-size: 12.5px; line-height: 1.6; color: var(--label-3);
      max-width: 60ch;
    }
    .note a { color: var(--label-2); }
    .note a:hover { color: var(--accent); }

    footer {
      position: relative; z-index: 10;
      padding: clamp(28px, 5vh, 48px) clamp(24px, 6vw, 96px);
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      border-top: 1px solid var(--sep);
      background: rgba(0,0,0,0.25);
    }
    .footer-sub { font-size: 11px; color: var(--label-3); letter-spacing: 0.04em; }
    .footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
    .footer-link {
      font-size: 11px; font-weight: 500; color: var(--label-3);
      text-decoration: none; letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .footer-link:hover { color: var(--accent); }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .saver-card { transition: none; }
    }
  </style>
</head>
<body>

<div class="grain" aria-hidden="true"></div>
<div id="atmo" aria-hidden="true"></div>

<header>
  <a class="wordmark" href="/">Studio Joe</a>
  <nav>
    <a href="/savers.html" class="current">Savers</a>
    <a href="/resume.html">Resume</a>
    <a href="https://www.linkedin.com/in/joey-v-287ba5394" target="_blank" rel="noopener">LinkedIn</a>
    <a href="https://github.com/jayvee6" target="_blank" rel="noopener">GitHub</a>
  </nav>
</header>

<main>
  <section class="zone">
    <p class="eyebrow">Savers</p>
    <h1>Screen-savers, <span class="accent">on the web.</span></h1>
    <p class="lede">
      The StudioJoeSavers macOS screen-savers, ported 1:1 to the browser — five
      raw-WebGPU/WGSL fragment scenes and one Three.js scene. Time-driven, not
      audio-reactive. Each is a self-contained page with a windowed FPS HUD and
      a live parameter-control panel. Click any tile to open the full-screen
      saver.
    </p>

    <div class="savers-grid">

      <a class="saver-card" href="/savers/tideline.html">
        <div class="saver-thumb">
          <iframe src="/savers/tideline.html" loading="lazy" title="Tideline preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">WebGPU · WGSL</span>
          <h2 class="saver-title">Tideline</h2>
          <p class="saver-desc">Two-level domain-warped FBM ribbons · oil-slick iridescence</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

      <a class="saver-card" href="/savers/lattice.html">
        <div class="saver-thumb">
          <iframe src="/savers/lattice.html" loading="lazy" title="Lattice preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">WebGPU · WGSL</span>
          <h2 class="saver-title">Lattice</h2>
          <p class="saver-desc">Gyroid TPMS SDF dive · Beer-Lambert glass · Fresnel rim</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

      <a class="saver-card" href="/savers/mercury.html">
        <div class="saver-thumb">
          <iframe src="/savers/mercury.html" loading="lazy" title="Mercury preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">WebGPU · WGSL</span>
          <h2 class="saver-title">Mercury</h2>
          <p class="saver-desc">Smooth-blended blob SDF · spectral dispersion · time-of-day</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

      <a class="saver-card" href="/savers/topography.html">
        <div class="saver-thumb">
          <iframe src="/savers/topography.html" loading="lazy" title="Topography preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">WebGPU · WGSL</span>
          <h2 class="saver-title">Topography</h2>
          <p class="saver-desc">Domain-warped terrain · fwidth contour lines · hypsometric ramp</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

      <a class="saver-card" href="/savers/plasma.html">
        <div class="saver-thumb">
          <iframe src="/savers/plasma.html" loading="lazy" title="Plasma preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">WebGPU · WGSL</span>
          <h2 class="saver-title">Plasma</h2>
          <p class="saver-desc">Two-layer warped sine field · silk specular · time-of-day</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

      <a class="saver-card" href="/savers/pipes.html">
        <div class="saver-thumb">
          <iframe src="/savers/pipes.html" loading="lazy" title="Pipes preview" aria-hidden="true" tabindex="-1"></iframe>
          <div class="scrim"></div>
        </div>
        <div class="saver-body">
          <span class="saver-tag">Three.js</span>
          <h2 class="saver-title">Pipes</h2>
          <p class="saver-desc">Procedural pipe growth · PBR glass · studio lighting + shadows</p>
          <span class="saver-go">Open ↗</span>
        </div>
      </a>

    </div>

    <p class="note">
      The five WGSL savers need a WebGPU browser (Chrome / Edge 113+, Safari 18+).
      Source on <a href="https://github.com/jayvee6/studiojoe-savers-web" target="_blank" rel="noopener">GitHub ↗</a>.
    </p>
  </section>
</main>

<footer>
  <p class="footer-sub">© 2026 Studio Joe</p>
  <div class="footer-links">
    <a class="footer-link" href="/">Home</a>
    <a class="footer-link" href="/resume.html">Resume</a>
    <a class="footer-link" href="https://github.com/jayvee6" target="_blank" rel="noopener">GitHub ↗</a>
  </div>
</footer>

</body>
</html>