/* 2026-grade micro-interactions and engagement primitives */
/* Scroll progress bar across the top */
function ScrollProgress() {
const [p, setP] = React.useState(0);
React.useEffect(() => {
const f = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setP(max > 0 ? (h.scrollTop / max) : 0);
};
window.addEventListener("scroll", f, { passive: true });
f();
return () => window.removeEventListener("scroll", f);
}, []);
return (
);
}
/* Count-up number when visible */
function CountUp({ to, suffix = "", duration = 1600, prefix = "" }) {
/* In the CI prerender (headless Chrome), show the final value immediately so
the baked snapshot reads real numbers, never the pre-animation zeros. */
const prerendering = typeof navigator !== "undefined" && navigator.webdriver === true;
const [n, setN] = React.useState(prerendering ? to : 0);
const ref = React.useRef(null);
const started = React.useRef(false);
React.useEffect(() => {
if (prerendering) return;
if (!ref.current) return;
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting && !started.current) {
started.current = true;
const t0 = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.round(to * eased));
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.3 });
io.observe(ref.current);
return () => io.disconnect();
}, [to, duration]);
return {prefix}{n.toLocaleString()}{suffix};
}
/* Magnetic button, gently pulls toward the cursor */
function Magnetic({ children, strength = 0.25, ...rest }) {
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 = `translate(${x * strength}px, ${y * strength}px)`;
};
const onLeave = () => { if (ref.current) ref.current.style.transform = ""; };
return (
{children}
);
}
/* Live activity ticker strip
Two UX tweaks layered on top of the original CSS marquee:
1) Shuffle the line order once per browsing session so a returning visitor
doesn't see the same first three headlines every time.
2) Persist elapsed marquee seconds in sessionStorage so navigating away
and back resumes the strip mid-cycle instead of restarting at 0%.
Together these guarantee every headline gets seen across a session, even
if the visitor only spends ~10 seconds on the homepage per visit. */
function LiveTicker() {
// PLACEHOLDER ticker content — on-brand lines, no fabricated events.
// Swap these for real stats/updates when available (e.g. dogs rescued this month,
// upcoming transport, latest adoption, sponsorship milestones).
const ITEMS = [
"Recent Rescue Mission: Dog Meat Truck Interception. 47 dogs saved from transport to the Yulin Dog Meat Festival",
"12 dogs have arrived from our sanctuary in China, four now with our wonderful rescue partner Animal Haven in NYC",
"Little tripod Trip has been adopted by a wonderful family in Atlanta, living his best life with dog and human siblings",
"Two more Yulin Dog Meat Festival survivors are home: senior mixed breed Stanley, and six year old Malamute Kiva, adopted by a wonderful Marine couple",
];
// Cycle scaled to ~7s per headline at original tempo — fewer items in the
// strip means we proportionally shorten the marquee duration so it doesn't
// crawl unnaturally slowly. Adjust upward if more headlines are added.
const CYCLE_SEC = 28;
const STATE_KEY = "r2tr_ticker_v1";
const state = React.useMemo(() => {
// Try to resume the per-tab session
try {
const stored = JSON.parse(sessionStorage.getItem(STATE_KEY) || "null");
if (stored && Array.isArray(stored.order) && stored.order.length === ITEMS.length) {
const elapsed = (Date.now() - (stored.savedAt || Date.now())) / 1000;
const offset = ((stored.offset || 0) + Math.max(0, elapsed)) % CYCLE_SEC;
return { order: stored.order, offset };
}
} catch (e) { /* sessionStorage blocked → fall through to fresh shuffle */ }
// First visit this session: shuffle the line order (Fisher–Yates)
const order = ITEMS.map((_, i) => i);
for (let i = order.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const tmp = order[i]; order[i] = order[j]; order[j] = tmp;
}
return { order, offset: 0 };
}, []);
React.useEffect(() => {
// Save the current offset whenever the user leaves the page (navigates
// away, switches tab, closes), so the next mount can resume mid-cycle.
const save = () => {
try {
sessionStorage.setItem(STATE_KEY, JSON.stringify({
order: state.order,
offset: state.offset,
savedAt: Date.now(),
}));
} catch (e) { /* storage blocked, nothing to do */ }
};
window.addEventListener("pagehide", save);
document.addEventListener("visibilitychange", save);
return () => {
save();
window.removeEventListener("pagehide", save);
document.removeEventListener("visibilitychange", save);
};
}, [state]);
const items = state.order.map((i) => ITEMS[i]);
return (
{[...items, ...items].map((t, i) => (
{t}
))}
);
}
/* Interactive impact calculator
Discrete six-tier ladder backed by actual line items in our rescue budget,
so a donor can see exactly which line their gift would cover. The slider's
underlying input is min=0, max=5, step=1 — visual feedback is smooth but
only six positions are reachable. Tiers are ordered low → high; default
is the middle "food and shelter for one month" tier so the panel opens at
a meaningful number, not the minimum. */
function ImpactCalc({ onDonate }) {
const TIERS = [
{ value: 15, text: "buys a bag of treats for the dogs" },
{ value: 30, text: "covers flea and tick for one month" },
{ value: 75, text: "provides food and shelter for one month" },
{ value: 150, text: "covers vaccinations, sterilization, and microchip" },
{ value: 900, text: "pays for the CDC fees on a rescue" },
{ value: 2500, text: "funds one freedom flight home" },
];
const [idx, setIdx] = React.useState(2);
const amount = TIERS[idx].value;
const outcome = TIERS[idx];
return (
See your impact
Every dollar has a face.
Drag the slider to see what your gift covers, from a week of food to the flight home.