From 5fa57cf11c84e4e0aec5767c52c93db782a485cb Mon Sep 17 00:00:00 2001 From: Michael Victory Date: Tue, 23 Jun 2026 06:45:39 -0700 Subject: [PATCH] OC hero: halve particle opacity (.55 -> .275) and slow desktop drift to 0.5x Mike: lighter and calmer. Desktop particle loop plays at half speed (playbackRate 0.5, set on loadedmetadata + playing); mobile C unchanged. Co-Authored-By: Claude Opus 4.8 --- index.html | 6 ++++-- style.css | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index c4768a6..2a4f6c3 100644 --- a/index.html +++ b/index.html @@ -374,13 +374,15 @@ Cal("init", { origin: "https://cal.shopwisdom.ca" }); var conn = navigator.connection || {}; if (conn.saveData === true) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; - // viewport picks the loop: flowing waves on desktop, dotted-particle (C) rotated on mobile + // viewport picks the loop: particle cloud on desktop, dotted-particle (C) rotated on mobile var isMobile = window.matchMedia('(max-width: 760px)').matches; var mp4 = hv.getAttribute(isMobile ? 'data-src-mobile' : 'data-src-desktop'); if (!mp4) return; var s = document.createElement('source'); s.src = mp4; s.type = 'video/mp4'; hv.appendChild(s); hv.load(); - hv.addEventListener('playing', function () { hv.classList.add('is-playing'); }, { once: true }); + var rate = isMobile ? 1 : 0.5; // slow the desktop particle drift to a calm pace + hv.addEventListener('loadedmetadata', function () { hv.playbackRate = rate; }); + hv.addEventListener('playing', function () { hv.playbackRate = rate; hv.classList.add('is-playing'); }, { once: true }); var p = hv.play(); if (p && p.catch) p.catch(function () {}); })(); diff --git a/style.css b/style.css index d36a850..e9430d8 100644 --- a/style.css +++ b/style.css @@ -140,7 +140,7 @@ a.tel { text-decoration: none; } } .hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(247,244,239,.35) 0%, rgba(247,244,239,0) 22%, rgba(247,244,239,0) 78%, var(--paper) 100%); } .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1s ease; } -.hero-video.is-playing { opacity: .55; } +.hero-video.is-playing { opacity: .275; } @media (max-width: 760px) { .hero { min-height: 88vh; padding: 120px 0 56px; display: block; } /* Loop OVERLAID as the hero background (not stacked below): full-bleed, rotated 90deg CW,