// Scroll-reveal + parallax + custom cursor — drop-in enhancers.
// Mounted from app.jsx via and .
// ScrollFx: observer that adds .reveal-in to anything with .reveal once it scrolls into view,
// and applies a small parallax to elements with [data-parallax="N"] (N = px translation per 100px scroll).
const ScrollFx = () => {
React.useEffect(() => {
// Reveal observer
const targets = document.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('reveal-in');
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -80px 0px' });
targets.forEach(t => io.observe(t));
// Parallax via rAF
const parTargets = Array.from(document.querySelectorAll('[data-parallax]'));
let ticking = false;
const apply = () => {
ticking = false;
const vh = window.innerHeight;
parTargets.forEach(el => {
const r = el.getBoundingClientRect();
const center = r.top + r.height / 2;
const offset = (center - vh / 2) / vh; // -1..+1 across viewport
const factor = parseFloat(el.dataset.parallax) || 0.1;
el.style.transform = `translate3d(0, ${(-offset * factor * 60).toFixed(1)}px, 0)`;
});
};
const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(apply); } };
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
apply();
return () => {
io.disconnect();
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
};
}, []);
return null;
};
// CustomCursor — refined arrow. Familiar shape, thinner stroke, sharper tip,
// accent-tinted with a subtle hover state.
const CustomCursor = () => {
const wrapRef = React.useRef(null);
const stateRef = React.useRef({ x: -100, y: -100, hover: false, active: false, link: false });
React.useEffect(() => {
const isTouch = matchMedia('(pointer: coarse)').matches;
if (isTouch) return;
document.documentElement.classList.add('cursor-on');
// Inject cursor:none via