```tsx 'use client'; import React, { useState, useEffect, useMemo } from 'react'; // --- Constants & Config --- const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const UNIT = 40; // Pixel size of one grid unit const A_UNITS = 3; const B_UNITS = 4; const C_UNITS = 5; const COLORS = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 gridLine: '#334155', // Slate 700 a: '#06b6d4', // Cyan 500 (Neon) b: '#8b5cf6', // Violet 500 (Neon) c: '#10b981', // Emerald 500 (Neon) textMain: '#e2e8f0', // Slate 200 textSub: '#94a3b8', // Slate 400 accent: '#f59e0b', // Amber 500 danger: '#ef4444', // Red 500 }; // --- Geometry Helpers --- const ORIGIN_X = 340; const ORIGIN_Y = 420; // Triangle Vertices const P_CENTER = { x: ORIGIN_X, y: ORIGIN_Y }; // Right angle vertex const P_TOP = { x: ORIGIN_X, y: ORIGIN_Y - A_UNITS * UNIT }; // Top of A const P_RIGHT = { x: ORIGIN_X + B_UNITS * UNIT, y: ORIGIN_Y }; // Right of B // Calculate Hypotenuse Angle & Vectors for Grid C const DX = P_RIGHT.x - P_TOP.x; const DY = P_RIGHT.y - P_TOP.y; const ANGLE_RAD = Math.atan2(DY, DX); const ANGLE_DEG = (ANGLE_RAD * 180) / Math.PI; // Unit vectors for the tilted grid C // U points along the hypotenuse (down-right) // V points perpendicular (up-right) - "outwards" from the triangle const U = { x: Math.cos(ANGLE_RAD), y: Math.sin(ANGLE_RAD) }; const V = { x: Math.sin(ANGLE_RAD), y: -Math.cos(ANGLE_RAD) }; interface BlockData { id: number; sourceX: number; sourceY: number; targetX: number; targetY: number; color: string; delay: number; // For staggered animation } export const PythagoreanTheoremTech = () => { // Phase Control // 0: System Init / Grid Scan // 1: Draw Geometry (Triangle outlines) // 2: Materialize Blocks (A & B) // 3: Calculation / Analysis // 4: Migration (Proof) // 5: Completion / Result const [phase, setPhase] = useState(0); const [resetKey, setResetKey] = useState(0); // Generate Block Data const blocks = useMemo(() => { const _blocks: BlockData[] = []; let idCounter = 0; // --- Generate Blocks for A (3x3) --- // Target mapping: We'll map A's blocks to the center 3x3 of C for symmetry, or just linear fill. // Let's do a linear fill into C for simplicity and smoothness. for (let row = 0; row < A_UNITS; row++) { for (let col = 0; col < A_UNITS; col++) { // Source: Left of the vertical leg const sx = P_TOP.x - (A_UNITS - col) * UNIT; // Extending left const sy = P_TOP.y + row * UNIT; // We need to adjust source logic to match the visual "square" attached to the line // Square A is to the left of the vertical line P_TOP -> P_CENTER // Top-Left of Square A is (P_TOP.x - A_UNITS*UNIT, P_TOP.y) const trueSx = (P_TOP.x - A_UNITS * UNIT) + col * UNIT; const trueSy = P_TOP.y + row * UNIT; _blocks.push({ id: idCounter, sourceX: trueSx, sourceY: trueSy, targetX: 0, // Calculated below targetY: 0, // Calculated below color: COLORS.a, delay: 0 // Calculated below }); idCounter++; } } // --- Generate Blocks for B (4x4) --- for (let row = 0; row < B_UNITS; row++) { for (let col = 0; col < B_UNITS; col++) { // Square B is below the horizontal line P_CENTER -> P_RIGHT const trueSx = P_CENTER.x + col * UNIT; const trueSy = P_CENTER.y + row * UNIT; _blocks.push({ id: idCounter, sourceX: trueSx, sourceY: trueSy, targetX: 0, targetY: 0, color: COLORS.b, delay: 0 }); idCounter++; } } // --- Calculate Targets in C (5x5) --- // We map the 25 existing blocks to the 25 slots in C // Grid C starts at P_TOP and extends along U and V // However, strictly speaking, the square C is usually drawn "outside". // Since V points "up-right", extending by V creates the square away from the triangle. _blocks.forEach((block, index) => { // Map index to 5x5 grid const cCol = index % C_UNITS; const cRow = Math.floor(index / C_UNITS); // Position = P_TOP + (col * UNIT * U) + (row * UNIT * V) // Note: We usually fill from the hypotenuse "upwards" (along V) const tx = P_TOP.x + (cCol * UNIT * U.x) + ((cRow + 1) * UNIT * V.x); // +1 to shift it "up" one unit so it sits ON the line? // Actually, let's align the "bottom" of the grid C with the hypotenuse. // If V points UP-RIGHT, then row=0 is the bottom-most row touching the hypotenuse? // Let's verify V direction. // Vector P_TOP->P_RIGHT is (160, 120). // U = (0.8, 0.6). V = (0.6, -0.8). // V points Up-Right. Correct. // Let's position the top-left of the rotated unit square. // Block position P means the top-left corner of the block in unrotated space? // No, for the migration, we will translate the center or top-left. // Let's assume (x,y) is the top-left corner of the block before rotation. // To simplify, let's calculate the CENTER of the target block, and render blocks centered. // Source centers: block.sourceX += UNIT / 2; block.sourceY += UNIT / 2; // Target centers: // Start at P_TOP. Move col units along U, row units along V. // Center offset is 0.5 units. const cx = P_TOP.x + ((cCol * UNIT) + UNIT/2) * U.x + ((cRow * UNIT) + UNIT/2) * V.x; const cy = P_TOP.y + ((cCol * UNIT) + UNIT/2) * U.y + ((cRow * UNIT) + UNIT/2) * V.y; block.targetX = cx; block.targetY = cy; // Distance based delay for cool effect // Blocks further from the center move later block.delay = (cCol + cRow) * 0.05; }); return _blocks; }, []); // Animation Sequence useEffect(() => { let timer: NodeJS.Timeout; const run = async () => { setPhase(0); await wait(1000); // Init setPhase(1); // Geometry Lines await wait(1500); setPhase(2); // Blocks Appear await wait(1500); setPhase(3); // Analysis (Glows/Text) await wait(2000); setPhase(4); // Migrate await wait(5000); setPhase(5); // Equation await wait(4000); setResetKey(k => k + 1); // Loop }; run(); return () => clearTimeout(timer); }, [resetKey]); const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); return (

{/* SVG Container */}

); }; ```