Página de inicio 3D

19 0 Sitios web alejandrokundrah Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

8 May 2026

GN-Math: Juegos desbloqueados, búsqueda, clasificación y juego en línea.

10 September 2024

tarjeta de identidad en angola

1 August 2025

Arte CSS de Office

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);

Comentarios 0

…