```tsx 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // --- Configuration & Constants --- const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#0f172a', // Deep Space panelBg: '#1e293b', // Dark Slate grid: '#334155', // Grid Lines primary: '#06b6d4', // Cyan (Tag/Key) secondary: '#8b5cf6', // Violet (Value/Data) accent: '#10b981', // Emerald (Wire Type/Bits) highlight: '#f59e0b', // Amber (MSB/Varint logic) danger: '#ef4444', // Red (Cut lines) text: '#e2e8f0', // Light text textDim: '#64748b', // Dim text stream: '#22d3ee', // Stream flow color }; // --- Helper Functions --- const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); // --- Components --- export default function ProtobufAnimation() { // Animation State // 0: Init // 1: Schema & Data Load // 2: Serialize Field 1 (Varint Tag) // 3: Serialize Field 1 (Varint Value Logic) // 4: Serialize Field 2 (String Tag) // 5: Serialize Field 2 (String Len + Val) // 6: Final Stream Assembly const [phase, setPhase] = useState(0); const [step, setStep] = useState(0); // Micro-steps within phases const [resetKey, setResetKey] = useState(0); // --- Animation Script --- useEffect(() => { let mounted = true; const runSequence = async () => { // Phase 0: Boot setPhase(0); setStep(0); await wait(1500); // Phase 1: Load Schema if (!mounted) return; setPhase(1); await wait(1000); setStep(1); // Show Data await wait(1500); // Phase 2: Tag 1 (Field 1, WireType 0) if (!mounted) return; setPhase(2); setStep(0); // Highlight Field 1 await wait(1000); setStep(1); // Calculation (1 << 3 | 0) await wait(1500); setStep(2); // Result 0x08 moves to stream await wait(1000); // Phase 3: Varint Value (300) if (!mounted) return; setPhase(3); setStep(0); // Show 300 binary await wait(1500); setStep(1); // Split 7 bits await wait(1500); setStep(2); // Add MSB await wait(1500); setStep(3); // Little Endian Swap await wait(1500); setStep(4); // Move to stream await wait(1000); // Phase 4: Tag 2 (Field 2, WireType 2) if (!mounted) return; setPhase(4); setStep(0); // Highlight Field 2 await wait(1000); setStep(1); // Calc (2 << 3 | 2) await wait(1500); setStep(2); // Move 0x12 to stream await wait(1000); // Phase 5: String Value "Hi" if (!mounted) return; setPhase(5); setStep(0); // Show "Hi" await wait(1000); setStep(1); // Length calc await wait(1000); setStep(2); // ASCII encode await wait(1500); setStep(3); // Move to stream await wait(2000); // Phase 6: Complete if (!mounted) return; setPhase(6); await wait(5000); // Loop setResetKey(k => k + 1); }; runSequence(); return () => { mounted = false; }; }, [resetKey]); // --- Rendering Helpers --- // Common text style const TechText = ({ x, y, children, size = 16, color = COLORS.text, align = "start", bold = false, opacity = 1 }) => ( {children} ); // A data packet block const DataBlock = ({ x, y, label, subLabel, color, active, width = 60 }) => ( {label} {subLabel && {subLabel}} ); return (

); } ```