```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import * as Lucide from 'lucide-react'; export default function DataOverwriteAnimation() { const WIDTH = 1200; const HEIGHT = 700; // Animation Phases: // 0: Initial State (Full Disk) // 1: Deletion (Marked as Free) // 2: Insight (Data is still there) // 3: Writing (Overwriting process) // 4: Final (Data Lost) const [phase, setPhase] = useState(0); useEffect(() => { const sequence = [ { time: 3000, phase: 1 }, // Delete after 3s { time: 7000, phase: 2 }, // Show insight after 7s (4s duration) { time: 10000, phase: 3 }, // Start writing after 10s (3s duration) { time: 15000, phase: 4 }, // Final state after 15s (5s duration) ]; const timers = sequence.map(item => setTimeout(() => setPhase(item.phase), item.time) ); return () => timers.forEach(clearTimeout); }, []); // Grid configuration const ROWS = 6; const COLS = 10; const BLOCK_SIZE = 50; const GAP = 10; // Generate static block data once const blocks = useMemo(() => { const arr = []; for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { arr.push({ id: `r${r}-c${c}`, r, c, x: c * (BLOCK_SIZE + GAP), y: r * (BLOCK_SIZE + GAP), // Random binary content content: Math.random() > 0.5 ? '10' : '01' }); } } return arr; }, []); // Helper to determine block style based on phase const getBlockState = (index, currentPhase) => { // We only manipulate the first 60% of blocks to show contrast const isTarget = index < (blocks.length * 0.6); if (!isTarget) return 'static'; // Unaffected blocks if (currentPhase === 0) return 'active'; if (currentPhase === 1 || currentPhase === 2) return 'deleted'; if (currentPhase === 3) return 'writing'; // Logic handled in render for staggered effect if (currentPhase === 4) return 'overwritten'; return 'static'; }; return (

{/* Main Container constrained to requested dimensions */}

{/* TEXT LAYER */}

{phase === 0 && (

STATUS: ACTIVE

YOUR DATA

)} {(phase === 1 || phase === 2) && (

ACTION: DELETE

DELETION IS ILLUSION

)} {phase === 3 && (

ACTION: WRITE NEW FILES

OVERWRITING

)} {phase === 4 && (

STATUS: COMPLETED

GONE FOREVER

)}

{/* EXPLANATORY SUBTITLES (Bottom) */}

{phase === 1 && (

FILES MARKED "AVAILABLE" BUT BINARY REMAINS

)} {phase === 2 && (

INVISIBLE TO OS, VISIBLE TO RECOVERY TOOLS

)} {phase === 3 && (

NEW DATA PHYSICALLY REPLACES OLD SECTORS

)}

{/* VISUALIZATION LAYER (SVG) */}

{/* Progress Bar / Timeline Indicator */}

); } // Sub-component for individual memory blocks to handle complex transitions const BlockComponent = ({ x, y, size, phase, index, isTarget, baseText }) => { // Derived state for animation controls const variants = { active: { fill: '#ffffff', stroke: 'rgba(255,255,255,0)', strokeWidth: 0, opacity: 1, scale: 1 }, deleted: { fill: 'rgba(0,0,0,0)', stroke: '#ef4444', strokeWidth: 2, opacity: 0.4, scale: 0.9 }, writing: { fill: '#facc15', stroke: '#facc15', strokeWidth: 0, opacity: 1, scale: 1.1 }, overwritten: { fill: '#facc15', stroke: 'none', opacity: 1, scale: 1 }, static: { fill: '#1f2937', stroke: 'none', opacity: 0.5, scale: 1 } }; // Determine current variant key let currentVariant = 'static'; let delay = 0; if (isTarget) { if (phase === 0) currentVariant = 'active'; else if (phase === 1 || phase === 2) currentVariant = 'deleted'; else if (phase === 3) { // While writing, we stagger the transition to yellow // We can't easily do a "progress" scan in pure state without many re-renders // So we use delay based on index currentVariant = 'overwritten'; delay = index * 0.05; // Stagger effect } else if (phase === 4) currentVariant = 'overwritten'; } // Text content logic let displayText = baseText; let textColor = '#6b7280'; if (isTarget) { if (phase === 0) textColor = '#000000'; if (phase === 1 || phase === 2) { displayText = "FREE"; textColor = '#ef4444'; } if (phase === 3 || phase === 4) { displayText = "NEW"; textColor = '#000000'; } } return ( {/* Text Label inside block */} {displayText} {/* "Ghost" Indicator for deleted phase */} {(phase === 1 || phase === 2) && isTarget && ( )} ); }; ```