// Additional landing animations: marquee, count-up, real-time clock, shimmer button.
const { useState: useStateNew, useEffect: useEffectNew, useRef: useRefNew } = React;
// ── MarqueeTicker ─ full-width infinite scroll strip ─────────────
function MarqueeTicker({ items, speed = 40 }) {
const text = (
{items.map((it, i) => (
{it}
))}
);
return (
);
}
// ── AnimatedCount ─ tweens from 0 to target on scroll into view ──
function AnimatedCount({ value, suffix = '', duration = 2500, style }) {
const [n, setN] = useStateNew(0);
const ref = useRefNew(null);
const startedRef = useRefNew(false);
useEffectNew(() => {
if (prefersReducedMotion()) { setN(value); return; }
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && !startedRef.current) {
startedRef.current = true;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3); // cubic ease-out
setN(value * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
io.unobserve(el);
}
});
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [value, duration]);
// Format: keep one decimal for non-integer values, no decimal for percentages
const display = Number.isInteger(value)
? Math.round(n).toString()
: n.toFixed(1);
return (
{display}{suffix}
);
}
// ── LiveClock ─ analog clock face with real-time hands + coral arc
// Coral arc covers 6AM–11:59PM (the PROVE Window).
function LiveClock({ size = 220 }) {
const [now, setNow] = useStateNew(new Date());
useEffectNew(() => {
const t = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(t);
}, []);
const r = size / 2;
const cx = r, cy = r;
const ringR = r - 12;
const handLenH = r * 0.5;
const handLenM = r * 0.7;
const handLenS = r * 0.78;
const hours = now.getHours() + now.getMinutes() / 60;
const minutes = now.getMinutes() + now.getSeconds() / 60;
const seconds = now.getSeconds();
const hourAngle = (hours / 12) * 360; // 12h dial
const minAngle = (minutes / 60) * 360;
const secAngle = (seconds / 60) * 360;
// Coral arc: 6AM–11:59PM = 18 hours of 24, but visualized on 12h dial means
// covering essentially the full 12h circle minus the 6h "night" segment.
// Show as a clean arc from 6 to 12 to 6 on the 12h face — coral over the
// "active part of the day". We'll draw it from 6 o'clock around the top
// back to 6 o'clock (270° arc, leaving the bottom-most segment uncolored).
// Simpler: arc from angle 330° to angle 210° going clockwise (covers most of dial).
const arcStart = -60; // 10 o'clock position
const arcEnd = 240; // ~7 o'clock position
const polar = (deg, rad = ringR) => {
const a = (deg - 90) * Math.PI / 180;
return [cx + Math.cos(a) * rad, cy + Math.sin(a) * rad];
};
const [ax1, ay1] = polar(arcStart);
const [ax2, ay2] = polar(arcEnd);
const largeArc = arcEnd - arcStart > 180 ? 1 : 0;
const isOpen = hours >= 6 && hours < 24;
return (
);
}
// ── ShimmerButton ─ wraps children, renders a diagonal sweep highlight
function ShimmerButton({ children, style }) {
return (
{children}
);
}
Object.assign(window, { MarqueeTicker, AnimatedCount, LiveClock, ShimmerButton });