File size: 3,706 Bytes
d790e98 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import React, { useEffect, useRef } from 'react';
const BackgroundAnimation: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
// Star parameters
const numStars = 400;
const speed = 2; // Speed of travel
const stars: { x: number; y: number; z: number; o: number }[] = [];
// Initialize stars
for (let i = 0; i < numStars; i++) {
stars.push({
x: Math.random() * width - width / 2,
y: Math.random() * height - height / 2,
z: Math.random() * width, // Depth
o: Math.random(), // Original z for resetting
});
}
const animate = () => {
// Clear screen with a slight fade trail for motion blur effect (optional, using clearRect for crispness now)
ctx.fillStyle = '#020617'; // Match slate-950
ctx.fillRect(0, 0, width, height);
const cx = width / 2;
const cy = height / 2;
stars.forEach((star) => {
// Move star closer
star.z -= speed;
// Reset if it passes the screen
if (star.z <= 0) {
star.z = width;
star.x = Math.random() * width - width / 2;
star.y = Math.random() * height - height / 2;
}
// Project 3D to 2D
// The factor 'width / star.z' makes things bigger as they get closer (z decreases)
const x = cx + (star.x / star.z) * width;
const y = cy + (star.y / star.z) * width;
// Calculate size based on proximity
const size = (1 - star.z / width) * 3;
// Calculate opacity based on proximity (fade in as they appear)
const opacity = (1 - star.z / width);
// Draw star
if (x >= 0 && x <= width && y >= 0 && y <= height) {
ctx.beginPath();
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
});
requestAnimationFrame(animate);
};
const animationId = requestAnimationFrame(animate);
const handleResize = () => {
width = window.innerWidth;
height = window.innerHeight;
canvas.width = width;
canvas.height = height;
};
window.addEventListener('resize', handleResize);
return () => {
cancelAnimationFrame(animationId);
window.removeEventListener('resize', handleResize);
};
}, []);
return (
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0 bg-slate-950">
<canvas ref={canvasRef} className="absolute inset-0" />
{/* Subtle Nebula Overlay for atmosphere */}
<div className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-blue-600/10 rounded-full mix-blend-screen filter blur-[120px] opacity-30 animate-blob" />
<div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-purple-600/10 rounded-full mix-blend-screen filter blur-[120px] opacity-30 animate-blob animation-delay-2000" />
</div>
);
};
export default BackgroundAnimation;
|