/* eslint-disable no-undef */
// Shared icons + small UI primitives
const Icon = {
Menu: () => (
),
Close: () => (
),
Instagram: () => (
),
Tiktok: () => (
),
Pinterest: () => (
),
Mail: () => (
),
Arrow: () => (
),
Check: () => (
)
};
// hook: in-view reveal. Re-scans the DOM only when `deps` changes (e.g. on
// route change, when a different set of .reveal elements mounts) instead of
// on every render.
function useReveal(deps) {
React.useEffect(() => {
const els = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, deps);
}
// hook: floating hearts while scrolling down. Purely decorative brand
// flourish — throttled hard (one heart per MIN_GAP ms, capped concurrent
// count) so it reads as an occasional sprinkle rather than noise on a
// gesture that fires constantly. Each heart is a short-lived DOM node
// animated once via CSS (GPU-only transform/opacity), never retargeted, so
// plain keyframes are fine here — nothing about it needs to be interruptible.
// Skipped entirely under reduced-motion: it's decorative movement with no
// functional purpose, so there's nothing worth keeping gentler.
function useScrollHearts() {
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const layer = document.createElement('div');
layer.className = 'scroll-hearts-layer';
layer.setAttribute('aria-hidden', 'true');
document.body.appendChild(layer);
// Half density on phones: small screens read the same heart count as
// confetti over the text, and scrolling is the most frequent gesture.
const small = window.matchMedia('(max-width: 540px)').matches;
const MIN_GAP_MS = small ? 160 : 90;
const MAX_HEARTS = small ? 12 : 24;
const HEART_SVG =
'';
let lastY = window.scrollY;
let lastSpawn = 0;
const spawn = () => {
if (layer.children.length >= MAX_HEARTS) return;
const heart = document.createElement('span');
heart.className = 'scroll-heart';
heart.style.left = `${8 + Math.random() * 84}%`;
heart.style.setProperty('--drift', `${(Math.random() * 40 - 20).toFixed(0)}px`);
heart.style.setProperty('--scale', (0.6 + Math.random() * 0.5).toFixed(2));
heart.innerHTML = HEART_SVG;
heart.addEventListener('animationend', () => heart.remove());
layer.appendChild(heart);
};
const onScroll = () => {
const y = window.scrollY;
const goingDown = y > lastY;
lastY = y;
if (!goingDown) return;
const now = performance.now();
if (now - lastSpawn < MIN_GAP_MS) return;
lastSpawn = now;
spawn();
spawn();
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
window.removeEventListener('scroll', onScroll);
layer.remove();
};
}, []);
}
window.Icon = Icon;
window.useReveal = useReveal;
window.useScrollHearts = useScrollHearts;