31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
// Mouse-only effects: border glow that follows the cursor and buttons that lean towards it
|
|
export function initPointerEffects() {
|
|
if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;
|
|
|
|
document.addEventListener(
|
|
'pointermove',
|
|
(event) => {
|
|
const element = event.target.closest?.('[data-glow]');
|
|
if (!element) return;
|
|
const rect = element.getBoundingClientRect();
|
|
element.style.setProperty('--mx', `${event.clientX - rect.left}px`);
|
|
element.style.setProperty('--my', `${event.clientY - rect.top}px`);
|
|
},
|
|
{ passive: true },
|
|
);
|
|
|
|
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
|
|
for (const element of document.querySelectorAll('[data-magnetic]')) {
|
|
element.addEventListener('pointermove', (event) => {
|
|
const rect = element.getBoundingClientRect();
|
|
const x = (event.clientX - rect.left - rect.width / 2) * 0.2;
|
|
const y = (event.clientY - rect.top - rect.height / 2) * 0.35;
|
|
element.style.translate = `${x.toFixed(1)}px ${y.toFixed(1)}px`;
|
|
});
|
|
element.addEventListener('pointerleave', () => {
|
|
element.style.translate = '';
|
|
});
|
|
}
|
|
}
|