Prompt Library

页面与区块 · 综合行业与应用页面 · 公开

futuristic eyewear

“futuristic eyewear”|来源 MotionSites|原分类 网站

#网站#MotionSites
查看来源 ↗
Prompt 原文24,288 字符
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Orven</title>
  <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=Inter+Tight:wght@500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
  <style>
    :root {
      --accent: #E6074E;
      --gap: 12px;
      --margin: 16px;
      --header-h: 56px;
    }
    * { margin: 0; box-sizing: border-box; }
    html, body {
      background: #000;
      overscroll-behavior: none;
    }
    body {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      color: var(--accent);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* ——— Video ——— */
    .bg-video {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.12);
      transform-origin: center center;
    }
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    .object-cover { object-fit: cover; }
    .scale-\[1\.35\] { transform: scale(1.12); }

    /* ——— Header (mobile: logo + cart) ——— */
    .header {
      position: fixed;
      inset: 16px 0 auto;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--margin);
      min-height: 40px;
      pointer-events: none;
    }
    .header > * { pointer-events: auto; }
    .header__logo-col {
      display: flex;
      align-items: center;
    }
    .header__logo {
      font-size: 18px;
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .header__col {
      display: none;
    }
    .header__col--end {
      display: flex;
      align-items: center;
      border: none;
      padding: 0;
      height: auto;
    }
    .header__line {
      font-size: 13px;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .header__col--end .header__line { text-align: right; }

    /* ——— Hero (mobile: stacked bottom sheet) ——— */
    .scroll-track {
      position: relative;
      z-index: 1;
      height: 420vh;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding-inline: var(--margin);
    }
    .hero {
      position: sticky;
      top: 0;
      height: 100svh;
      height: 100dvh;
      align-content: end;
      padding-top: calc(var(--header-h) + 8px);
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .title-caption {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 100%;
    }
    .title {
      font-weight: 500;
      font-size: clamp(52px, 17vw, 72px);
      line-height: 0.92;
      letter-spacing: -0.05em;
    }
    .title-caption__text {
      font-size: 14px;
      line-height: 1.35;
      letter-spacing: -0.03em;
      text-indent: 0;
      max-width: 28em;
      opacity: 0.95;
    }

    .product-card {
      display: flex;
      width: 100%;
      height: auto;
      padding: 12px;
      background: rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .product-card__row {
      display: flex;
      gap: 12px;
      width: 100%;
      align-items: stretch;
    }
    .product-card__img {
      width: 84px;
      height: 84px;
      border-radius: 14px;
      object-fit: cover;
      flex: none;
    }
    .product-card__body {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: stretch;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    .product-card__text {
      font-size: 13px;
      line-height: 1.3;
      letter-spacing: -0.03em;
      text-indent: 0;
      color: var(--accent);
    }
    .product-card__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      align-self: flex-end;
      min-height: 40px;
      padding: 8px 18px;
      background: var(--accent);
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 500;
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: -0.03em;
      color: #fff;
      -webkit-tap-highlight-color: transparent;
    }

    /* ——— Products (mobile) ——— */
    .products {
      position: relative;
      z-index: 2;
      background: #fff;
      padding: 36px 0 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .products__header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 18px;
      padding-inline: var(--margin);
    }
    .products__title {
      font-size: 17px;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: #000;
    }
    .products__link {
      font-size: 13px;
      font-weight: 500;
      color: #000;
      text-decoration: underline;
      text-underline-offset: 3px;
      white-space: nowrap;
    }
    .products__slider {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-left: var(--margin);
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .products__slider::-webkit-scrollbar { display: none; }
    .products__slider::after { content: ''; flex: 0 0 var(--margin); }
    .card {
      flex: 0 0 min(78vw, 280px);
      scroll-snap-align: start;
      --py: 0px;
    }
    .card__img,
    .card__info {
      transform: translateY(var(--py));
      will-change: transform;
    }
    .card__img {
      aspect-ratio: 1 / 1;
      background: #F7F5F5;
      border-radius: 18px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card__badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: #000;
      color: #fff;
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 2px;
    }
    .card__img img {
      width: 58%;
      object-fit: contain;
      border-radius: 16px;
    }
    .card__info {
      padding: 12px 4px 4px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .card__copy {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .card__name {
      font-size: 14px;
      font-weight: 500;
      color: #000;
      letter-spacing: -0.01em;
    }
    .card__desc {
      font-size: 13px;
      font-weight: 400;
      color: #888;
      line-height: 1.4;
      letter-spacing: -0.01em;
    }
    .card__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card__price {
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
    .card__cart {
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin: -10px -8px -10px 0;
      font-size: 22px;
      color: var(--accent);
      -webkit-tap-highlight-color: transparent;
    }

    /* ——— Tablet+ ——— */
    @media (min-width: 640px) {
      :root { --margin: 24px; --gap: 16px; }
      .title { font-size: clamp(72px, 12vw, 96px); }
      .title-caption__text { font-size: 15px; max-width: 34em; }
      .product-card { padding: 14px; border-radius: 20px; }
      .product-card__img { width: 100px; height: 100px; border-radius: 16px; }
      .product-card__text { font-size: 15px; }
      .product-card__btn { font-size: 15px; min-height: 42px; padding: 8px 24px; }
      .card { flex: 0 0 min(46vw, 320px); }
      .header__logo { font-size: 20px; }
      .scroll-track { height: 460vh; }
    }

    /* ——— Desktop ——— */
    @media (min-width: 960px) {
      :root { --gap: 24px; --margin: 32px; }

      .bg-video,
      .scale-\[1\.35\] { transform: scale(1.35); }

      .header {
        top: 24px;
        inset: 24px 0 auto;
        align-items: flex-start;
        padding-inline: 32px;
        min-height: 58px;
      }
      .header__logo-col {
        flex: 1 1 0;
        height: 58px;
      }
      .header__logo { font-size: 24px; }
      .header__col {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: 58px;
        padding: 0 24px;
        
      }
      .header__col--end {
        align-items: flex-end;
        padding: 0 0 0 24px;
      }
      .header__line { font-size: 14px; }

      .scroll-track { height: 500vh; }

      .grid {
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--gap);
        row-gap: 0;
        padding-inline: var(--margin);
      }
      .hero {
        height: 100vh;
        align-content: end;
        padding-top: 0;
        padding-bottom: 60px;
      }
      .title-caption {
        grid-column: 1 / 7;
        align-self: end;
        gap: 0;
      }
      .title {
        font-size: clamp(96px, 11vw, 160px);
        line-height: 100%;
        letter-spacing: -0.04em;
      }
      .title-caption__text {
        font-size: 18px;
        line-height: 120%;
        letter-spacing: -0.04em;
        text-indent: 120px;
        max-width: none;
      }

      .product-card {
        grid-column: 9 / 13;
        align-self: end;
        width: 100%;
        max-width: 453px;
        height: 150px;
        padding: 16px;
        border-radius: 24px;
        border: none;
        justify-self: end;
      }
      .product-card__row { gap: 24px; }
      .product-card__img {
        width: 118px;
        height: 118px;
        border-radius: 24px;
      }
      .product-card__body {
        align-items: flex-end;
        gap: 8px;
      }
      .product-card__text {
        font-size: 18px;
        line-height: 120%;
        letter-spacing: -0.04em;
        text-indent: 120px;
      }
      .product-card__btn {
        font-size: 18px;
        padding: 8px 32px;
        min-height: 0;
      }

      .products {
        padding: 60px 0 60px 32px;
        min-height: 100vh;
      }
      .products__header {
        margin-bottom: 30px;
        padding-inline: 0 32px;
      }
      .products__title { font-size: 21px; }
      .products__link { font-size: 14px; }
      .products__slider { padding-left: 0; gap: 10px; }
      .products__slider::after { flex-basis: 22px; }
      .card {
        flex: 0 0 calc((100vw - 102px) / 3);
      }
      .card__img {
        aspect-ratio: 13 / 12;
        border-radius: 24px;
      }
      .card__info {
        padding: 15px 10px 10px;
        gap: 20px;
      }
      .card__desc { font-size: 14px; }
      .card__cart {
        width: auto;
        height: auto;
        margin: 0;
        font-size: 24px;
      }
    }

    @media (min-width: 1280px) {
      .title { font-size: 160px; }
    }

    /* Short phones: keep hero content fully visible */
    @media (max-width: 959px) and (max-height: 700px) {
      .hero { gap: 12px; padding-bottom: 16px; }
      .title { font-size: clamp(44px, 14vw, 60px); }
      .title-caption__text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .product-card__text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .product-card__img { width: 72px; height: 72px; }
    }
  </style>
</head>
<body>
  <video
    class="bg-video w-full h-full object-cover scale-[1.35]"
    muted
    playsinline
    crossorigin="anonymous"
    preload="auto"
  ></video>

  <header class="header">
    <div class="header__logo-col">
      <span class="header__logo">Orven®</span>
    </div>
    <div class="header__col">
      <span class="header__line">Precision engineered</span>
      <span class="header__line">Essential</span>
      <span class="header__line">Proven</span>
    </div>
    <div class="header__col">
      <span class="header__line">Innovation Redefined</span>
      <span class="header__line">Our Story</span>
    </div>
    <div class="header__col header__col--end">
      <span class="header__line">+ Cart</span>
    </div>
  </header>

  <div class="scroll-track">
  <section class="hero grid">
    <div class="title-caption">
      <h1 class="title">Orven®</h1>
      <p class="title-caption__text">Performance optics engineered for crystal vision. Precision-crafted lenses tested for durability. Superior technology. Built for excellence</p>
    </div>
    <div class="product-card">
      <div class="product-card__row">
        <img class="product-card__img" src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_154945_5aa6a2f0-c120-455f-88e2-76a7ea9a5931.png&w=1920&q=85" alt="Orven eyewear" />
        <div class="product-card__body">
          <p class="product-card__text">Signature mirrored optics in weightless titanium. Explore the full range.</p>
          <button class="product-card__btn">DISCOVER</button>
        </div>
      </div>
    </div>
  </section>
  </div>

  <section class="products">
    <div class="products__header">
      <h2 class="products__title">Performance collection</h2>
      <a class="products__link" href="#">Shop all</a>
    </div>
    <div class="products__slider">
      <article class="card">
        <div class="card__img">
          <span class="card__badge">Polarized</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_154945_5aa6a2f0-c120-455f-88e2-76a7ea9a5931.png&w=1920&q=85" alt="Orven Classic" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Classic</p>
            <p class="card__desc">Precision-crafted polarized lenses with lightweight titanium frame for all-day comfort.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$249.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
      <article class="card">
        <div class="card__img">
          <span class="card__badge">UV Shield</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_153849_1fe6dd22-6843-45af-a465-9d30d767624d.png&w=1920&q=85" alt="Orven Sport Pro" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Sport Pro</p>
            <p class="card__desc">High-impact resistant optics built for intense activity. Anti-fog coating included.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$349.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
      <article class="card">
        <div class="card__img">
          <span class="card__badge">Polarized</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_153854_f64c4923-5212-4653-a1a6-8e1d616b601d.png&w=1920&q=85" alt="Orven Aero Lite" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Aero Lite</p>
            <p class="card__desc">Ultra-light frame with crystal-clear peripheral vision and adjustable nose pads.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$199.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
      <article class="card">
        <div class="card__img">
          <span class="card__badge">New</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_153858_739abfa0-cefc-4fe1-82ef-b5f8106d7e91.png&w=1920&q=85" alt="Orven Shield X" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Shield X</p>
            <p class="card__desc">Full-coverage wraparound design with hydrophobic lens coating for water sports.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$449.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
      <article class="card">
        <div class="card__img">
          <span class="card__badge">Polarized</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_153910_36fddcee-3f0d-4945-98a8-0238d25045a1.png&w=1920&q=85" alt="Orven Horizon" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Horizon</p>
            <p class="card__desc">Engineered for open-road clarity with gradient tint and flexible memory-metal arms.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$279.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
      <article class="card">
        <div class="card__img">
          <span class="card__badge">Limited</span>
          <img src="https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_3GJaYKPxdnQG0Q9O26lu6DPmcHu%2Fhf_20260721_154103_9537b57a-ab92-4f17-bfde-f3f1d037a864.png&w=1920&q=85" alt="Orven Stealth R" />
        </div>
        <div class="card__info">
          <a class="card__copy" href="#">
            <p class="card__name">Orven® Stealth R</p>
            <p class="card__desc">Carbon-fiber temples with anti-reflective sapphire-coated lenses for low-light use.</p>
          </a>
          <div class="card__bottom">
            <span class="card__price">$399.00</span>
            <button class="card__cart" aria-label="Add to cart"><i class="bi bi-bag-plus-fill"></i></button>
          </div>
        </div>
      </article>
    </div>
  </section>

  <script>
    const video = document.querySelector('.bg-video');
    const scrollTrack = document.querySelector('.scroll-track');
    const VIDEO_SRC = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260722_034500_01d916a4-d526-46c0-90e8-959d44fcc69b.mp4';

    // --- Video Scrub Engine ---
    // One seek in flight max. Scroll only writes `target`.
    // RAF lerps `current` toward `target`. Seeks happen ONLY when !video.seeking.
    const LERP = 0.12;
    const SEEK_EPS = 0.04;

    let target = 0;
    let current = 0;
    let rafId = 0;
    let ready = false;

    function trackProgress() {
      const trackEnd = scrollTrack.offsetHeight - window.innerHeight;
      if (trackEnd <= 0) return 0;
      return Math.min(1, Math.max(0, window.scrollY / trackEnd));
    }

    function syncTarget() {
      if (!ready || !video.duration) return;
      target = trackProgress() * video.duration;
      startLoop();
    }

    function startLoop() {
      if (rafId) return;
      rafId = requestAnimationFrame(tick);
    }

    function tick() {
      rafId = 0;
      current += (target - current) * LERP;

      // CRITICAL: never hammer the decoder — one seek at a time
      if (!video.seeking && Math.abs(video.currentTime - current) > SEEK_EPS) {
        video.currentTime = current;
      }

      const lerping = Math.abs(target - current) > 0.001;
      const seeking = video.seeking;
      const behind = Math.abs(video.currentTime - current) > SEEK_EPS;
      if (lerping || seeking || behind) {
        rafId = requestAnimationFrame(tick);
      } else {
        current = target;
      }
    }

    // When a seek finishes, immediately catch up to the latest lerped time
    video.addEventListener('seeked', () => {
      if (Math.abs(video.currentTime - current) > SEEK_EPS && !video.seeking) {
        video.currentTime = current;
      }
      startLoop();
    });

    window.addEventListener('scroll', syncTarget, { passive: true });

    async function loadAndPrime() {
      // Full download → blob URL so seeks hit local bytes, not the network
      try {
        const res = await fetch(VIDEO_SRC, { mode: 'cors' });
        const blob = await res.blob();
        video.src = URL.createObjectURL(blob);
      } catch {
        video.src = VIDEO_SRC;
      }

      await new Promise((resolve) => {
        if (video.readyState >= 1) resolve();
        else video.addEventListener('loadedmetadata', resolve, { once: true });
      });

      // iOS Safari prime
      try {
        await video.play();
      } catch (_) { /* autoplay may be blocked; fine */ }
      video.pause();
      video.currentTime = 0;

      // Wait until the file is fully buffered when possible
      await new Promise((resolve) => {
        const done = () => {
          if (!video.duration) return;
          if (video.buffered.length && video.buffered.end(video.buffered.length - 1) >= video.duration - 0.1) {
            cleanup();
            resolve();
          }
        };
        const cleanup = () => {
          video.removeEventListener('progress', done);
          video.removeEventListener('canplaythrough', done);
        };
        video.addEventListener('progress', done);
        video.addEventListener('canplaythrough', done);
        done();
        // Don't block forever on flaky buffer reporting
        setTimeout(() => { cleanup(); resolve(); }, 4000);
      });

      ready = true;
      syncTarget();
      startLoop();
    }

    loadAndPrime();

    // --- Products reveal ---
    const products = document.querySelector('.products');
    const cards = document.querySelectorAll('.card');
    const targetCardsY = new Array(cards.length).fill(0);
    const currentCardsY = new Array(cards.length).fill(0);
    const revealEase = 0.08;
    let revealRaf = 0;

    function revealNeedsWork() {
      for (let i = 0; i < cards.length; i++) {
        if (Math.abs(targetCardsY[i] - currentCardsY[i]) > 0.05) return true;
      }
      return false;
    }

    function startRevealLoop() {
      if (revealRaf) return;
      revealRaf = requestAnimationFrame(tickReveal);
    }

    function updateReveal() {
      const rect = products.getBoundingClientRect();
      const viewH = window.innerHeight;
      const enterStart = viewH;
      const enterEnd = viewH * 0.3;
      const p = Math.min(1, Math.max(0, (enterStart - rect.top) / (enterStart - enterEnd)));
      cards.forEach((_, i) => {
        const cardP = Math.min(1, Math.max(0, p * 1.5 - i * 0.08));
        targetCardsY[i] = (1 - cardP) * 80;
      });
      startRevealLoop();
    }

    function tickReveal() {
      revealRaf = 0;
      cards.forEach((c, i) => {
        currentCardsY[i] += (targetCardsY[i] - currentCardsY[i]) * revealEase;
        c.style.setProperty('--py', `${currentCardsY[i].toFixed(2)}px`);
      });
      if (revealNeedsWork()) revealRaf = requestAnimationFrame(tickReveal);
    }

    window.addEventListener('scroll', updateReveal, { passive: true });
    updateReveal();
  </script>
</body>
</html>
最后更新于 2026/8/24 21:54:29