add animated background
Some checks failed
Frontend Build and Deploy / build (push) Failing after 12s
Some checks failed
Frontend Build and Deploy / build (push) Failing after 12s
This commit is contained in:
334
src/components/MatrixBackground.tsx
Normal file
334
src/components/MatrixBackground.tsx
Normal file
@@ -0,0 +1,334 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface Dot {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
connections: number[];
|
||||
brightness: number;
|
||||
targetBrightness: number;
|
||||
}
|
||||
|
||||
interface Connection {
|
||||
from: number;
|
||||
to: number;
|
||||
brightness: number;
|
||||
targetBrightness: number;
|
||||
thickness: number;
|
||||
targetThickness: number;
|
||||
}
|
||||
|
||||
const MatrixBackground: React.FC = () => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const animationRef = useRef<number>(0);
|
||||
const dotsRef = useRef<Dot[]>([]);
|
||||
const connectionsRef = useRef<Connection[]>([]);
|
||||
const mouseRef = useRef({ x: 0, y: 0 });
|
||||
const [, setDimensions] = useState({ width: 0, height: 0 });
|
||||
|
||||
// Configuration
|
||||
const config = {
|
||||
dotCount: 300,
|
||||
maxConnections: 3,
|
||||
connectionDistance: 150,
|
||||
dotSpeed: 0.3,
|
||||
hoverRadius: 120,
|
||||
baseBrightness: 0.25, // Reduced to 30% opacity (0.3 * 0.3)
|
||||
hoverBrightness: 0.6, // Reduced hover brightness
|
||||
baseThickness: 0.5,
|
||||
hoverThickness: 1.5,
|
||||
fadeSpeed: 0.08, // Slightly faster fade for better responsiveness
|
||||
};
|
||||
|
||||
// Initialize dots
|
||||
const initializeDots = (width: number, height: number) => {
|
||||
const dots: Dot[] = [];
|
||||
for (let i = 0; i < config.dotCount; i++) {
|
||||
dots.push({
|
||||
x: Math.random() * width,
|
||||
y: Math.random() * height,
|
||||
vx: (Math.random() - 0.5) * config.dotSpeed,
|
||||
vy: (Math.random() - 0.5) * config.dotSpeed,
|
||||
connections: [],
|
||||
brightness: config.baseBrightness,
|
||||
targetBrightness: config.baseBrightness,
|
||||
});
|
||||
}
|
||||
return dots;
|
||||
};
|
||||
|
||||
// Calculate connections between dots
|
||||
const calculateConnections = (dots: Dot[]) => {
|
||||
const connections: Connection[] = [];
|
||||
|
||||
for (let i = 0; i < dots.length; i++) {
|
||||
const dot = dots[i];
|
||||
dot.connections = [];
|
||||
|
||||
const distances: { index: number; distance: number }[] = [];
|
||||
|
||||
for (let j = 0; j < dots.length; j++) {
|
||||
if (i === j) continue;
|
||||
|
||||
const dx = dot.x - dots[j].x;
|
||||
const dy = dot.y - dots[j].y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < config.connectionDistance) {
|
||||
distances.push({ index: j, distance });
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by distance and take closest connections
|
||||
distances.sort((a, b) => a.distance - b.distance);
|
||||
const maxConnections = Math.min(config.maxConnections, distances.length);
|
||||
|
||||
for (let k = 0; k < maxConnections; k++) {
|
||||
const targetIndex = distances[k].index;
|
||||
|
||||
// Avoid duplicate connections
|
||||
const existing = connections.find(
|
||||
conn => (conn.from === i && conn.to === targetIndex) ||
|
||||
(conn.from === targetIndex && conn.to === i)
|
||||
);
|
||||
|
||||
if (!existing) {
|
||||
dot.connections.push(targetIndex);
|
||||
connections.push({
|
||||
from: i,
|
||||
to: targetIndex,
|
||||
brightness: config.baseBrightness,
|
||||
targetBrightness: config.baseBrightness,
|
||||
thickness: config.baseThickness,
|
||||
targetThickness: config.baseThickness,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return connections;
|
||||
};
|
||||
|
||||
// Update hover effects
|
||||
const updateHoverEffects = (dots: Dot[], connections: Connection[], mouseX: number, mouseY: number) => {
|
||||
// Reset all targets to base values
|
||||
dots.forEach(dot => {
|
||||
dot.targetBrightness = config.baseBrightness;
|
||||
});
|
||||
|
||||
connections.forEach(conn => {
|
||||
conn.targetBrightness = config.baseBrightness;
|
||||
conn.targetThickness = config.baseThickness;
|
||||
});
|
||||
|
||||
// Check which dots are near the mouse
|
||||
let hoveredCount = 0;
|
||||
dots.forEach((dot, index) => {
|
||||
const dx = dot.x - mouseX;
|
||||
const dy = dot.y - mouseY;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (distance < config.hoverRadius) {
|
||||
hoveredCount++;
|
||||
const intensity = 1 - (distance / config.hoverRadius);
|
||||
dot.targetBrightness = config.baseBrightness +
|
||||
(config.hoverBrightness - config.baseBrightness) * intensity;
|
||||
|
||||
// Brighten connected lines
|
||||
connections.forEach(conn => {
|
||||
if (conn.from === index || conn.to === index) {
|
||||
conn.targetBrightness = config.baseBrightness +
|
||||
(config.hoverBrightness - config.baseBrightness) * intensity * 0.7;
|
||||
conn.targetThickness = config.baseThickness +
|
||||
(config.hoverThickness - config.baseThickness) * intensity;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth transitions
|
||||
dots.forEach(dot => {
|
||||
dot.brightness += (dot.targetBrightness - dot.brightness) * config.fadeSpeed;
|
||||
});
|
||||
|
||||
connections.forEach(conn => {
|
||||
conn.brightness += (conn.targetBrightness - conn.brightness) * config.fadeSpeed;
|
||||
conn.thickness += (conn.targetThickness - conn.thickness) * config.fadeSpeed;
|
||||
});
|
||||
};
|
||||
|
||||
// Animation loop
|
||||
const animate = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const { width, height } = canvas;
|
||||
|
||||
// Clear canvas with dark blue background
|
||||
ctx.fillStyle = '#0a0f1a';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
const dots = dotsRef.current;
|
||||
const connections = connectionsRef.current;
|
||||
|
||||
// Update dot positions
|
||||
dots.forEach(dot => {
|
||||
dot.x += dot.vx;
|
||||
dot.y += dot.vy;
|
||||
|
||||
// Bounce off edges
|
||||
if (dot.x <= 0 || dot.x >= width) {
|
||||
dot.vx *= -1;
|
||||
dot.x = Math.max(0, Math.min(width, dot.x));
|
||||
}
|
||||
if (dot.y <= 0 || dot.y >= height) {
|
||||
dot.vy *= -1;
|
||||
dot.y = Math.max(0, Math.min(height, dot.y));
|
||||
}
|
||||
});
|
||||
|
||||
// Recalculate connections periodically for smooth movement
|
||||
if (Math.random() < 0.02) {
|
||||
connectionsRef.current = calculateConnections(dots);
|
||||
}
|
||||
|
||||
// Update hover effects
|
||||
updateHoverEffects(dots, connections, mouseRef.current.x, mouseRef.current.y);
|
||||
|
||||
// Draw connections
|
||||
connections.forEach(conn => {
|
||||
const fromDot = dots[conn.from];
|
||||
const toDot = dots[conn.to];
|
||||
|
||||
if (!fromDot || !toDot) return;
|
||||
|
||||
ctx.strokeStyle = `rgba(100, 200, 255, ${conn.brightness * 0.3})`; // Changed to blue with 30% opacity
|
||||
ctx.lineWidth = conn.thickness;
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(fromDot.x, fromDot.y);
|
||||
ctx.lineTo(toDot.x, toDot.y);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
// Draw dots
|
||||
dots.forEach(dot => {
|
||||
ctx.fillStyle = `rgba(100, 200, 255, ${dot.brightness * 0.3})`; // Changed to blue with 30% opacity
|
||||
ctx.beginPath();
|
||||
ctx.arc(dot.x, dot.y, 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Add subtle glow
|
||||
ctx.shadowColor = `rgba(100, 200, 255, ${dot.brightness * 0.15})`; // Reduced glow opacity
|
||||
ctx.shadowBlur = 4;
|
||||
ctx.beginPath();
|
||||
ctx.arc(dot.x, dot.y, 1.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
});
|
||||
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// Handle resize
|
||||
const handleResize = () => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
// Set canvas size to window size
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
canvas.style.width = `${window.innerWidth}px`;
|
||||
canvas.style.height = `${window.innerHeight}px`;
|
||||
|
||||
setDimensions({ width: window.innerWidth, height: window.innerHeight });
|
||||
|
||||
// Reinitialize dots for new dimensions
|
||||
dotsRef.current = initializeDots(window.innerWidth, window.innerHeight);
|
||||
connectionsRef.current = calculateConnections(dotsRef.current);
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log(`MatrixBackground: Canvas resized to ${window.innerWidth}x${window.innerHeight}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle mouse movement
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
mouseRef.current = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('MatrixBackground: Canvas not found');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('MatrixBackground: Canvas found, initializing...');
|
||||
}
|
||||
|
||||
// Initial setup
|
||||
handleResize();
|
||||
|
||||
// Start animation
|
||||
const startAnimation = () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
startAnimation();
|
||||
|
||||
// Event listeners
|
||||
window.addEventListener('resize', handleResize);
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('MatrixBackground: Animation started');
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (animationRef.current) {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('MatrixBackground: Cleanup completed');
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="fixed inset-0"
|
||||
style={{
|
||||
zIndex: 0,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
backgroundColor: '#0a0f1a', // Dark blue background
|
||||
pointerEvents: 'none'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default MatrixBackground;
|
||||
Reference in New Issue
Block a user