test

src/main.ts

@@ -1,59 +1,158 @@
 import './style.css';
 
-// Matrix rain effect
+// Beautiful Matrix Rain Background
 const canvas = document.getElementById('matrix') as HTMLCanvasElement;
 const ctx = canvas.getContext('2d')!;
 
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+let width = canvas.width = window.innerWidth;
+let height = canvas.height = window.innerHeight;
 
-const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+-=[]{}|;:,.<>?/~`';
-const fontSize = 14;
-const columns = canvas.width / fontSize;
-const drops: number[] = Array(Math.floor(columns)).fill(1);
+// Catppuccin Mocha colors
+const colors = {
+  green: '#a6e3a1',
+  blue: '#89b4fa',
+  mauve: '#cba6f7',
+  text: '#cdd6f4'
+};
 
-let mouseX = canvas.width / 2;
-let mouseY = canvas.height / 2;
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%';
+const fontSize = 12;
+const columns = Math.floor(width / fontSize);
+const drops: number[] = Array(columns).fill(1);
+
+// Mouse interaction
+let mouseX = width / 2;
+let mouseY = height / 2;
+
+// Trail effect
+const trail: { x: number; y: number; color: string; life: number }[] = [];
+
+function createExplosion(x: number, y: number) {
+  const color = Math.random() > 0.5 ? colors.green : colors.blue;
+  for (let i = 0; i < 12; i++) {
+    const angle = (Math.PI * 2 * i) / 12;
+    const speed = Math.random() * 2 + 1;
+    trail.push({
+      x: x + (Math.random() - 0.5) * 20,
+      y: y + (Math.random() - 0.5) * 20,
+      color: color,
+      life: 1
+    });
+  }
+}
 
 function draw() {
+  // Subtle fade for trails
   ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  
+  ctx.fillRect(0, 0, width, height);
+
+  // Draw trail with glow
+  if (trail.length > 0) {
+    ctx.font = `${fontSize}px monospace`;
+    ctx.globalAlpha = 0.3;
+    for (let i = trail.length - 1; i >= 0; i--) {
+      const t = trail[i];
+      ctx.fillStyle = t.color;
+      ctx.shadowBlur = 8;
+      ctx.shadowColor = t.color;
+      ctx.fillText(chars[Math.floor(Math.random() * chars.length)], t.x, t.y);
+      
+      t.life -= 0.03;
+      if (t.life <= 0) trail.splice(i, 1);
+    }
+    ctx.shadowBlur = 0;
+  }
+
+  // Matrix rain with distance-based brightness
   ctx.font = `${fontSize}px monospace`;
-  
   for (let i = 0; i < drops.length; i++) {
     const x = i * fontSize;
     const y = drops[i] * fontSize;
+    
+    // Calculate distance from cursor
     const dist = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
     
-    const text = chars[Math.floor(Math.random() * chars.length)];
+    // Brighter near cursor, dimmer elsewhere
+    const brightness = Math.max(0.2, 1 - dist / 250);
     
-    // Only show characters near cursor
-    const alpha = Math.max(0, 1 - dist / 250);
+    // Pick color based on distance
+    let color: string;
+    if (dist < 80) color = colors.green;
+    else if (dist < 150) color = colors.blue;
+    else color = colors.mauve;
     
-    if (alpha > 0.1) {
-      const color = dist < 120 ? '#a6e3a1' : dist < 200 ? '#89b4fa' : '#6c7086';
-      ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
-      ctx.fillText(text, x, y);
-    }
+    ctx.fillStyle = color;
+    ctx.fillText(chars[Math.floor(Math.random() * chars.length)], x, y);
     
-    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
+    if (drops[i] * fontSize > height + fontSize && Math.random() > 0.95) drops[i] = 0;
+    drops[i]++;
+  }
+
+  ctx.globalAlpha = 1;
+}
+
+function update() {
+  // Add trail around cursor
+  if (Math.random() > 0.4) {
+    const dist = Math.sqrt((mouseX - width/2) ** 2 + (mouseY - height/2) ** 2);
+    trail.push({
+      x: mouseX + (Math.random() - 0.5) * 20,
+      y: mouseY + (Math.random() - 0.5) * 20,
+      color: dist < 80 ? colors.green : colors.blue,
+      life: 1
+    });
+  }
+  if (trail.length > 10) trail.shift();
+  
+  // Update drops
+  for (let i = 0; i < drops.length; i++) {
+    if (drops[i] * fontSize > height + fontSize && Math.random() > 0.93) drops[i] = 0;
     drops[i]++;
   }
 }
 
-setInterval(draw, 33);
+function loop() {
+  update();
+  draw();
+  requestAnimationFrame(loop);
+}
 
+// Mouse movement
 window.addEventListener('mousemove', (e) => {
   mouseX = e.clientX;
   mouseY = e.clientY;
 });
 
-window.addEventListener('resize', () => {
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
+// Click explosion
+window.addEventListener('click', (e) => {
+  createExplosion(e.clientX, e.clientY);
 });
 
+// Touch support
+window.addEventListener('touchmove', (e) => {
+  if ('ontouchstart' in window) {
+    mouseX = e.touches[0].clientX;
+    mouseY = e.touches[0].clientY;
+  }
+}, { passive: true });
+
+window.addEventListener('touchstart', (e) => {
+  if ('ontouchstart' in window) {
+    createExplosion(e.touches[0].clientX, e.touches[0].clientY);
+  }
+}, { passive: true });
+
+// Resize handler
+function resize() {
+  width = canvas.width = window.innerWidth;
+  height = canvas.height = window.innerHeight;
+}
+
+window.addEventListener('resize', resize);
+resize();
+
+loop();
+
 // Copy functionality
 const commandBox = document.getElementById('commandBox') as HTMLDivElement;
 const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
@@ -83,7 +182,7 @@ commandBox.addEventListener('click', (e) => {
   if (!(e.target as HTMLElement).closest('.copy-btn')) copyToClipboard();
 });
 
-// Fade in docs link after 2 seconds
+// Fade in docs link after 3 seconds
 setTimeout(() => {
   document.getElementById('docsLink')?.classList.add('show');
-}, 2000);
+}, 3000);