页面与区块 · 综合行业与应用页面 · 公开
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