Page d'accueil 3D

20 0 Sites web alejandrokundrah Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

19 October 2026

Jeu de course sans fin en 3D avec HTML et JavaScript

30 November 2024

Page de destination – Maquillage

30 March 2025

Un code par ytr3d3

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>GRAVITY — Digital Studio</title>
    <link rel="stylesheet" href="style.css">
    <meta
      name="description"
      content="GRAVITY — Independent digital studio. Less noise. More gravity."
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&family=Raleway:wght@400;500;600;700;900&display=swap"
      rel="stylesheet"
    />
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="gradient"></div>
    <div id="webgl"><canvas id="scene"></canvas></div>
    <div id="loader">
      <div class="loader-content">
        <div class="loader-status loader-item" id="loader-status">
          Calibrating gravity field
        </div>
        <div class="progress-track loader-item">
          <div class="progress-fill" id="progress-fill"></div>
        </div>
        <div class="loader-count loader-item" id="loader-count">000%</div>
      </div>
    </div>
    <header id="header">
      <a class="wordmark" href="#home">GRAVITY</a>
      <nav class="nav">
        <a href="#works">Works</a><a href="#services">Services</a
        ><a href="#team">Team</a><a href="#story">Story</a
        ><a href="#contact">Contact</a>
      </nav>
      <div class="actions">
        <button
          class="glass-btn"
          id="open-drawer"
          aria-label="Open studio controls"
        >
          <svg
            width="17"
            height="17"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.7"
            stroke-linecap="round"
          >
            <line x1="4" y1="21" x2="4" y2="14" />
            <line x1="4" y1="10" x2="4" y2="3" />
            <line x1="12" y1="21" x2="12" y2="12" />
            <line x1="12" y1="8" x2="12" y2="3" />
            <line x1="20" y1="21" x2="20" y2="16" />
            <line x1="20" y1="12" x2="20" y2="3" />
            <line x1="2" y1="14" x2="6" y2="14" />
            <line x1="10" y1="8" x2="14" y2="8" />
            <line x1="18" y1="16" x2="22" y2="16" />
          </svg>
        </button>
        <a class="contact-pill" href="#contact"
          ><span>Contact us</span
          ><span class="orb"
            ><svg
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14M12 5l7 7-7 7" /></svg></span
        ></a>
      </div>
    </header>
    <main>
      <section class="hero" id="home">
        <div class="hero-row interactive">
          <div class="hero-left">
            <div class="eyebrow">[ Digital studio ]</div>
            <h1>Less noise. More gravity.</h1>
          </div>
          <div class="hero-right">
            <p>
              We design digital experiences that remove distraction and amplify
              presence.
            </p>
            <div class="credit">© 2026 — Independent digital agency</div>
            <div class="scrollcue">
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.8"
              >
                <path d="M12 5v14m-7-7 7 7 7-7" /></svg
              >Scroll
            </div>
          </div>
        </div>
      </section>
      <section class="section-two" id="works">
        <div class="two-grid interactive">
          <div>
            <div class="mono-label reveal">[ 02 — Physics ]</div>
            <h2 class="section-heading reveal" style="transition-delay: 0.1s">
              When structure<br />lets go.
            </h2>
            <p class="body-copy reveal" style="transition-delay: 0.2s">
              Keep scrolling and the field surrenders to gravity. Every sphere
              obeys real simulated physics — mass, momentum, restitution —
              tumbling down and bouncing off the floor until the energy finally
              settles.
            </p>
          </div>
          <div class="stats reveal" style="transition-delay: 0.25s">
            <div class="stat-card">
              <div class="stat-inner">
                <div class="stat-meta">
                  <span class="index">01</span
                  ><span>Solver · Verlet · 4 sub-steps</span><i class="dot"></i>
                </div>
                <div class="stat-value">Stable stacking at 60fps</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-inner">
                <div class="stat-meta">
                  <span class="index">02</span><span>Restitution</span
                  ><i class="dot"></i>
                </div>
                <div class="stat-value">0.65 — bouncy</div>
                <div class="stat-desc">Energy lost on every contact</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-inner">
                <div class="stat-meta">
                  <span class="index">03</span><span>Bodies</span
                  ><i class="dot"></i>
                </div>
                <div class="stat-value">Real-time GPU</div>
                <div class="stat-desc">No pre-baked animation</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section-three" id="services">
        <div class="interactive">
          <div class="mono-label reveal">[ 03 — Form ]</div>
          <h2 class="section-heading reveal" style="transition-delay: 0.1s">
            Chaos, then form.
          </h2>
        </div>
        <div class="shape-bottom interactive">
          <p class="body-copy reveal" style="transition-delay: 0.15s">
            Out of free-fall, the field reassembles — every bubble finding its
            place in a single shape. Move your cursor through it and watch the
            order ripple, scatter, and recover.
          </p>
          <div class="hint-pill reveal" style="transition-delay: 0.28s">
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M12 2v6m0 0a3 3 0 1 0-3-3m3 3a3 3 0 1 1 3-3" /></svg
            ><span>Swipe through it</span>
          </div>
        </div>
      </section>
      <section class="section-four" id="team">
        <div class="release-inner interactive">
          <div class="mono-label reveal">[ 04 — Release ]</div>
          <h2 class="section-heading reveal" style="transition-delay: 0.12s">
            And then,<br />weightless.
          </h2>
          <p class="body-copy reveal" style="transition-delay: 0.24s">
            The whole field lifts off the screen and rushes past you — every
            sphere accelerating into the lens until nothing remains but light.
            Less noise.
          </p>
        </div>
      </section>
    </main>
    <footer id="contact">
      <div class="glow one"></div>
      <div class="glow two"></div>
      <div class="marquee">
        <div class="marquee-track">
          <div class="marquee-set">
            <span class="marquee-word">Less noise</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">More gravity</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">Design with weight</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">Let's build</span
            ><i class="marquee-dot"></i>
          </div>
          <div class="marquee-set" aria-hidden="true">
            <span class="marquee-word">Less noise</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">More gravity</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">Design with weight</span
            ><i class="marquee-dot"></i
            ><span class="marquee-word">Let's build</span
            ><i class="marquee-dot"></i>
          </div>
        </div>
      </div>
      <div class="footer-body">
        <div class="footer-grid">
          <div class="footer-cta reveal">
            <div class="footer-kicker">[ Let's collaborate ]</div>
            <h2>Have an idea<br />with real weight?</h2>
            <a class="email-pill" href="mailto:hello@gravity.studio"
              ><span>hello@gravity.studio</span
              ><span class="orb"
                ><svg
                  width="17"
                  height="17"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="white"
                  stroke-width="1.8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></span
            ></a>
          </div>
          <div class="link-columns">
            <div class="link-col reveal">
              <h3>Studio</h3>
              <a href="#works"
                >Works
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#services"
                >Services
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#services"
                >Process
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#contact"
                >Careers
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg
              ></a>
            </div>
            <div class="link-col reveal" style="transition-delay: 0.08s">
              <h3>Company</h3>
              <a href="#story"
                >Story
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#team"
                >Team
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#story"
                >Journal
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="#contact"
                >Contact
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg
              ></a>
            </div>
            <div class="link-col reveal" style="transition-delay: 0.16s">
              <h3>Social</h3>
              <a href="https://twitter.com/"
                >Twitter
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="https://instagram.com/"
                >Instagram
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="https://linkedin.com/"
                >LinkedIn
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg></a
              ><a href="https://dribbble.com/"
                >Dribbble
                <svg
                  width="12"
                  height="12"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                >
                  <path d="M7 17 17 7M7 7h10v10" /></svg
              ></a>
            </div>
          </div>
        </div>
        <div class="bottom-bar">
          <div class="bottom-brand">
            <strong>GRAVITY</strong><i class="blue-dot"></i
            ><small>© 2026 Digital Studio — All rights reserved.</small>
          </div>
          <div class="socials">
            <a href="https://twitter.com/" aria-label="Twitter"
              ><svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M18.9 2H22l-6.8 7.8L23.2 22h-6.3L12 14.6 5.6 22H2.4l7.3-8.4L1.8 2h6.5l4.5 6.8L18.9 2Zm-1.1 18h1.7L7.3 3.9H5.5L17.8 20Z"
                /></svg></a
            ><a href="https://instagram.com/" aria-label="Instagram"
              ><svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.7"
              >
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="18" cy="6" r="1" fill="currentColor" /></svg></a
            ><a href="https://linkedin.com/" aria-label="LinkedIn"
              ><svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path
                  d="M5.2 3a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4ZM3.3 9h3.8v12H3.3V9Zm6.2 0h3.6v1.6h.1c.5-.9 1.7-1.9 3.6-1.9 3.8 0 4.5 2.5 4.5 5.7V21h-3.8v-5.8c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1V21H9.5V9Z"
                /></svg
            ></a>
          </div>
        </div>
      </div>
    </footer>
    <div id="scrim"></div>
    <aside id="drawer" aria-hidden="true">
      <div class="drawer-head">
        <div class="drawer-title">
          <svg
            width="18"
            height="18"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.7"
            stroke-linecap="round"
          >
            <path
              d="M4 21v-7m0-4V3m8 18v-9m0-4V3m8 18v-5m0-4V3M2 14h4m4-6h4m4 8h4"
            /></svg
          >Studio Controls
        </div>
        <button class="close-btn" id="close-drawer" aria-label="Close controls">
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
          >
            <path d="m18 6-12 12M6 6l12 12" />
          </svg>
        </button>
      </div>
      <p class="drawer-note">
        Set the hero sphere palette. As you scroll, the scene morphs to
        volt-lime, then rose-pink as the heart assembles.
      </p>
      <div class="palette-heading">
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.6"
        >
          <path
            d="m12 3 1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2L12 3Z"
          /></svg
        >Hero Palette Shaders
      </div>
      <div class="palette-list" id="palette-list">
        <button class="palette-option selected" data-id="roseGold">
          <div class="palette-top">
            Royal Blue & Pearl
            <i class="swatch" style="background: #2f69ff"></i>
          </div>
          <p>
            Hyper-distinct cobalt spheres floating in soft white-slate
            gradients.
          </p>
        </button>
        <button class="palette-option" data-id="pinkBlush">
          <div class="palette-top">
            Rose Blush & Crème
            <i class="swatch" style="background: #ffa6b3"></i>
          </div>
          <p>
            Sweet candy pinks and juicy strawberry accents in a pearl studio.
          </p>
        </button>
        <button class="palette-option" data-id="voltLime">
          <div class="palette-top">
            Volt Lime & Slate
            <i class="swatch" style="background: #e1fc03"></i>
          </div>
          <p>Electric neon volt-lime against a clean white-slate horizon.</p>
        </button>
        <button class="palette-option" data-id="arcticBlue">
          <div class="palette-top">
            Arctic Sky & Crystal
            <i class="swatch" style="background: #96e5ff"></i>
          </div>
          <p>Cool arctic crystal blues with a translucent glass sheen.</p>
        </button>
      </div>
      <div class="drawer-bottom">
        <div class="engine-note">
          RENDER ENGINE / THREE.JS WEBGL<br />DYNAMICS SOLVER / 3D COLLISION
          VERLET
        </div>
        <button class="reset-btn" id="reset-theme">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.7"
          >
            <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
            <path d="M3 3v5h5" /></svg
          >Reset Defaults
        </button>
      </div>
    </aside>
    <script type="module" src="script.js"></script>
  </body>
</html>

CSS

:root {
        --blue: #0e2ac5;
        --display: "Raleway", sans-serif;
        --sans: "Inter", sans-serif;
        --mono: "JetBrains Mono", monospace;
        --space: "Space Grotesk", sans-serif;
        --ink: #1a1a1a;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        scroll-behavior: auto;
      }
      body {
        overflow-x: hidden;
        background: #f7fafc;
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
        font-family: var(--sans);
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font: inherit;
      }
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(14, 42, 197, 0.18);
        border-radius: 99px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(14, 42, 197, 0.32);
      }
      #gradient {
        position: fixed;
        inset: 0;
        z-index: -10;
        background: radial-gradient(
          circle at center,
          #fff 0%,
          #ecefff 35%,
          #c2d1ff 100%
        );
        transition: background 1.2s cubic-bezier(0.65, 0, 0.35, 1);
      }
      #webgl {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
      }
      #webgl canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
      header {
        height: 96px;
        padding: 0 48px;
        position: fixed;
        z-index: 30;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-16px);
        transition:
          opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }
      header.visible {
        opacity: 1;
        transform: translateY(0);
      }
      header > * {
        pointer-events: auto;
      }
      .wordmark {
        font: 900 22px var(--space);
        letter-spacing: 0.25em;
        color: #0a0a0a;
      }
      .nav {
        display: flex;
        gap: 48px;
        font: 500 14px var(--display);
      }
      .nav a {
        transition: opacity 0.2s;
      }
      .nav a:hover {
        opacity: 0.6;
      }
      .actions {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .glass-btn {
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(20px);
        box-shadow:
          inset 0 1.5px 2px rgba(255, 255, 255, 0.7),
          0 8px 30px rgba(0, 0, 0, 0.04);
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: background 0.2s;
      }
      .glass-btn:hover {
        background: rgba(255, 255, 255, 0.3);
      }
      .contact-pill,
      .email-pill {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        padding: 6px 6px 6px 24px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow:
          inset 0 1.5px 2px rgba(255, 255, 255, 0.7),
          0 8px 30px rgba(0, 0, 0, 0.035);
        font: 500 14px var(--display);
      }
      .orb {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: radial-gradient(
          circle at 50% 30%,
          #5175ff 0%,
          #0e2ac5 55%,
          #020b40 100%
        );
        transition: transform 0.25s;
      }
      .contact-pill:hover .orb {
        transform: scale(1.05);
      }
      section {
        position: relative;
        z-index: 10;
        min-height: 100svh;
        padding-left: 48px;
        padding-right: 48px;
        pointer-events: none;
      }
      section .interactive {
        pointer-events: auto;
      }
      .hero {
        display: flex;
        align-items: flex-end;
        padding-bottom: 56px;
        padding-top: 120px;
      }
      .hero-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 32px;
      }
      .hero-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
      }
      .eyebrow {
        font: 500 14px var(--display);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--blue);
        margin-bottom: 24px;
        opacity: 0;
        transform: translateY(14px);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
      }
      .hero h1 {
        font: 500 clamp(42px, 6.25vw, 90px)/0.98 var(--display);
        letter-spacing: -0.055em;
        color: #0a0a0a;
        margin: 0;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(22px);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
      }
      .hero-right {
        width: 260px;
        flex-shrink: 0;
        opacity: 0;
        transform: translateY(18px);
        transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
      }
      .hero-right p {
        font: 500 15px/1.35 var(--display);
        margin: 0;
      }
      .credit {
        font: 10px var(--mono);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #737987;
        margin-top: 20px;
      }
      .scrollcue {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-top: 18px;
        color: #737987;
        font: 10px var(--mono);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        50% {
          opacity: 0.4;
        }
      }
      .hero.revealed .eyebrow,
      .hero.revealed h1,
      .hero.revealed .hero-right {
        opacity: 1;
        transform: translateY(0);
      }
      .section-two {
        display: flex;
        align-items: center;
        padding-top: 160px;
        padding-bottom: 160px;
      }
      .two-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: 64px;
        align-items: start;
      }
      .mono-label {
        font: 11px var(--mono);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(14, 42, 197, 0.8);
      }
      .section-heading {
        font: 500 clamp(42px, 5.55vw, 80px)/0.94 var(--display);
        letter-spacing: -0.045em;
        color: #0a0a0a;
        margin: 24px 0 0;
      }
      .body-copy {
        font: 400 16px/1.55 var(--display);
        color: #454957;
      }
      .two-grid .body-copy {
        max-width: 570px;
        margin-top: 32px;
      }
      .stats {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-top: 12px;
      }
      .stat-card {
        padding: 1px;
        border-radius: 1.4rem;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0.3),
          rgba(255, 255, 255, 0.1)
        );
        box-shadow: 0 14px 40px -12px rgba(14, 42, 197, 0.18);
        transition: transform 0.25s;
      }
      .stat-card:hover {
        transform: translateY(-2px);
      }
      .stat-inner {
        position: relative;
        overflow: hidden;
        border-radius: 1.35rem;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(20px);
        padding: 20px 24px;
      }
      .stat-inner:before {
        content: "";
        position: absolute;
        top: 0;
        left: 8%;
        right: 8%;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.9),
          transparent
        );
      }
      .stat-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        font: 10px var(--mono);
        text-transform: uppercase;
        color: #9297a4;
      }
      .stat-meta .index {
        color: #1a1a1a;
      }
      .stat-meta .dot {
        margin-left: auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #5175ff, #0e2ac5);
        box-shadow: 0 0 8px rgba(47, 105, 255, 0.6);
      }
      .stat-value {
        font: 600 18px var(--display);
        margin-top: 16px;
        color: #171717;
      }
      .stat-desc {
        font: 13px var(--display);
        color: #7a7f8b;
        margin-top: 5px;
      }
      .section-three {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 176px;
        padding-bottom: 176px;
      }
      .section-three .section-heading {
        max-width: 680px;
      }
      .shape-bottom {
        align-self: flex-end;
        max-width: 390px;
        margin-top: 80px;
      }
      .shape-bottom .body-copy {
        margin: 0;
      }
      .hint-pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(12px);
        border-radius: 999px;
        color: #555b67;
        margin-top: 28px;
      }
      .hint-pill span {
        font: 10px var(--mono);
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      .section-four {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-top: 176px;
        padding-bottom: 176px;
      }
      .release-inner {
        max-width: 850px;
      }
      .section-four .section-heading {
        font-size: clamp(46px, 6.1vw, 88px);
        line-height: 0.94;
        margin-top: 28px;
      }
      .section-four .body-copy {
        max-width: 460px;
        margin: 32px auto 0;
      }
      .reveal {
        opacity: 0;
        transform: translateY(42px);
        filter: blur(8px);
        transition:
          opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
          transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
          filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .reveal.in {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
      footer {
        position: relative;
        z-index: 10;
        overflow: hidden;
        border-radius: 64px 64px 0 0;
        background: #0a0a0a;
        color: #fff;
      }
      .glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(48px);
        pointer-events: none;
      }
      .glow.one {
        width: 448px;
        height: 448px;
        right: -100px;
        top: -180px;
        background: radial-gradient(circle, #2f69ff66 0%, transparent 65%);
      }
      .glow.two {
        width: 512px;
        height: 512px;
        left: -180px;
        bottom: -260px;
        background: radial-gradient(circle, #5175ff44 0%, transparent 65%);
      }
      .marquee {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 0;
      }
      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee 26s linear infinite;
      }
      .marquee-set {
        display: flex;
        align-items: center;
        white-space: nowrap;
      }
      .marquee-word {
        font: 500 clamp(28px, 6vw, 64px) var(--display);
        color: rgba(255, 255, 255, 0.9);
        padding: 0 32px;
      }
      .marquee-dot {
        width: 10px;
        height: 10px;
        background: #2f69ff;
        border-radius: 50%;
        flex: none;
      }
      @keyframes marquee {
        to {
          transform: translateX(-50%);
        }
      }
      .footer-body {
        position: relative;
        padding: 88px 48px 40px;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 48px;
      }
      .footer-kicker {
        font: 11px var(--mono);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
      }
      .footer-cta h2 {
        font: 500 clamp(38px, 4.2vw, 60px)/0.95 var(--display);
        letter-spacing: -0.04em;
        margin: 28px 0 32px;
      }
      .email-pill {
        padding: 8px 8px 8px 28px;
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
        font-size: 16px;
      }
      .email-pill:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      .email-pill .orb {
        width: 40px;
        height: 40px;
      }
      .email-pill:hover .orb svg {
        transform: rotate(45deg);
      }
      .email-pill svg {
        transition: transform 0.25s;
      }
      .link-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
      }
      .link-col h3 {
        font: 10px var(--mono);
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin: 0 0 24px;
      }
      .link-col a {
        display: flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        max-width: 100%;
        font: 400 15px var(--display);
        color: rgba(255, 255, 255, 0.75);
        margin: 0 0 14px;
        transition: color 0.2s;
      }
      .link-col a:hover {
        color: #fff;
      }
      .link-col a svg {
        opacity: 0;
        transform: translateX(-5px);
        transition: all 0.2s;
      }
      .link-col a:hover svg {
        opacity: 1;
        transform: translateX(0);
      }
      .bottom-bar {
        margin-top: 112px;
        padding-top: 28px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }
      .bottom-brand {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .bottom-brand strong {
        font: 900 19px var(--space);
        letter-spacing: 0.22em;
      }
      .bottom-brand .blue-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #2f69ff;
      }
      .bottom-brand small {
        font: 11px var(--mono);
        color: rgba(255, 255, 255, 0.4);
      }
      .socials {
        display: flex;
        gap: 10px;
      }
      .socials a {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: rgba(255, 255, 255, 0.7);
        transition:
          color 0.2s,
          border 0.2s;
      }
      .socials a:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.5);
      }
      /* loader */
      #loader {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: radial-gradient(
          circle at 50% 42%,
          #fff 0%,
          #eef2ff 45%,
          #dbe4ff 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1);
        pointer-events: auto;
      }
      #loader.leaving {
        opacity: 0;
        pointer-events: none;
      }
      .loader-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
      }
      .loader-item {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
        animation: springIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .loader-item:nth-child(1) {
        animation-delay: 0.1s;
      }
      .loader-item:nth-child(2) {
        animation-delay: 0.26s;
      }
      .loader-item:nth-child(3) {
        animation-delay: 0.42s;
      }
      @keyframes springIn {
        to {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }
      .loader-status {
        font: 10px var(--mono);
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #6b7bb5;
      }
      .progress-track {
        width: clamp(180px, 32vw, 280px);
        height: 2px;
        border-radius: 99px;
        background: rgba(14, 42, 197, 0.14);
        overflow: hidden;
      }
      .progress-fill {
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, #5175ff 0%, #0e2ac5 100%);
        box-shadow: 0 0 14px rgba(47, 105, 255, 0.55);
        transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .loader-count {
        font: 700 11px var(--mono);
        letter-spacing: 0.1em;
        color: #0e2ac5;
        font-variant-numeric: tabular-nums;
      }
      /* drawer */
      #scrim {
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(10, 10, 10, 0.2);
        backdrop-filter: blur(4px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s;
      }
      #scrim.open {
        opacity: 1;
        pointer-events: auto;
      }
      #drawer {
        position: fixed;
        z-index: 50;
        right: 0;
        top: 0;
        height: 100%;
        width: min(420px, 100%);
        padding: 32px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(24px);
        border-left: 1px solid #eee;
        transform: translateX(102%);
        transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
      #drawer.open {
        transform: translateX(0);
      }
      .drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .drawer-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font: 900 14px var(--space);
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      .close-btn {
        width: 38px;
        height: 38px;
        border: 1px solid #e7e8ec;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.7);
        display: grid;
        place-items: center;
        cursor: pointer;
      }
      .drawer-note {
        font: italic 12px/1.6 var(--mono);
        color: #999eaa;
        margin: 28px 0 34px;
      }
      .palette-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        font: 700 10px var(--mono);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        margin-bottom: 16px;
      }
      .palette-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .palette-option {
        width: 100%;
        text-align: left;
        border: 1px solid #e6e7eb;
        border-radius: 12px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.55);
        cursor: pointer;
        transition:
          transform 0.2s,
          background 0.2s,
          color 0.2s,
          border 0.2s;
      }
      .palette-option.selected {
        background: #0a0a0a;
        color: #fff;
        border-color: #0a0a0a;
        transform: scale(1.02);
      }
      .palette-option:hover {
        transform: translateY(-1px);
      }
      .palette-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font: 700 12px var(--sans);
      }
      .swatch {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
      }
      .palette-option p {
        font: 10px/1.5 var(--mono);
        opacity: 0.65;
        margin: 8px 0 0;
      }
      .drawer-bottom {
        margin-top: auto;
        padding-top: 28px;
      }
      .engine-note {
        font: 9px/2 var(--mono);
        letter-spacing: 0.08em;
        color: #9da1aa;
      }
      .reset-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
        padding: 11px 14px;
        border: 1px solid #e5e6eb;
        border-radius: 999px;
        background: #fff;
        font: 500 11px var(--mono);
        cursor: pointer;
      }
      .reset-btn:hover {
        background: #f5f6f9;
      }
      svg {
        display: block;
      }
      @media (max-width: 900px) {
        header {
          padding: 0 24px;
        }
        .nav {
          gap: 22px;
        }
        .hero h1 {
          white-space: normal;
        }
        .two-grid {
          grid-template-columns: 1fr;
          gap: 42px;
        }
        .stats {
          max-width: 600px;
        }
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .footer-body {
          padding-left: 24px;
          padding-right: 24px;
        }
      }
      @media (max-width: 767px) {
        header {
          height: 80px;
          padding: 0 24px;
        }
        .wordmark {
          font-size: 18px;
        }
        .nav {
          display: none;
        }
        .glass-btn {
          width: 40px;
          height: 40px;
        }
        .contact-pill {
          padding-left: 16px;
          font-size: 13px;
          gap: 10px;
        }
        section {
          padding-left: 24px;
          padding-right: 24px;
        }
        .hero {
          padding-bottom: 48px;
          min-height: 100svh;
        }
        .hero-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 28px;
        }
        .hero-left {
          gap: 10px;
        }
        .eyebrow {
          font-size: 12px;
          margin-bottom: 12px;
        }
        .hero h1 {
          font-size: clamp(42px, 11vw, 62px);
          white-space: normal;
        }
        .hero-right {
          width: min(100%, 300px);
        }
        .scrollcue {
          display: none;
        }
        .section-two {
          padding-top: 130px;
          padding-bottom: 130px;
        }
        .section-heading {
          font-size: clamp(42px, 11vw, 60px);
        }
        .section-three {
          padding-top: 140px;
          padding-bottom: 140px;
        }
        .shape-bottom {
          margin-top: 100px;
        }
        .section-four {
          padding-top: 140px;
          padding-bottom: 140px;
        }
        .section-four .section-heading {
          font-size: clamp(48px, 12vw, 68px);
        }
        footer {
          border-radius: 40px 40px 0 0;
        }
        .footer-body {
          padding: 64px 24px 32px;
        }
        .footer-grid {
          gap: 58px;
        }
        .link-columns {
          grid-template-columns: repeat(2, 1fr);
          row-gap: 36px;
        }
        .bottom-bar {
          margin-top: 76px;
          align-items: flex-start;
          flex-direction: column;
        }
        .bottom-brand {
          gap: 10px;
        }
        .footer-cta h2 {
          font-size: 44px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *:before,
        *:after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

import * as THREE from "three";
      const canvas = document.querySelector("#scene"),
        container = document.querySelector("#webgl");
      const gradient = document.querySelector("#gradient"),
        loader = document.querySelector("#loader"),
        fill = document.querySelector("#progress-fill"),
        count = document.querySelector("#loader-count"),
        status = document.querySelector("#loader-status"),
        header = document.querySelector("#header");
      const control = { progress: 0, started: false };
      let ready = false,
        done = false,
        loaderValue = 0,
        loaderLast = performance.now(),
        doneTimer = null;
      let mousePos = { x: 99, y: 99, isDown: false },
        prevMouse = { x: 99, y: 99 },
        mouseWorldSpeed = 0;
      const palettes = {
        roseGold: {
          color: "#2F69FF",
          bg: "radial-gradient(circle at center,#ffffff 0%,#ecefff 35%,#c2d1ff 100%)",
        },
        pinkBlush: {
          color: "#FFC5C2",
          bg: "radial-gradient(circle at center,#ffffff 0%,#fff0f1 38%,#ffd1d5 100%)",
        },
        voltLime: {
          color: "#E1FC03",
          bg: "radial-gradient(circle at center,#ffffff 0%,#fbffe5 38%,#e8ff9c 100%)",
        },
        arcticBlue: {
          color: "#96E5FF",
          bg: "radial-gradient(circle at center,#ffffff 0%,#effaff 38%,#c9f1ff 100%)",
        },
      };
      let selected = "roseGold",
        scene,
        camera,
        renderer,
        balls = [],
        hemiLight,
        raf = 0,
        clock,
        localStarted = false,
        entranceStart = 0,
        reportedReady = false,
        viewportWidth = 10,
        viewportHeight = 6,
        shapeScale = 1,
        meanRadius = 0;
      const clamp01 = (v) => (v < 0 ? 0 : v > 1 ? 1 : v),
        smoothstep = (a, b, x) => {
          const t = clamp01((x - a) / (b - a));
          return t * t * (3 - 2 * t);
        },
        lerp = (a, b, t) => a + (b - a) * t,
        easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
      const getDynamicColors = (baseColor) => {
        const hex = baseColor.toLowerCase();
        if (hex === "#e1fc03")
          return {
            pastel: new THREE.Color("#FBFFE2"),
            light: new THREE.Color("#EFFE69"),
            medium: new THREE.Color("#E1FC03"),
            deep: new THREE.Color("#B1E200"),
            glass: new THREE.Color("#DCFF32"),
          };
        if (hex === "#ffc5c2" || hex === "#ffa19e")
          return {
            pastel: new THREE.Color("#FFF5F4"),
            light: new THREE.Color("#FFECEB"),
            medium: new THREE.Color("#FFA6B3"),
            deep: new THREE.Color("#FF4D6D"),
            glass: new THREE.Color("#FFA6B3"),
          };
        if (hex === "#96e5ff")
          return {
            pastel: new THREE.Color("#F0F9FF"),
            light: new THREE.Color("#C9F1FF"),
            medium: new THREE.Color("#96E5FF"),
            deep: new THREE.Color("#2BA5FF"),
            glass: new THREE.Color("#98E4FF"),
          };
        if (hex === "#2f69ff")
          return {
            pastel: new THREE.Color("#ECEFFF"),
            light: new THREE.Color("#A8C1FF"),
            medium: new THREE.Color("#2F69FF"),
            deep: new THREE.Color("#0A33BF"),
            glass: new THREE.Color("#4D80FF"),
          };
        const c = new THREE.Color(baseColor);
        return {
          pastel: c.clone().offsetHSL(0, -0.15, 0.25),
          light: c.clone().offsetHSL(0, -0.05, 0.12),
          medium: c.clone(),
          deep: c.clone().offsetHSL(0.01, 0.1, -0.12),
          glass: c.clone(),
        };
      };
      const ROLES = ["pastel", "light", "medium", "deep", "glass"];
      let palette,
        palHero,
        palLime = getDynamicColors("#E1FC03"),
        palPink = getDynamicColors("#FFC5C2"),
        curPal = {};
      function initScene() {
        if (raf) cancelAnimationFrame(raf);
        if (renderer) {
          renderer.dispose();
          balls.forEach((b) => b.material.dispose());
        }
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(
          38,
          container.clientWidth / container.clientHeight,
          0.1,
          100,
        );
        camera.position.set(0, 0, 11);
        renderer = new THREE.WebGLRenderer({
          canvas,
          antialias: true,
          alpha: true,
          powerPreference: "high-performance",
        });
        renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
        renderer.setSize(container.clientWidth, container.clientHeight);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1.15;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        palette = getDynamicColors(palettes[selected].color);
        palHero = palette;
        ROLES.forEach((r) => (curPal[r] = new THREE.Color()));
        hemiLight = new THREE.HemisphereLight(
          0xffffff,
          new THREE.Color(palettes[selected].color),
          1.6,
        );
        scene.add(hemiLight);
        const key = new THREE.DirectionalLight(0xffffff, 1.4);
        key.position.set(-6, 10, 8);
        key.castShadow = true;
        key.shadow.mapSize.set(2048, 2048);
        Object.assign(key.shadow.camera, {
          near: 0.5,
          far: 30,
          left: -8,
          right: 8,
          top: 8,
          bottom: -8,
        });
        key.shadow.bias = -0.0003;
        key.shadow.radius = 12;
        scene.add(key);
        const rim = new THREE.DirectionalLight(0xffffff, 1.25);
        rim.position.set(8, 7, -8);
        scene.add(rim);
        const front = new THREE.DirectionalLight(0xffffff, 0.4);
        front.position.set(0, 0, 11);
        scene.add(front);
        const side = new THREE.DirectionalLight(0xffffff, 0.3);
        side.position.set(-9, -2, 4);
        scene.add(side);
        updateFrustumBounds();
        const mobile = innerWidth < 768,
          n = mobile ? 54 : 96,
          geometry = new THREE.SphereGeometry(1, 48, 48),
          isBlack = false;
        balls = [];
        for (let i = 0; i < n; i++) {
          let radius = 0.33,
            r = Math.random();
          if (r < 0.3) radius = 0.27 + Math.random() * 0.12;
          else if (r < 0.8) radius = 0.42 + Math.random() * 0.18;
          else radius = 0.66 + Math.random() * 0.21;
          const mass = Math.pow(radius, 3),
            isGlass = Math.random() < 0.22 && !isBlack;
          let role = "medium",
            chosen = palette.medium,
            mat,
            color;
          if (isGlass) {
            mat = new THREE.MeshPhysicalMaterial({
              color: palette.glass,
              roughness: 0.08,
              metalness: 0,
              clearcoat: 1,
              clearcoatRoughness: 0.03,
              transmission: 0.95,
              ior: 1.485,
              thickness: 2.2,
              specularColor: new THREE.Color("#fff"),
              specularIntensity: 1,
              attenuationColor: palette.pastel,
              attenuationDistance: 1,
              emissive: palette.glass,
              emissiveIntensity: 0.12,
              transparent: true,
            });
            color = palette.glass;
            role = "glass";
          } else {
            const cr = Math.random();
            if (cr < 0.25) {
              chosen = palette.pastel;
              role = "pastel";
            } else if (cr < 0.55) {
              chosen = palette.light;
              role = "light";
            } else if (cr < 0.85) {
              chosen = palette.medium;
              role = "medium";
            } else {
              chosen = palette.deep;
              role = "deep";
            }
            mat = new THREE.MeshPhysicalMaterial({
              color: chosen,
              roughness: 0.44,
              metalness: 0,
              clearcoat: 0.24,
              clearcoatRoughness: 0.35,
              emissive: chosen,
              emissiveIntensity: 0.08,
              transparent: true,
            });
            color = chosen;
          }
          const group = new THREE.Group(),
            mesh = new THREE.Mesh(geometry, mat);
          mesh.scale.setScalar(radius);
          mesh.castShadow = true;
          mesh.receiveShadow = true;
          group.add(mesh);
          scene.add(group);
          balls.push({
            id: i,
            radius,
            mass,
            position: new THREE.Vector3(),
            velocity: new THREE.Vector3(),
            meshGroup: group,
            sphere: mesh,
            material: mat,
            role,
            isGlass,
            visualScale: radius,
            color,
            restPosition: new THREE.Vector3(),
            shapeTarget: new THREE.Vector3(),
            angleY: Math.random() * Math.PI * 2,
            angleZ: 0.1 + Math.random() * 0.45,
          });
        }
        meanRadius = balls.reduce((s, b) => s + b.radius, 0) / balls.length;
        assignHeartTargets();
        scatterFar(false);
        clock = new THREE.Clock();
        localStarted = false;
        entranceStart = 0;
        reportedReady = false;
        simulateAndRender();
      }
      function updateFrustumBounds() {
        const fov = THREE.MathUtils.degToRad(camera.fov);
        viewportHeight = 2 * Math.tan(fov / 2) * camera.position.z;
        viewportWidth =
          viewportHeight * (container.clientWidth / container.clientHeight);
      }
      const inHeart = (x, y) => {
        const a = x * x + y * y - 1;
        return a * a * a - x * x * y * y * y <= 0;
      };
      function assignHeartTargets() {
        if (!balls.length) return;
        const S = Math.min(viewportWidth * 0.3, viewportHeight * 0.27),
          baseCY = -viewportHeight * 0.03;
        shapeScale = Math.max(0.3, Math.min(1, (S * 0.45) / 2.3 / meanRadius));
        for (let i = 0; i < balls.length; i++) {
          let x = 0,
            y = 0,
            tries = 0;
          do {
            x = (Math.random() * 2 - 1) * 1.25;
            y = Math.random() * 2.55 - 1.4;
            tries++;
          } while (!inHeart(x, y) && tries < 60);
          balls[i].shapeTarget.set(
            x * S,
            (y + 0.12) * S + baseCY,
            (Math.random() - 0.5) * 0.35,
          );
        }
      }
      function scatterFar(inward) {
        const R = Math.max(viewportWidth, viewportHeight) * 1.5;
        for (const b of balls) {
          const a = Math.random() * Math.PI * 2,
            px = Math.cos(a) * R * 1.25,
            py = Math.sin(a) * R * 0.85,
            pz = (Math.random() - 0.5) * 4;
          b.position.set(px, py, pz);
          b.meshGroup.position.copy(b.position);
          if (inward)
            b.velocity
              .set(-px, -py, -pz)
              .normalize()
              .multiplyScalar(0.08 + Math.random() * 0.05);
          else b.velocity.set(0, 0, 0);
        }
      }
      const params = {
        gravity: 0,
        rebound: -0.3,
        mouseRepelForce: 0.05,
        mouseRepelRadius: 4.4,
        damping: 0.91,
        centerAttractForce: 0.0035,
        bounciness: 0.02,
      };
      const mouseProjVec = new THREE.Vector3(),
        mouseWorld3D = new THREE.Vector3(),
        prevMouseWorld = new THREE.Vector3(),
        diffVec = new THREE.Vector3(),
        collideDiff = new THREE.Vector3(),
        relVel = new THREE.Vector3(),
        deltaPos = new THREE.Vector3(),
        rotAxis = new THREE.Vector3();
      function updateMouse3D() {
        mouseProjVec.set(mousePos.x, mousePos.y, 0.5);
        mouseProjVec.unproject(camera);
        const dir = mouseProjVec.sub(camera.position).normalize(),
          distance = -camera.position.z / dir.z;
        mouseWorld3D.copy(camera.position).add(dir.multiplyScalar(distance));
      }
      function simulateAndRender() {
        raf = requestAnimationFrame(simulateAndRender);
        const time = clock.getElapsedTime();
        clock.getDelta();
        updateMouse3D();
        if (control.started && !localStarted) {
          localStarted = true;
          entranceStart = time;
          scatterFar(true);
        }
        if (!localStarted) {
          renderer.render(scene, camera);
          if (!reportedReady) {
            reportedReady = true;
            ready = true;
          }
          return;
        }
        const progress = control.progress,
          heroF = 1 - smoothstep(0.3, 0.8, progress),
          dropRaw = smoothstep(0.4, 0.95, progress),
          flyF = smoothstep(2.7, 3.45, progress),
          shapeF =
            smoothstep(1.4, 2.05, progress) *
            (1 - smoothstep(2.55, 3, progress)),
          dropF = dropRaw * (1 - smoothstep(1.25, 1.75, progress));
        const bLime = smoothstep(0.55, 1.05, progress),
          bPink = smoothstep(1.4, 1.95, progress);
        for (const role of ROLES)
          curPal[role]
            .copy(palHero[role])
            .lerp(palLime[role], bLime)
            .lerp(palPink[role], bPink);
        hemiLight.groundColor.copy(curPal.medium);
        const entranceT = easeOutCubic(clamp01((time - entranceStart) / 2.2)),
          attractionBoost = lerp(7.5, 1, entranceT),
          interacting =
            Math.abs(mousePos.x) < 0.99 || Math.abs(mousePos.y) < 0.99;
        let mouseSpeed = interacting
          ? mouseWorld3D.distanceTo(prevMouseWorld)
          : 0;
        if (mouseSpeed > 3) mouseSpeed = 3;
        prevMouseWorld.copy(mouseWorld3D);
        let damping = 0.91;
        damping = lerp(damping, 0.992, dropF);
        damping = lerp(damping, 0.9, shapeF);
        damping = lerp(damping, 0.985, flyF);
        const clusterActive = Math.max(heroF, entranceT < 1 ? 1 : 0);
        for (const b of balls) {
          if (heroF > 0.01) {
            b.velocity.x +=
              Math.sin(time * 0.4 + b.id * 1.5) * 0.0004 * b.radius * heroF;
            b.velocity.y +=
              Math.cos(time * 0.5 + b.id * 1.2) * 0.0004 * b.radius * heroF;
            b.velocity.z += Math.sin(time * 0.35 + b.id) * 0.0001 * heroF;
          }
          const cluster =
            params.centerAttractForce * attractionBoost * clusterActive;
          if (cluster > 0.00001) {
            b.velocity.x += (0 - b.position.x) * cluster * 0.38;
            b.velocity.y += (0 - b.position.y) * cluster * 1.85;
            b.velocity.z += (0 - b.position.z) * cluster * 1.8;
          }
          if (dropF > 0.001) b.velocity.y -= 0.011 * dropF;
          if (shapeF > 0.001) {
            const k = 0.06 * shapeF;
            b.velocity.x += (b.shapeTarget.x - b.position.x) * k;
            b.velocity.y += (b.shapeTarget.y - b.position.y) * k;
            b.velocity.z += (b.shapeTarget.z - b.position.z) * k;
          }
          if (flyF > 0.001) {
            const stagger = (b.id * 0.6180339887) % 1,
              local = smoothstep(stagger * 0.55, stagger * 0.55 + 0.45, flyF);
            b.velocity.z += 0.05 * local;
            b.velocity.x += b.position.x * 0.006 * local;
            b.velocity.y += b.position.y * 0.006 * local;
          }
          if (interacting) {
            diffVec.subVectors(b.position, mouseWorld3D);
            const dist = diffVec.length(),
              down = mousePos.isDown,
              rad = down
                ? params.mouseRepelRadius * 1.4
                : params.mouseRepelRadius,
              force = down
                ? params.mouseRepelForce * 1.7
                : params.mouseRepelForce;
            if (dist < rad && dist > 0.0001) {
              const ratio = dist / rad,
                sf = 1 - ratio * ratio * (3 - 2 * ratio),
                push = sf * force * (1 + mouseSpeed * 3.2);
              diffVec.normalize();
              diffVec.z *= 0.12;
              diffVec.normalize();
              b.velocity.addScaledVector(diffVec, push);
            }
          }
          b.velocity.multiplyScalar(damping);
          b.position.addScaledVector(b.velocity, 1);
          const c = b.isGlass ? curPal.glass : curPal[b.role];
          b.material.color.copy(c);
          b.material.emissive.copy(c);
          b.material.opacity =
            flyF > 0.001
              ? 1 -
                smoothstep(
                  camera.position.z - 2.6,
                  camera.position.z - 0.3,
                  b.position.z,
                )
              : 1;
          const target = b.radius * (1 - (1 - shapeScale) * shapeF);
          b.visualScale += (target - b.visualScale) * 0.12;
          b.sphere.scale.setScalar(b.visualScale);
        }
        const collideScale = 0.28 * (1 - 0.93 * shapeF) * (1 - flyF);
        for (let step = 0; step < 4; step++)
          for (let i = 0; i < balls.length; i++)
            for (let j = i + 1; j < balls.length; j++) {
              const a = balls[i],
                b = balls[j];
              collideDiff.subVectors(b.position, a.position);
              const dist = collideDiff.length(),
                min = a.visualScale + b.visualScale;
              if (dist < min && dist > 0.001) {
                const overlap = min - dist;
                collideDiff.multiplyScalar(1 / dist);
                const total = a.mass + b.mass,
                  r1 = b.mass / total,
                  r2 = a.mass / total;
                a.position.addScaledVector(
                  collideDiff,
                  -overlap * r1 * collideScale,
                );
                b.position.addScaledVector(
                  collideDiff,
                  overlap * r2 * collideScale,
                );
                relVel.subVectors(b.velocity, a.velocity);
                const along = relVel.dot(collideDiff);
                if (along < -0.0001) {
                  const impulse =
                    (-(1 + params.bounciness) * along) /
                    (1 / a.mass + 1 / b.mass);
                  a.velocity.addScaledVector(collideDiff, -impulse / a.mass);
                  b.velocity.addScaledVector(collideDiff, impulse / b.mass);
                }
              }
            }
        const xBound = viewportWidth / 2 - 0.2,
          topY = viewportHeight / 2 - 0.05,
          floorY = -viewportHeight / 2 + 0.05,
          zBound = 2,
          restitution = 0.3 + 0.35 * dropF,
          contain = flyF < 0.5,
          zContain = flyF < 0.02;
        for (const b of balls) {
          const r = b.visualScale;
          if (contain) {
            if (b.position.x < -xBound - r) {
              b.position.x = -xBound - r;
              b.velocity.x *= params.rebound;
            } else if (b.position.x > xBound + r) {
              b.position.x = xBound + r;
              b.velocity.x *= params.rebound;
            }
            if (b.position.y - r < floorY) {
              b.position.y = floorY + r;
              if (b.velocity.y < 0) b.velocity.y = -b.velocity.y * restitution;
              if (dropF > 0.3) {
                b.velocity.x *= 0.86;
                b.velocity.z *= 0.86;
              }
            }
            if (b.position.y + r > topY) {
              b.position.y = topY - r;
              if (b.velocity.y > 0) b.velocity.y *= params.rebound;
            }
          }
          if (zContain) {
            if (b.position.z < -zBound) {
              b.position.z = -zBound;
              b.velocity.z *= params.rebound;
            } else if (b.position.z > zBound) {
              b.position.z = zBound;
              b.velocity.z *= params.rebound;
            }
          }
          deltaPos.copy(b.position).sub(b.meshGroup.position);
          if (deltaPos.lengthSq() > 0.000001) {
            rotAxis.set(deltaPos.y, -deltaPos.x, 0).normalize();
            b.meshGroup.rotateOnWorldAxis(
              rotAxis,
              (deltaPos.length() / b.radius) * 0.95,
            );
          }
          b.meshGroup.position.copy(b.position);
        }
        renderer.render(scene, camera);
        if (!reportedReady) {
          reportedReady = true;
          ready = true;
        }
      }
      new ResizeObserver(() => {
        if (!camera || !renderer) return;
        const w = container.clientWidth,
          h = container.clientHeight;
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        renderer.setSize(w, h);
        updateFrustumBounds();
        assignHeartTargets();
      }).observe(container);
      window.addEventListener("pointermove", (e) => {
        mousePos.x = (e.clientX / innerWidth) * 2 - 1;
        mousePos.y = -(e.clientY / innerHeight) * 2 + 1;
      });
      window.addEventListener("mousedown", () => (mousePos.isDown = true));
      window.addEventListener("mouseup", () => (mousePos.isDown = false));
      window.addEventListener("blur", () => (mousePos.isDown = false));
      function selectPalette(id) {
        selected = id;
        document
          .querySelectorAll(".palette-option")
          .forEach((el) =>
            el.classList.toggle("selected", el.dataset.id === id),
          );
        gradient.style.background = palettes[id].bg;
        initScene();
      }
      document
        .querySelectorAll(".palette-option")
        .forEach((el) =>
          el.addEventListener("click", () => selectPalette(el.dataset.id)),
        );
      document
        .querySelector("#reset-theme")
        .addEventListener("click", () => selectPalette("roseGold"));
      const drawer = document.querySelector("#drawer"),
        scrim = document.querySelector("#scrim");
      function openDrawer() {
        drawer.classList.add("open");
        scrim.classList.add("open");
        drawer.setAttribute("aria-hidden", "false");
      }
      function closeDrawer() {
        drawer.classList.remove("open");
        scrim.classList.remove("open");
        drawer.setAttribute("aria-hidden", "true");
      }
      document
        .querySelector("#open-drawer")
        .addEventListener("click", openDrawer);
      document
        .querySelector("#close-drawer")
        .addEventListener("click", closeDrawer);
      scrim.addEventListener("click", closeDrawer);
      window.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closeDrawer();
      });
      const observer = new IntersectionObserver(
        (entries) =>
          entries.forEach((e) => {
            if (e.isIntersecting) {
              e.target.classList.add("in");
              observer.unobserve(e.target);
            }
          }),
        { threshold: 0.45 },
      );
      document
        .querySelectorAll(".reveal")
        .forEach((el) => observer.observe(el));
      let scrollTarget = scrollY,
        scrollActual = scrollY,
        scrolling = false;
      window.addEventListener(
        "wheel",
        (e) => {
          if (Math.abs(e.deltaY) < 1) return;
          e.preventDefault();
          scrollTarget = Math.max(
            0,
            Math.min(
              document.documentElement.scrollHeight - innerHeight,
              scrollTarget + e.deltaY,
            ),
          );
          if (!scrolling) {
            scrolling = true;
            smoothScroll();
          }
        },
        { passive: false },
      );
      function smoothScroll() {
        scrollActual += (scrollTarget - scrollActual) * 0.09;
        if (Math.abs(scrollTarget - scrollActual) < 0.5) {
          scrollActual = scrollTarget;
          scrolling = false;
        }
        window.scrollTo(0, scrollActual);
        if (scrolling) requestAnimationFrame(smoothScroll);
      }
      window.addEventListener(
        "scroll",
        () => {
          if (!scrolling) scrollTarget = scrollY;
          const vh = innerHeight || 1;
          control.progress = scrollY / vh;
          const stage =
            control.progress > 1.55 ? 2 : control.progress > 0.7 ? 1 : 0;
          const bg =
            stage === 0
              ? palettes[selected].bg
              : stage === 1
                ? "radial-gradient(circle at center,#ffffff 0%,#fbffe5 38%,#e8ff9c 100%)"
                : "radial-gradient(circle at center,#ffffff 0%,#fff0f1 38%,#ffd1d5 100%)";
          gradient.style.background = bg;
        },
        { passive: true },
      );
      function loaderLoop(now) {
        const dt = Math.min(0.05, (now - loaderLast) / 1000);
        loaderLast = now;
        if (!done) {
          const ceiling = ready ? 100 : 92;
          loaderValue += (ceiling - loaderValue) * (ready ? 6 : 1.7) * dt;
          if (ready && loaderValue >= 99.4) loaderValue = 100;
          fill.style.width = loaderValue + "%";
          count.textContent =
            String(Math.floor(loaderValue)).padStart(3, "0") + "%";
          status.textContent =
            loaderValue >= 100 ? "Entering orbit" : "Calibrating gravity field";
          if (loaderValue >= 99.9 && ready && !done) {
            done = true;
            setTimeout(() => {
              loader.classList.add("leaving");
              setTimeout(() => {
                control.started = true;
                header.classList.add("visible");
                document.querySelector(".hero").classList.add("revealed");
              }, 520);
            }, 140);
          }
        }
        requestAnimationFrame(loaderLoop);
      }
      initScene();
      requestAnimationFrame(loaderLoop);

Commentaires 0

…