init elas atelier #1
@@ -32,7 +32,6 @@
|
||||
if (!fx) return;
|
||||
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
const fine = window.matchMedia('(pointer: fine)').matches;
|
||||
|
||||
/* ─── Generated sigil growths in the four corners ─── */
|
||||
/* One sigil per page load; the four corner transforms in global.css
|
||||
@@ -80,22 +79,17 @@
|
||||
}
|
||||
|
||||
/* ─── Ambient: entrance fade-in (opacity:0 → target via the CSS
|
||||
* transition on first apply), scroll-depth recede, scroll + pointer
|
||||
* parallax. Parallax is gated on fine pointers and reduced-motion;
|
||||
* the depth fade is just opacity tied to scroll position. ─── */
|
||||
* transition on first apply) + scroll-depth recede. Parallax is
|
||||
* disabled for now — the --cs-px/py/cx/cy vars default to 0px so the
|
||||
* wire/corner transforms stay put; re-enable by driving those vars
|
||||
* from scroll/pointer here again. ─── */
|
||||
if (teardown) teardown();
|
||||
const off: Array<() => void> = [];
|
||||
let depth = 0, px = 0, py = 0, raf = 0;
|
||||
let depth = 0, raf = 0;
|
||||
|
||||
const apply = () => {
|
||||
raf = 0;
|
||||
fx.style.opacity = String(1 - 0.5 * depth);
|
||||
if (!reduced) {
|
||||
fx.style.setProperty('--cs-px', px.toFixed(1) + 'px');
|
||||
fx.style.setProperty('--cs-py', (py + depth * 24).toFixed(1) + 'px');
|
||||
fx.style.setProperty('--cs-cx', (-px * 0.42).toFixed(1) + 'px');
|
||||
fx.style.setProperty('--cs-cy', (-py * 0.42).toFixed(1) + 'px');
|
||||
}
|
||||
};
|
||||
const schedule = () => { if (!raf) raf = requestAnimationFrame(apply); };
|
||||
|
||||
@@ -110,17 +104,6 @@
|
||||
off.push(() => window.removeEventListener('resize', onScroll));
|
||||
onScroll();
|
||||
|
||||
if (!reduced && fine) {
|
||||
const onPointer = (e: PointerEvent | MouseEvent) => {
|
||||
const w = window.innerWidth || 1, h = window.innerHeight || 1;
|
||||
px = (e.clientX / w - 0.5) * 26; // ≈ ±13px drift
|
||||
py = (e.clientY / h - 0.5) * 26;
|
||||
schedule();
|
||||
};
|
||||
window.addEventListener('pointermove', onPointer, { passive: true });
|
||||
off.push(() => window.removeEventListener('pointermove', onPointer));
|
||||
}
|
||||
|
||||
/* Freeze every loop while the tab is hidden — idle-battery win. */
|
||||
const onVis = () => fx.classList.toggle('is-paused', document.hidden);
|
||||
document.addEventListener('visibilitychange', onVis);
|
||||
|
||||
Reference in New Issue
Block a user