```tsx 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { FileCode, Database, Cpu, ArrowRight, Binary, Layers } from 'lucide-react'; // --- Configuration --- const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#0f172a', // Deep Space panel: '#1e293b', // Slate 800 panelBorder: '#334155', grid: 'rgba(148, 163, 184, 0.1)', text: '#f1f5f9', textDim: '#94a3b8', primary: '#38bdf8', // Sky 400 (Field IDs) secondary: '#a78bfa', // Violet 400 (Values) accent: '#34d399', // Emerald 400 (Wire Types) highlight: '#fbbf24', // Amber 400 (Logic/Bits) stream: '#22d3ee', // Cyan 400 (Output) danger: '#f87171', // Red (MSB bits) }; // --- Helper: Delay --- const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); export default function ProtobufAnimation() { // --- State --- // Phases: // 0: Intro/Idle // 1: Read Schema (Proto & Data) // 2: Tag 1 Calculation (Field 1, Wire 0) // 3: Value 1 Calculation (Varint 300) // 4: Tag 2 Calculation (Field 2, Wire 2) // 5: Value 2 Calculation (String "Hi") // 6: Finished const [phase, setPhase] = useState(0); const [step, setStep] = useState(0); // Sub-steps for detailed animations const [streamBytes, setStreamBytes] = useState>([]); const [resetKey, setResetKey] = useState(0); // --- Animation Sequence --- useEffect(() => { let mounted = true; const run = async () => { // Reset setStreamBytes([]); setPhase(0); setStep(0); await wait(1000); // Phase 1: Read Data if(!mounted) return; setPhase(1); await wait(2000); // Phase 2: Tag 1 (Field 1, Wire 0) -> 0x08 if(!mounted) return; setPhase(2); setStep(0); // Show Formula await wait(1500); setStep(1); // Show Binary await wait(1500); setStreamBytes(prev => [...prev, { val: '08', type: 'tag', label: 'Tag #1' }]); await wait(1000); // Phase 3: Value 1 (300 -> Varint) -> AC 02 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); // Swap Endian await wait(1500); setStreamBytes(prev => [...prev, { val: 'AC', type: 'val', label: 'Val(LSB)' }]); await wait(500); setStreamBytes(prev => [...prev, { val: '02', type: 'val', label: 'Val(MSB)' }]); await wait(1000); // Phase 4: Tag 2 (Field 2, Wire 2) -> 0x12 if(!mounted) return; setPhase(4); setStep(0); // Highlight await wait(1000); setStep(1); // Calc await wait(1500); setStreamBytes(prev => [...prev, { val: '12', type: 'tag', label: 'Tag #2' }]); await wait(1000); // Phase 5: Value 2 ("Hi" -> Len + Ascii) -> 02 48 69 if(!mounted) return; setPhase(5); setStep(0); // Show String await wait(1000); setStep(1); // Calc Len await wait(1000); setStreamBytes(prev => [...prev, { val: '02', type: 'len', label: 'Length' }]); await wait(1000); setStep(2); // ASCII await wait(1500); setStreamBytes(prev => [...prev, { val: '48', type: 'val', label: "'H'" }]); await wait(500); setStreamBytes(prev => [...prev, { val: '69', type: 'val', label: "'i'" }]); await wait(2000); // Phase 6: Done if(!mounted) return; setPhase(6); await wait(5000); setResetKey(k => k + 1); }; run(); return () => { mounted = false; }; }, [resetKey]); // --- Components --- const Label = ({ x, y, text, color = COLORS.textDim, size = 14, align = "start" }) => ( {text} ); const CodeLine = ({ y, active, children }) => ( {active && } {children} ); // --- Render --- return (

{/* CSS Styles for Glow & Animations */} {/* Background Grid */} {/* --- LEFT PANEL: SOURCE --- */}

{/* Proto Definition */}

player.proto

{/* Input Data */} = 1 ? 1 : 0, x: phase >= 1 ? 0 : -20 }} style={{ background: COLORS.panel, border: `1px solid ${COLORS.panelBorder}`, borderRadius: 8, padding: 20 }} >

Data (Object)

{/* --- CENTER PANEL: PROCESSOR --- */}

{/* --- BOTTOM PANEL: STREAM OUTPUT --- */}

{/* --- CONNECTING LINES --- */}

); } ```