feat: modify effects

R3DRUN3 · R3DRUN3 · commit f47b8b32ca17 · 2025-07-01T23:01:20.000+02:00
Signed-off-by: r3drun3 &lt;simone.ragonesi@protonmail.com&gt;
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -118,6 +118,24 @@ import Footer from '../components/Footer.astro';
         75% { transform: translate(-6px, -6px) skew(-3deg); }
         100% { transform: translate(0); }
       }
+@keyframes pixelate {
+  0% { filter: none; transform: scale(1); image-rendering: auto; }
+  50% { filter: blur(2px); transform: scale(0.9); image-rendering: pixelated; }
+ 100% { filter: none; transform: scale(1); image-rendering: auto; }
+}
+.animate-pixelate { animation: pixelate 0.8s steps(2) forwards; }
+  /* matrix rain canvas overlay */
+  #matrix-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 60;
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+  }
     </style>
   </head>
   <body class="bg-background text-foreground font-sans">
@@ -227,6 +245,34 @@ import Footer from '../components/Footer.astro';
 
         
         const glitchEl = document.getElementById('glitch-overlay');
+        const matrixEl = document.createElement('canvas');
+        matrixEl.id = 'matrix-canvas';
+        document.body.append(matrixEl);
+        const mCtx = matrixEl.getContext('2d');
+        function matrixEffect(duration = 800) {
+          matrixEl.width = window.innerWidth;
+          matrixEl.height = window.innerHeight;
+          const cols = Math.floor(matrixEl.width / 20) + 1;
+          const drops = Array(cols).fill(0);
+          matrixEl.style.opacity = '1';
+          const draw = () => {
+            mCtx.fillStyle = 'rgba(0,0,0,0.05)';
+            mCtx.fillRect(0, 0, matrixEl.width, matrixEl.height);
+            mCtx.fillStyle = '#0f0';
+            mCtx.font = '15px monospace';
+            drops.forEach((y, i) => {
+              const text = String.fromCharCode(0x30A0 + Math.random() * 96);
+              mCtx.fillText(text, i * 20, y * 20);
+              drops[i] = y * 20 > matrixEl.height || Math.random() > 0.975 ? 0 : y + 1;
+            });
+          };
+          const timer = setInterval(draw, 50);
+          setTimeout(() => {
+            clearInterval(timer);
+            matrixEl.style.opacity = '0';
+            mCtx.clearRect(0, 0, matrixEl.width, matrixEl.height);
+          }, duration);
+        }
         (function glitchLoop() {
           const timeout = Math.random() * 6000 + 2000;
           setTimeout(() => {
@@ -257,6 +303,16 @@ import Footer from '../components/Footer.astro';
             document.documentElement.addEventListener('animationend', () => {
               document.documentElement.classList.remove('animate-shake');
             }, { once: true });
+            // random additional effect: matrix rain or pixelate
+            const extra = Math.random();
+            if (extra < 0.4) {
+              matrixEffect(1000);
+            } else if (extra < 0.8) {
+              root.classList.add('animate-pixelate');
+              root.addEventListener('animationend', () => {
+                root.classList.remove('animate-pixelate');
+              }, { once: true });
+            }
             glitchEl.classList.add('animate-glitch');
             glitchEl.addEventListener('animationend', () => {
               glitchEl.classList.remove('animate-glitch');
