import React, { useState, useEffect, useMemo, useRef } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { FileText, Trash2, HardDrive, RefreshCcw, AlertTriangle, Usb, CheckCircle2, XCircle } from 'lucide-react'; // Animation phases const PHASE = { IDLE: 0, DELETING: 1, DELETED_GHOST: 2, USB_INSERT: 3, OVERWRITING: 4, LOST: 5, }; const COLORS = { bg: '#050505', primary: '#facc15', // Yellow secondary: '#f97316', // Orange danger: '#ef4444', // Red new: '#3b82f6', // Blue text: '#ffffff', dim: '#374151', ghost: '#4b5563', }; const WIDTH = 1200; const HEIGHT = 700; const DataBlock = ({ id, index, state, content }) => { // State: 'active' | 'ghost' | 'new' | 'empty' let bgColor = 'transparent'; let borderColor = COLORS.dim; let textColor = COLORS.dim; let opacity = 0.3; let scale = 1; if (state === 'active') { bgColor = 'rgba(250, 204, 21, 0.1)'; borderColor = COLORS.primary; textColor = COLORS.primary; opacity = 1; } else if (state === 'ghost') { bgColor = 'rgba(75, 85, 99, 0.1)'; borderColor = COLORS.ghost; textColor = COLORS.ghost; opacity = 0.6; // Visible but dim } else if (state === 'new') { bgColor = 'rgba(59, 130, 246, 0.2)'; borderColor = COLORS.new; textColor = COLORS.new; opacity = 1; } return ( {content} {state === 'ghost' && ( FREE )} ); }; export default function DataOverwriteAnimation() { const [phase, setPhase] = useState(PHASE.IDLE); const timerRef = useRef(null); // Generate static random binary data for the grid const gridData = useMemo(() => { return Array.from({ length: 40 }).map((_, i) => ({ id: i, val: Math.random() > 0.5 ? '1' : '0' })); }, []); useEffect(() => { // Sequence Controller const runSequence = async () => { // 0s: Idle - Show File await new Promise(r => setTimeout(r, 2000)); // 2s: Delete Action setPhase(PHASE.DELETING); await new Promise(r => setTimeout(r, 1500)); // 3.5s: Ghost State (Explanation) setPhase(PHASE.DELETED_GHOST); await new Promise(r => setTimeout(r, 4000)); // 7.5s: USB Insert setPhase(PHASE.USB_INSERT); await new Promise(r => setTimeout(r, 2000)); // 9.5s: Overwriting setPhase(PHASE.OVERWRITING); await new Promise(r => setTimeout(r, 3000)); // 12.5s: Lost setPhase(PHASE.LOST); }; runSequence(); return () => { if (timerRef.current) clearTimeout(timerRef.current); }; }, []); // Compute Grid State based on Phase const getBlockState = (index) => { // Let's say indices 10-25 are our "Target File" const isTarget = index >= 10 && index < 26; if (!isTarget) return 'empty'; // Background noise if (phase === PHASE.IDLE || phase === PHASE.DELETING) return 'active'; if (phase === PHASE.DELETED_GHOST || phase === PHASE.USB_INSERT) return 'ghost'; if (phase === PHASE.OVERWRITING || phase === PHASE.LOST) return 'new'; return 'empty'; }; const getBlockContent = (index, originalVal) => { const isTarget = index >= 10 && index < 26; if (isTarget && (phase === PHASE.OVERWRITING || phase === PHASE.LOST)) { return originalVal === '1' ? '0' : '1'; // Inverted/New data } return originalVal; }; return (

{/* --- HEADER --- */}

STORAGE MECHANICS

DATA PERSISTENCE

SSD_VOL_01

STATUS: {phase === PHASE.LOST ? 'OVERWRITTEN' : 'ACTIVE'}

{/* --- MAIN CONTENT AREA --- */}

{/* LEFT PANEL: OS VIEW (USER PERCEPTION) */}

USER INTERFACE VIEW

{phase <= PHASE.DELETING && (

secret_plans.pdf

2.4 MB

)} {phase >= PHASE.DELETED_GHOST && phase < PHASE.USB_INSERT && (

ITEM DELETED

)} {phase >= PHASE.USB_INSERT && (

{phase === PHASE.OVERWRITING && ( )}

WRITING NEW DATA...

holiday_photos.jpg

)}

{/* RIGHT PANEL: DISK VIEW (REALITY) */}

PHYSICAL DISK SECTORS

{gridData.map((block, i) => ( ))}

{/* STATUS INDICATOR OVERLAY */}

{phase === PHASE.IDLE && ( FILE STORED AT SECTOR 0x1A )} {phase === PHASE.DELETING && ( DELETING REFERENCE... )} {phase === PHASE.DELETED_GHOST && (

MARKED AS "FREE"

BINARY DATA REMAINS INTACT

)} {phase === PHASE.OVERWRITING && ( OVERWRITING SECTORS... )} {phase === PHASE.LOST && (

ORIGINAL DATA DESTROYED

RECOVERY IMPOSSIBLE )}

{/* CONNECTION LINES (SVG OVERLAY) */}

{/* --- FOOTER / TIMELINE --- */}

= PHASE.OVERWRITING ? COLORS.danger : COLORS.primary, boxShadow: `0 0 20px ${phase >= PHASE.OVERWRITING ? COLORS.danger : COLORS.primary}` }} initial={{ width: '0%' }} animate={{ width: phase === PHASE.LOST ? '100%' : `${(phase / 5) * 100}%` }} transition={{ duration: 1 }} />

); }