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

OC hero: halve particle opacity (.55 -> .275) and slow desktop drift to 0.5x

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-23 06:45:39 -07:00
parent 2ea8a2e054
commit 5fa57cf11c
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -2
View File
@@ -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 () {});
})();
</script>