{lang==="vi"?"Tải về trên":lang==="ko"?"다운로드":lang==="jp"?"ダウンロード":"Download on the"}
App Store
{lang==="vi"?"Có trên":lang==="ko"?"다운로드":lang==="jp"?"ダウンロード":"Get it on"}
Google Play
{t.hero.sub}
![]({`assets/screens/${IMG_LANG[lang]||"en"}_home.png`})
{t.picks.sub}
{t.safety.sub}
{it.body}
![]({`assets/screens/${IMG_LANG[lang]||"en"}_${s}.png`})
'
+ ''
+ '';
document.body.appendChild(cursor);
let mouseX = -100, mouseY = -100;
let renderX = -100, renderY = -100;
let rafId = 0;
const lerp = (a, b, t) => a + (b - a) * t;
const tick = () => {
renderX = lerp(renderX, mouseX, 0.32);
renderY = lerp(renderY, mouseY, 0.32);
// Cat is 45×35; center on pointer
cursor.style.transform = "translate3d(" + (renderX - 22) + "px, " + (renderY - 17) + "px, 0)";
rafId = requestAnimationFrame(tick);
};
rafId = requestAnimationFrame(tick);
const onMove = (e) => { mouseX = e.clientX; mouseY = e.clientY; };
const onLeave = () => { cursor.style.opacity = "0"; };
const onEnter = () => { cursor.style.opacity = "1"; };
window.addEventListener("mousemove", onMove, { passive: true });
document.addEventListener("mouseleave", onLeave);
document.addEventListener("mouseenter", onEnter);
return () => {
cancelAnimationFrame(rafId);
window.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseleave", onLeave);
document.removeEventListener("mouseenter", onEnter);
cursor.remove();
document.body.classList.remove("has-cat-cursor");
};
}, []);
};
// Bidirectional scroll reveal — adds .in on enter, removes on leave
const useScrollReveal = (lang) => {
useEffect(() => {
if (typeof window === "undefined") return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) {
document.querySelectorAll(".reveal-bi, .split-reveal").forEach(el => el.classList.add("in"));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add("in");
} else {
// Only un-reveal once it has fully left the viewport (top or bottom)
const r = e.target.getBoundingClientRect();
if (r.bottom < 0 || r.top > window.innerHeight) {
e.target.classList.remove("in");
}
}
});
}, { threshold: [0, 0.15], rootMargin: "0px 0px -8% 0px" });
let els = Array.from(document.querySelectorAll(".reveal-bi, .split-reveal"));
els.forEach(el => io.observe(el));
// Late-mount catch
const refresh = setTimeout(() => {
Array.from(document.querySelectorAll(".reveal-bi, .split-reveal")).forEach(el => {
if (!els.includes(el)) io.observe(el);
});
}, 300);
return () => { clearTimeout(refresh); io.disconnect(); };
}, [lang]);
};
// Magnetic pull on [data-magnetic] elements
const useMagnetic = (lang) => {
useEffect(() => {
if (typeof window === "undefined") return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
const PROXIMITY = 80; // px around the element where pull engages
const STRENGTH = 0.30;
const findEls = () => Array.from(document.querySelectorAll("[data-magnetic]"));
let els = findEls();
let pending = false;
const onMove = (e) => {
if (pending) return;
pending = true;
requestAnimationFrame(() => {
els.forEach((el) => {
const rect = el.getBoundingClientRect();
if (rect.width === 0) return;
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
// shortest distance from element bounds
const distX = Math.max(0, Math.abs(dx) - rect.width / 2);
const distY = Math.max(0, Math.abs(dy) - rect.height / 2);
const dist = Math.hypot(distX, distY);
if (dist > PROXIMITY) {
el.style.setProperty("--mx", "0px");
el.style.setProperty("--my", "0px");
return;
}
const t = 1 - dist / PROXIMITY;
el.style.setProperty("--mx", (dx * STRENGTH * t).toFixed(2) + "px");
el.style.setProperty("--my", (dy * STRENGTH * t).toFixed(2) + "px");
});
pending = false;
});
};
const refreshT = setTimeout(() => { els = findEls(); }, 200);
window.addEventListener("mousemove", onMove, { passive: true });
return () => {
clearTimeout(refreshT);
window.removeEventListener("mousemove", onMove);
};
}, [lang]);
};
/* ============ App ============ */
const App = () => {
const [lang, setLangState] = useState("vi");
const setLang = (l) => {
setLangState(l);
document.documentElement.setAttribute("data-lang", l);
document.documentElement.lang = l;
};
const t = I18N[lang];
useLenis();
useScrollKinetics();
useCursorTilt(lang);
useMagnetic(lang);
useScrollReveal(lang);
usePhoneReveal(lang);
useCatCursor();
return (