Implemented cryptomining, although its extremely bad optimized.
This commit is contained in:
@@ -0,0 +1,167 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
interface GlitchCrashProps {
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
const GlitchCrash = ({ onComplete }: GlitchCrashProps) => {
|
||||
const [phase, setPhase] = useState(0);
|
||||
const [glitchText, setGlitchText] = useState('');
|
||||
|
||||
const errorMessages = [
|
||||
'BUFFER OVERFLOW DETECTED',
|
||||
'STACK SMASHING DETECTED',
|
||||
'SEGMENTATION FAULT',
|
||||
'MEMORY CORRUPTION',
|
||||
'KERNEL PANIC',
|
||||
'SYSTEM HALTED',
|
||||
'0xDEADBEEF',
|
||||
'FATAL ERROR',
|
||||
'CORE DUMPED',
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
const chars = '!@#$%^&*()_+-=[]{}|;:,.<>?/~`░▒▓█▀▄▌▐■□▢▣▤▥▦▧▨▩';
|
||||
let text = '';
|
||||
for (let i = 0; i < 100; i++) {
|
||||
text += chars[Math.floor(Math.random() * chars.length)];
|
||||
if (i % 20 === 19) text += '\n';
|
||||
}
|
||||
setGlitchText(text);
|
||||
}, 50);
|
||||
|
||||
const phaseTimer = setInterval(() => {
|
||||
setPhase(p => p + 1);
|
||||
}, 800);
|
||||
|
||||
const endTimer = setTimeout(() => {
|
||||
onComplete?.();
|
||||
}, 8000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
clearInterval(phaseTimer);
|
||||
clearTimeout(endTimer);
|
||||
};
|
||||
}, [onComplete]);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="fixed inset-0 z-[9999] bg-background overflow-hidden"
|
||||
style={{
|
||||
animation: 'glitchShake 0.1s infinite',
|
||||
}}
|
||||
>
|
||||
<style>{`
|
||||
@keyframes glitchShake {
|
||||
0% { transform: translate(0, 0) skew(0deg); }
|
||||
20% { transform: translate(-5px, 3px) skew(1deg); }
|
||||
40% { transform: translate(5px, -2px) skew(-1deg); }
|
||||
60% { transform: translate(-3px, 5px) skew(0.5deg); }
|
||||
80% { transform: translate(3px, -5px) skew(-0.5deg); }
|
||||
100% { transform: translate(0, 0) skew(0deg); }
|
||||
}
|
||||
@keyframes glitchColor {
|
||||
0% { filter: hue-rotate(0deg) saturate(2) brightness(1.5); }
|
||||
25% { filter: hue-rotate(90deg) saturate(3) brightness(2); }
|
||||
50% { filter: hue-rotate(180deg) saturate(2) brightness(1); }
|
||||
75% { filter: hue-rotate(270deg) saturate(4) brightness(2.5); }
|
||||
100% { filter: hue-rotate(360deg) saturate(2) brightness(1.5); }
|
||||
}
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Glitch color overlay */}
|
||||
<div
|
||||
className="absolute inset-0 mix-blend-overlay"
|
||||
style={{ animation: 'glitchColor 0.3s infinite' }}
|
||||
/>
|
||||
|
||||
{/* Scanlines */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px)',
|
||||
animation: 'scanline 0.5s linear infinite',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Random noise */}
|
||||
<pre className="absolute inset-0 text-primary/30 text-xs overflow-hidden font-mono p-4">
|
||||
{glitchText}
|
||||
{glitchText}
|
||||
{glitchText}
|
||||
{glitchText}
|
||||
{glitchText}
|
||||
</pre>
|
||||
|
||||
{/* Error messages */}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
{errorMessages.slice(0, Math.min(phase + 1, errorMessages.length)).map((msg, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: Math.random() * 200 - 100 }}
|
||||
animate={{
|
||||
opacity: [0, 1, 1, 0.5],
|
||||
x: [Math.random() * 100 - 50, 0, Math.random() * 50 - 25],
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="font-minecraft text-xl md:text-3xl text-destructive mb-2"
|
||||
style={{
|
||||
textShadow: '0 0 10px currentColor, 0 0 20px currentColor',
|
||||
transform: `rotate(${Math.random() * 10 - 5}deg)`,
|
||||
}}
|
||||
>
|
||||
{msg}
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Final message */}
|
||||
{phase > 6 && (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: [0, 1.2, 1] }}
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="font-minecraft text-4xl md:text-6xl text-primary text-glow-strong mb-4">
|
||||
SYSTEM OVERFLOW
|
||||
</div>
|
||||
<div className="font-pixel text-lg text-foreground/80">
|
||||
You broke the matrix. Congratulations.
|
||||
</div>
|
||||
<div className="font-pixel text-sm text-foreground/50 mt-4">
|
||||
(Refreshing in a moment...)
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Glitch bars */}
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute bg-primary/50"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
width: `${Math.random() * 300 + 50}px`,
|
||||
height: `${Math.random() * 20 + 2}px`,
|
||||
animation: `glitchShake ${0.1 + Math.random() * 0.2}s infinite`,
|
||||
opacity: Math.random(),
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlitchCrash;
|
||||
Reference in New Issue
Block a user