```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import { Sparkles, CheckCircle, Calculator } from 'lucide-react'; // --- Configuration & Constants --- const WIDTH = 1200; const HEIGHT = 700; const MOUNTAIN_Y_BASE = 550; // Colors const C = { bgTop: '#e0f2fe', // Sky 100 bgBottom: '#fff7ed', // Orange 50 (Warm Beige) mountainDefault: '#94a3b8', // Slate 400 mountainGold: '#fbbf24', // Amber 400 mountainBrown: '#854d0e', // Yellow 800 (Brownish) textDark: '#1e293b', highlight: '#22c55e', // Green 500 scanner: '#3b82f6', // Blue 500 barGold: '#fcd34d', barBrown: '#a16207', }; // Mountain Data (Static Geometry) // Positions arranged to make scanning look interesting const MOUNTAINS = [ { id: 1, val: 10, x: 180, h: 120, w: 140, type: 'macaque', points: "0,120 40,20 70,0 110,40 140,120" }, { id: 2, val: 15, x: 380, h: 140, w: 160, type: 'gold', points: "0,140 50,30 80,10 120,50 160,140" }, { id: 3, val: 70, x: 600, h: 180, w: 200, type: 'gold', points: "0,180 60,40 100,0 150,60 200,180" }, { id: 4, val: 35, x: 820, h: 130, w: 150, type: 'gold', points: "0,130 40,30 75,10 110,40 150,130" }, { id: 5, val: 30, x: 1020, h: 150, w: 160, type: 'macaque', points: "0,150 50,40 80,0 120,50 160,150" }, ]; // --- Helper Components --- // Simple ease function const easeOutBack = (t) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }; export default function MathProblemAnimation() { // --- State --- const [phase, setPhase] = useState(0); // 0: Intro, 1: Sum, 2: Chart Intro, 3: Distribution, 4: Scanning, 5: Result const [totalSum, setTotalSum] = useState(0); const [scannerPos, setScannerPos] = useState({ x: 0, y: 0, w: 0, h: 0, opacity: 0, stroke: C.scanner }); const [barValues, setBarValues] = useState([null, null, null, null]); // Values inside the 4 bars // Animation Refs const reqRef = useRef(); const startTimeRef = useRef(Date.now()); const particlesRef = useRef([]); // For confetti const frameCountRef = useRef(0); // Initialize Particles const initParticles = useCallback(() => { const parts = []; for(let i=0; i<60; i++) { parts.push({ x: WIDTH/2, y: HEIGHT/2, vx: (Math.random() - 0.5) * 15, vy: (Math.random() - 1) * 15, color: Math.random() > 0.5 ? C.mountainGold : C.mountainBrown, size: Math.random() * 8 + 4, rotation: Math.random() * 360, drag: 0.95, gravity: 0.5 }); } particlesRef.current = parts; }, []); // --- Main Animation Loop --- const animate = useCallback(() => { const now = Date.now(); const elapsed = now - startTimeRef.current; frameCountRef.current++; // Update Particles if Phase 5 if (phase === 5) { particlesRef.current.forEach(p => { p.x += p.vx; p.y += p.vy; p.vy += p.gravity; p.vx *= p.drag; p.rotation += p.vx * 2; }); // Force re-render for particles occasionally or rely on other state updates? // Since we avoid heavy state updates, we'll use a local ticker state if needed, // but here we might piggyback on other animations or use a dedicated state for frame trigger. // For smoothness in React without Canvas, we often need a state update. // However, to follow strict rules, we minimize it. // We will use a ref-based transform update for particles to avoid React render cycle if possible, // but since we are using SVG elements, we must update state or refs bound to styles. // Let's use a dummy state to force render only during Phase 5. if (frameCountRef.current % 2 === 0) setTotalSum(prev => prev); // Hack trigger } // Scanner Animation Logic (Phase 4) if (phase === 4) { // Scripted scanner movement // 0-1s: Move to 10 // 1-2s: Move to 15 (fail) // 2-3s: Move to 30 (found match) // 3-4s: Expand to cover 10 and 30 // We use a relative timer for this phase // This is handled by the useEffect sequence, but we can interpolate here if we wanted strictly frame-based. // For simplicity in React, we'll use CSS transitions for the scanner mostly, // but we update the 'target' coordinates in the sequence effect. } reqRef.current = requestAnimationFrame(animate); }, [phase]); // --- Sequencer --- useEffect(() => { reqRef.current = requestAnimationFrame(animate); const runSequence = async () => { const wait = ms => new Promise(r => setTimeout(r, ms)); // Phase 0: Intro (0s) await wait(1000); // Phase 1: Total Sum (1s) setPhase(1); // Number rolling effect let currentSum = 0; const targetSum = 160; const interval = setInterval(() => { currentSum += 5; if (currentSum >= targetSum) { currentSum = targetSum; clearInterval(interval); } setTotalSum(currentSum); }, 30); await wait(3000); // Phase 2: Bar Chart Intro (4s) setPhase(2); await wait(3000); // Phase 3: Distribution (7s) setPhase(3); // Fill bars sequentially await wait(500); setBarValues([40, null, null, null]); await wait(400); setBarValues([40, 40, null, null]); await wait(400); setBarValues([40, 40, 40, null]); await wait(400); setBarValues([40, 40, 40, 40]); await wait(3000); // Phase 4: Scanning (11s) setPhase(4); // Scan Logic Steps // 1. Highlight 10 setScannerPos({ x: 180 - 20, y: MOUNTAIN_Y_BASE - 140, w: 180, h: 160, opacity: 1, stroke: C.scanner }); await wait(1500); // 2. Highlight 15 (Fail) setScannerPos({ x: 380 - 20, y: MOUNTAIN_Y_BASE - 160, w: 200, h: 180, opacity: 1, stroke: C.scanner }); await wait(1000); // 3. Highlight 30 (Potential) setScannerPos({ x: 1020 - 20, y: MOUNTAIN_Y_BASE - 170, w: 200, h: 190, opacity: 1, stroke: C.scanner }); await wait(1000); // 4. Lock 10 and 30 (Success) // We'll visualize this by making the scanner wide or two separate boxes. // Let's use two separate highlights in the render, but here we set a "success" state setScannerPos(prev => ({ ...prev, stroke: C.highlight, locked: true })); await wait(2000); // Phase 5: Result (16.5s) setPhase(5); initParticles(); }; runSequence(); return () => { cancelAnimationFrame(reqRef.current); }; }, [initParticles, animate]); // Dependencies are stable // --- Render Helpers --- // Generate Mountain Path const getMountainPath = (m) => { // scale points relative to x,y const pairs = m.points.split(' '); const pathData = pairs.map((pair, i) => { const [px, py] = pair.split(',').map(Number); return `${i===0?'M':'L'} ${m.x + px} ${MOUNTAIN_Y_BASE - py}`; }).join(' '); return pathData + ` L ${m.x + m.w} ${MOUNTAIN_Y_BASE} L ${m.x} ${MOUNTAIN_Y_BASE} Z`; }; const getMountainColor = (m) => { if (phase < 5) return C.mountainDefault; return m.type === 'gold' ? C.mountainGold : C.mountainBrown; }; const getMountainCenter = (m) => ({ x: m.x + m.w/2, y: MOUNTAIN_Y_BASE - m.h/2 }); return (

{/* --- SVG Layer --- */} {/* --- Internal CSS for Animations --- */}

); } ```