// Ninja flair — shuriken dividers, peeking mask mascot, cursor trail
const { useEffect: useEffectN, useState: useStateN, useRef: useRefN } = React;
// ————————————————————————————————————————————————————————————
// Shuriken divider: flies across, leaves a slash cut
// ————————————————————————————————————————————————————————————
function ShurikenDivider({ direction = "left-to-right", variant = "normal" }) {
const ref = useRefN(null);
const [visible, setVisible] = useStateN(false);
useEffectN(() => {
if (!ref.current) return;
const io = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) setVisible(true); },
{ threshold: 0.5 }
);
io.observe(ref.current);
return () => io.disconnect();
}, []);
return (
);
}
// ————————————————————————————————————————————————————————————
// Peeking mask mascot — sits in corner, blinks, follows scroll
// ————————————————————————————————————————————————————————————
function PeekingMask() {
const [peek, setPeek] = useStateN(0); // 0 hidden, 1..4 positions
const [blink, setBlink] = useStateN(false);
const [eyeDir, setEyeDir] = useStateN({ x: 0, y: 0 });
// rotate peek position through the page as user scrolls
useEffectN(() => {
const onScroll = () => {
const y = window.scrollY;
const total = document.body.scrollHeight - window.innerHeight;
const pct = y / Math.max(total, 1);
if (pct < 0.15) setPeek(0);
else if (pct < 0.4) setPeek(1);
else if (pct < 0.65) setPeek(2);
else if (pct < 0.9) setPeek(3);
else setPeek(4);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// blink periodically
useEffectN(() => {
const id = setInterval(() => {
setBlink(true);
setTimeout(() => setBlink(false), 160);
}, 3500 + Math.random() * 2000);
return () => clearInterval(id);
}, []);
// eye tracking
useEffectN(() => {
const onMove = (e) => {
const el = document.querySelector(".peek-mask");
if (!el) return;
const r = el.getBoundingClientRect();
const cx = r.left + r.width / 2;
const cy = r.top + r.height / 2;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
const d = Math.hypot(dx, dy) || 1;
const max = 3;
setEyeDir({ x: (dx / d) * max, y: (dy / d) * max });
};
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, []);
if (peek === 0) return null;
const positionClass = `peek-${peek}`;
return (
);
}
// ————————————————————————————————————————————————————————————
// Cursor trail — tiny shurikens fade behind cursor
// ————————————————————————————————————————————————————————————
function CursorTrail() {
const layerRef = useRefN(null);
const lastRef = useRefN({ x: 0, y: 0, t: 0 });
useEffectN(() => {
const layer = layerRef.current;
if (!layer) return;
// skip on touch / small screens
if (matchMedia("(pointer: coarse)").matches || window.innerWidth < 900) return;
const onMove = (e) => {
const now = performance.now();
const last = lastRef.current;
const dx = e.clientX - last.x;
const dy = e.clientY - last.y;
const dist = Math.hypot(dx, dy);
if (dist < 60 || now - last.t < 80) return;
lastRef.current = { x: e.clientX, y: e.clientY, t: now };
const star = document.createElement("div");
star.className = "cursor-star";
star.style.left = e.clientX + "px";
star.style.top = e.clientY + "px";
star.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
star.innerHTML = ``;
layer.appendChild(star);
setTimeout(() => star.remove(), 700);
};
window.addEventListener("mousemove", onMove);
return () => window.removeEventListener("mousemove", onMove);
}, []);
return ;
}
Object.assign(window, { ShurikenDivider, PeekingMask, CursorTrail });