// Jennati shared components
const { motion, AnimatePresence, useScroll, useTransform, useMotionValue, useVelocity, useSpring, animate } = window.Motion || window.framerMotion || {};
const M = window.Motion || window.framerMotion;
// Icons via inline SVG so we don't depend on lucide loading
const Icon = ({ name, size = 20, stroke = 1.5, className = "" }) => {
const paths = {
search: <>,
user: <>,
bag: <>,
menu: <>,
x: <>,
arrowRight: <>,
arrowLeft: <>,
arrowDown: <>,
chevronLeft: <>,
chevronRight: <>,
chevronDown: <>,
instagram: <>,
facebook: <>,
tiktok: <>,
whatsapp: <>,
star: ,
heart: ,
plus: <>,
minus: ,
play: ,
sparkle: ,
};
return (
);
};
// Magnetic button wrapper
const Magnetic = ({ children, strength = 0.35, className = "" }) => {
const ref = React.useRef(null);
const onMove = (e) => {
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const x = e.clientX - (r.left + r.width / 2);
const y = e.clientY - (r.top + r.height / 2);
el.style.transform = `translate3d(${x * strength}px, ${y * strength}px, 0)`;
};
const onLeave = () => {
const el = ref.current;
if (el) el.style.transform = "translate3d(0,0,0)";
};
return (
{children}
);
};
// Char-by-char H2 reveal
const RevealText = ({ children, className = "", italic = "" }) => {
const ref = React.useRef(null);
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } },
{ threshold: 0.2 }
);
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
const text = typeof children === "string" ? children : "";
const parts = text.split(/(\*[^*]+\*)/g).filter(Boolean);
let charIdx = 0;
return (
{parts.map((part, i) => {
const isItalic = part.startsWith("*") && part.endsWith("*");
const clean = isItalic ? part.slice(1, -1) : part;
return (
{clean.split("").map((ch, j) => {
const idx = charIdx++;
return (
{ch}
);
})}
);
})}
);
};
// Generic in-view fade-up
const FadeUp = ({ children, delay = 0, y = 30, className = "", as: Tag = "div" }) => {
const ref = React.useRef(null);
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold: 0.15 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return (
{children}
);
};
// Image wipe reveal (mosaic)
const WipeImage = ({ src, alt, delay = 0, className = "" }) => {
const ref = React.useRef(null);
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold: 0.2 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return (
);
};
// Animated number counter
const Counter = ({ target, suffix = "", duration = 2000 }) => {
const ref = React.useRef(null);
const [val, setVal] = React.useState(0);
React.useEffect(() => {
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(Math.round(target * eased));
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
obs.disconnect();
}
}, { threshold: 0.4 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [target]);
return {val}{suffix};
};
// Custom cursor
const CustomCursor = () => {
const dotRef = React.useRef(null);
const ringRef = React.useRef(null);
React.useEffect(() => {
if (window.innerWidth < 1024) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
document.body.classList.add("has-custom-cursor");
let mx = window.innerWidth / 2, my = window.innerHeight / 2;
let rx = mx, ry = my;
const onMove = (e) => { mx = e.clientX; my = e.clientY; if (dotRef.current) { dotRef.current.style.left = mx + "px"; dotRef.current.style.top = my + "px"; } };
let rafId;
const loop = () => {
rx += (mx - rx) * 0.18;
ry += (my - ry) * 0.18;
if (ringRef.current) { ringRef.current.style.left = rx + "px"; ringRef.current.style.top = ry + "px"; }
rafId = requestAnimationFrame(loop);
};
loop();
const onOver = (e) => {
const t = e.target;
if (!ringRef.current) return;
ringRef.current.classList.remove("is-link", "is-product");
ringRef.current.textContent = "";
if (t.closest("[data-cursor='product']")) {
ringRef.current.classList.add("is-product");
ringRef.current.textContent = "VOIR";
} else if (t.closest("a, button, [role='button'], [data-cursor='link']")) {
ringRef.current.classList.add("is-link");
}
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseover", onOver);
return () => {
cancelAnimationFrame(rafId);
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseover", onOver);
document.body.classList.remove("has-custom-cursor");
};
}, []);
return (
<>
);
};
// Smooth scroll (Lenis-like) — DESKTOP ONLY (touch devices use native scroll)
const useSmoothScroll = () => {
React.useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
// Skip entirely on touch devices — wheel hijacking breaks iOS scroll
const isTouch = ("ontouchstart" in window) || (navigator.maxTouchPoints > 0);
const isNarrow = window.matchMedia("(max-width: 1024px)").matches;
if (isTouch || isNarrow) return;
let target = window.scrollY;
let current = window.scrollY;
let rafId;
let active = true;
const onWheel = (e) => {
// only intercept if no modifier and not inside a scrollable child
const t = e.target;
const scrollable = t && t.closest("[data-no-smooth]");
if (scrollable) return;
e.preventDefault();
target = Math.max(0, Math.min(document.documentElement.scrollHeight - window.innerHeight, target + e.deltaY));
};
const loop = () => {
current += (target - current) * 0.085;
if (Math.abs(target - current) < 0.5) current = target;
window.scrollTo(0, current);
if (active) rafId = requestAnimationFrame(loop);
};
target = current = window.scrollY;
window.addEventListener("wheel", onWheel, { passive: false });
rafId = requestAnimationFrame(loop);
return () => {
active = false;
cancelAnimationFrame(rafId);
window.removeEventListener("wheel", onWheel);
};
}, []);
};
// Brand wordmark separator
const Bullet = () => (
);
window.JC = { Icon, Magnetic, RevealText, FadeUp, WipeImage, Counter, CustomCursor, useSmoothScroll, Bullet };