{particles.map((p) => {
const isCircle = p.shape === 1;
const isRibbon = p.shape === 3;
const w = isRibbon ? p.size * 0.4 : p.size;
const h = isRibbon ? p.size * 1.8 : isCircle ? p.size : p.size * 0.6;
return (
);
})}
);
};
// Countdown duration in seconds. Maps to a metaphorical 24h window:
// the bar drains over 24s and the time readout counts down 24h → 0h.
// Slow enough that you almost certainly catch it on first try, but
// tight enough to feel like a real race once the bar gets near zero.
const CB_DURATION_MS = 24000;
// After a tap (success or fail), pause briefly, then auto-reset for another go.
const CB_RESET_DELAY_SUCCESS = 1600;
const CB_RESET_DELAY_FAIL = 1800;
const CelebrationButton = () => {
// status: 'idle' (timer not started) | 'running' | 'success' | 'failed'
const [status, setStatus] = React.useState("idle");
const [progress, setProgress] = React.useState(1); // 1 = full, 0 = empty
const [bursts, setBursts] = React.useState([]);
const [pressed, setPressed] = React.useState(false);
const [wins, setWins] = React.useState(0);
const [misses, setMisses] = React.useState(0);
// Arriving-notification phases:
// 'pending' – out of frame, nothing shown yet
// 'arriving' – sliding down from above the card, fading in
// 'visible' – settled, hovering above the card briefly
// 'tucking' – animating into the strip (slide down + scale + fade)
// 'gone' – removed from DOM; countdown is running or has run
const [notifPhase, setNotifPhase] = React.useState("pending");
const wrapRef = React.useRef(null);
const rafRef = React.useRef(null);
const startRef = React.useRef(0);
const resetTimerRef = React.useRef(null);
const startedOnceRef = React.useRef(false);
const arrivalTimersRef = React.useRef([]);
// Convert progress -> remaining "hours" shown to user (24h → 0h).
// Always rounds up so it never sits at 0 while the bar is still draining.
const remainingHours = progress > 0 ? Math.max(1, Math.ceil(progress * 24)) : 0;
const stopRaf = () => {
if (rafRef.current) {
cancelAnimationFrame(rafRef.current);
rafRef.current = null;
}
};
const startCountdown = React.useCallback(() => {
stopRaf();
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
resetTimerRef.current = null;
}
setStatus("running");
setProgress(1);
startRef.current = performance.now();
const tick = (now) => {
const elapsed = now - startRef.current;
const p = Math.max(0, 1 - elapsed / CB_DURATION_MS);
setProgress(p);
if (p <= 0) {
// Time's up
setStatus((s) => {
if (s === "running") {
setMisses((m) => m + 1);
return "failed";
}
return s;
});
return;
}
rafRef.current = requestAnimationFrame(tick);
};
rafRef.current = requestAnimationFrame(tick);
}, []);
// Run the arrival cinematic, then start the countdown.
const playArrivalSequence = React.useCallback(() => {
// Clean up any leftover timers
arrivalTimersRef.current.forEach(clearTimeout);
arrivalTimersRef.current = [];
setNotifPhase("arriving");
// Sequence:
// 0ms -> arriving (slide+fade in over ~700ms)
// ~800ms -> visible (settle for ~1500ms so user reads it)
// ~2300ms -> tucking (slide into strip over ~600ms)
// ~2700ms -> kick off the actual countdown (a hair before tuck finishes)
// ~2900ms -> gone (remove from DOM)
const t1 = setTimeout(() => setNotifPhase("visible"), 800);
const t2 = setTimeout(() => setNotifPhase("tucking"), 2300);
const t3 = setTimeout(() => startCountdown(), 2700);
const t4 = setTimeout(() => setNotifPhase("gone"), 2900);
arrivalTimersRef.current.push(t1, t2, t3, t4);
}, []);
// Auto-trigger the arrival when the card scrolls into view (once)
React.useEffect(() => {
const el = wrapRef.current;
if (!el) return;
const obs = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !startedOnceRef.current) {
startedOnceRef.current = true;
// Tiny beat before the notification drops in
setTimeout(() => playArrivalSequence(), 450);
}
},
{ threshold: 0.5 }
);
obs.observe(el);
return () => obs.disconnect();
}, [playArrivalSequence]);
// Cleanup arrival timers on unmount
React.useEffect(() => () => {
arrivalTimersRef.current.forEach(clearTimeout);
}, []);
// After a miss, auto-reset for another go. After success, leave the
// celebrated state in place — the user has earned their win.
React.useEffect(() => {
if (status === "failed") {
resetTimerRef.current = setTimeout(() => {
startCountdown();
}, CB_RESET_DELAY_FAIL);
}
return () => {
if (resetTimerRef.current) {
clearTimeout(resetTimerRef.current);
resetTimerRef.current = null;
}
};
}, [status, startCountdown]);
React.useEffect(() => () => stopRaf(), []);
const handleClick = () => {
if (status === "running") {
// SUCCESS — beat the clock
stopRaf();
setStatus("success");
setPressed(true);
setWins((w) => w + 1);
const id = Date.now() + Math.random();
setBursts((b) => [...b, { id, particles: cbMakeBurst(38) }]);
setTimeout(() => setPressed(false), 220);
setTimeout(() => {
setBursts((b) => b.filter((x) => x.id !== id));
}, 2400);
} else if (status === "failed") {
// Tapping after the deadline does nothing dramatic — just a soft press feedback
setPressed(true);
setTimeout(() => setPressed(false), 180);
} else if (status === "idle" || status === "success") {
// Manual restart by tapping
startCountdown();
}
};
// Color thresholds for the bar
const isUrgent = status === "running" && progress < 0.35;
const isCritical = status === "running" && progress < 0.18;
let stripState = "running";
if (status === "success") stripState = "success";
else if (status === "failed") stripState = "failed";
else if (isCritical) stripState = "critical";
else if (isUrgent) stripState = "urgent";
// While the notification is doing its arrival cinematic, the strip
// shows a calm "waiting for a rep" state and the button is muted.
const isWaiting = status === "idle" && notifPhase !== "gone";
return (
{/* ---- Arriving notification (drops in from above) ---- */}
{notifPhase !== "gone" && notifPhase !== "pending" && (
Spanish 101 — your 24 hours start now.
)}
{/* ---- Race strip (timer + label) ---- */}
{isWaiting ? "Awaiting a rep" :
status === "success" ? "Reviewed in time" :
status === "failed" ? "Missed the window" :
"Beat the clock"}
{isWaiting ? "—" :
status === "failed" ? "0h left" :
status === "success" ? "Saved!" :
`${remainingHours}h left`}
{wins} caught
·
{misses} missed
{/* ---- Button area ---- */}
{/* Idle pulse — only while running and getting urgent */}
{/* Ring flash on success */}
{bursts.map((b) =>
)}
{pressed && status === "success" &&
+1}