mike/oc-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero: waves on desktop, C (dots) on mobile — viewport picks the loop

Browse Source 
Desktop swaps to the flowing thin-line waves (they blend clean against the cream;
C's cool-gray background never did) with the Manus-style left-edge paper fade
restored. Mobile keeps the C loop Mike approved (rotated 90deg, centered, tinted).
JS chooses the source by viewport at load. Drop the unused comparison clips.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-22 22:37:58 -07:00
parent b7814a1711
commit 2c61b75a77
4 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/media/hero-desktop.mp4
BIN
View File
Binary file not shown.
assets/media/hero-loop.mp4 → assets/media/hero-mobile.mp4
View File
index.html
+6 -6
View File
@@ -91,7 +91,7 @@
</div> </div>
</div> </div>
<div class="hero-media" aria-hidden="true"> <div class="hero-media" aria-hidden="true">
<video class="hero-video" muted loop playsinline preload="none" data-src-mp4="assets/media/hero-loop.mp4"></video> <video class="hero-video" muted loop playsinline preload="none" data-src-desktop="assets/media/hero-desktop.mp4" data-src-mobile="assets/media/hero-mobile.mp4"></video>
</div> </div>
</section> </section>
@@ -374,11 +374,11 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" });
var conn = navigator.connection || {}; var conn = navigator.connection || {};
if (conn.saveData === true) return; if (conn.saveData === true) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var webm = hv.getAttribute('data-src'), mp4 = hv.getAttribute('data-src-mp4'); // viewport picks the loop: flowing waves on desktop, dotted-particle (C) rotated on mobile
if (!webm && !mp4) return; var isMobile = window.matchMedia('(max-width: 760px)').matches;
function addSrc(u, t) { if (!u) return; var s = document.createElement('source'); s.src = u; s.type = t; hv.appendChild(s); } var mp4 = hv.getAttribute(isMobile ? 'data-src-mobile' : 'data-src-desktop');
addSrc(webm, 'video/webm'); // modern browsers pick this (smaller VP9) if (!mp4) return;
addSrc(mp4, 'video/mp4'); // old Safari / iOS fall back to H.264 var s = document.createElement('source'); s.src = mp4; s.type = 'video/mp4'; hv.appendChild(s);
hv.load(); hv.load();
hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true }); hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true });
var p = hv.play(); if (p && p.catch) p.catch(function () {}); var p = hv.play(); if (p && p.catch) p.catch(function () {});
style.css
+2 -1
View File
@@ -138,7 +138,7 @@ a.tel { text-decoration: none; }
position: absolute; top: 0; right: 0; bottom: 0; width: 56%; position: absolute; top: 0; right: 0; bottom: 0; width: 56%;
z-index: 1; pointer-events: none; background: var(--paper); z-index: 1; pointer-events: none; background: var(--paper);
} }
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .2; pointer-events: none; } .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, var(--paper) 0%, rgba(247,244,239,0) 30%); }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; }
.hero-video.is-playing { opacity: .5; } .hero-video.is-playing { opacity: .5; }
@media (max-width: 760px) { @media (max-width: 760px) {
@@ -147,6 +147,7 @@ a.tel { text-decoration: none; }
faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */ faded from the top so the headline reads over paper and the ambient shows lower. Tint ::after still applies. */
.hero-media { left: 0; width: 100%; .hero-media { left: 0; width: 100%;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); } -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
.hero-media::after { background: rgba(247,244,239,.2); } /* flat lightening wash on mobile (no desktop left-fade) */
.hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; } .hero-video { position: absolute; top: 50%; left: 50%; width: 100vh; height: 100vw; object-fit: cover; object-position: 50% 50%; transform: translate(-50%, -50%) rotate(90deg); mix-blend-mode: normal; }
.hero-video.is-playing { opacity: .5; } .hero-video.is-playing { opacity: .5; }
} }