From d9e9dcd6e898dfa09916f8891c0c53cff1b19d84 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Tue, 21 Oct 2025 22:31:50 +0200 Subject: [PATCH] Dvd thingy --- public/logo.png | Bin 11179 -> 13118 bytes src/app/layout.tsx | 6 +- src/components/Background.tsx | 235 +++++++++------------------------- 3 files changed, 69 insertions(+), 172 deletions(-) diff --git a/public/logo.png b/public/logo.png index 9014853e90eb4b88144a35464195a2e144668621..af0314a09fb6959ccda54236f51f59af30db4edc 100644 GIT binary patch literal 13118 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 literal 11179 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 uDB}|Vz-it8E&iv3|9Qgy) { return ( - {children} + + +
{children}
+ + ); } diff --git a/src/components/Background.tsx b/src/components/Background.tsx index 56234b4..3294dd2 100644 --- a/src/components/Background.tsx +++ b/src/components/Background.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import React, { useEffect, useRef, useState } from "react"; @@ -7,183 +7,76 @@ export default function Background({ }: Readonly<{ children: React.ReactNode; }>) { - const canvasRef = useRef(null); - const animationRef = useRef(0); - const particlesRef = useRef([]); - const [dimensions, setDimensions] = useState<{ width: number; height: number }>({ - width: 0, - height: 0, - }); - - // Particle configuration - const config = { - particleCount: 400, - maxDistance: 120, - particleSpeed: 0.5, - particleSize: 2, - lineOpacity: 0.6, - particleOpacity: 0.8, - colors: { - particles: "#f5304c", // blue-400 - connections: "#f5304c", // blue-500 - }, - }; - - // Particle class - class Particle { - x: number; - y: number; - vx: number; - vy: number; - size: number; - - constructor(width: number, height: number) { - this.x = Math.random() * width; - this.y = Math.random() * height; - this.vx = (Math.random() - 0.5) * config.particleSpeed; - this.vy = (Math.random() - 0.5) * config.particleSpeed; - this.size = config.particleSize + Math.random() * 2; - } - - update(width: number, height: number) { - this.x += this.vx; - this.y += this.vy; - - // Bounce off edges - if (this.x < 0 || this.x > width) { - this.vx = -this.vx; - this.x = Math.max(0, Math.min(width, this.x)); - } - if (this.y < 0 || this.y > height) { - this.vy = -this.vy; - this.y = Math.max(0, Math.min(height, this.y)); - } - } - - draw(ctx: CanvasRenderingContext2D) { - ctx.beginPath(); - ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); - ctx.fillStyle = `${config.colors.particles}${Math.round( - config.particleOpacity * 255 - ) - .toString(16) - .padStart(2, "0")}`; - ctx.fill(); - } - } - - // Initialize particles - const initParticles = (width: number, height: number) => { - particlesRef.current = []; - for (let i = 0; i < config.particleCount; i++) { - particlesRef.current.push(new Particle(width, height)); - } - }; - - // Draw connections between nearby particles - const drawConnections = (ctx: CanvasRenderingContext2D, particles: Particle[]) => { - for (let i = 0; i < particles.length; i++) { - for (let j = i + 1; j < particles.length; j++) { - const dx = particles[i].x - particles[j].x; - const dy = particles[i].y - particles[j].y; - const distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < config.maxDistance) { - const opacity = 1 - distance / config.maxDistance; - ctx.beginPath(); - ctx.moveTo(particles[i].x, particles[i].y); - ctx.lineTo(particles[j].x, particles[j].y); - ctx.strokeStyle = `${config.colors.connections}${Math.round( - opacity * config.lineOpacity * 255 - ) - .toString(16) - .padStart(2, "0")}`; - ctx.lineWidth = 1; - ctx.stroke(); - } - } - } - }; - - // Animation loop - const animate = () => { - const canvas = canvasRef.current; - if (!canvas) return; - - const ctx = canvas.getContext("2d"); - if (!ctx) return; - - const { width, height } = dimensions; - - // Clear canvas - ctx.clearRect(0, 0, width, height); - - // Update and draw particles - particlesRef.current.forEach((particle) => { - particle.update(width, height); - particle.draw(ctx); - }); - - // Draw connections - drawConnections(ctx, particlesRef.current); - - animationRef.current = requestAnimationFrame(animate); - }; - - // Handle window resize - const handleResize = () => { - const canvas = canvasRef.current; - if (!canvas || !canvas.parentElement) return; - - const rect = canvas.parentElement.getBoundingClientRect(); - const width = rect.width; - const height = rect.height; - - const dpr = window.devicePixelRatio || 1; - canvas.width = width * dpr; - canvas.height = height * dpr; - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; - - const ctx = canvas.getContext("2d"); - if (ctx) { - ctx.setTransform(1, 0, 0, 1, 0, 0); // reset scaling before re-scaling - ctx.scale(dpr, dpr); - } - - setDimensions({ width, height }); - }; + const [pos, setPos] = useState({ x: 100, y: 100 }); + const [vel, setVel] = useState({ x: 1, y: 1 }); + const dvdRef = useRef(null); useEffect(() => { - handleResize(); - window.addEventListener("resize", handleResize); + let frame: number; + let x = pos.x; + let y = pos.y; + let vx = vel.x; + let vy = vel.y; - return () => { - window.removeEventListener("resize", handleResize); - if (animationRef.current) { - cancelAnimationFrame(animationRef.current); - } + const speed = 0.8; + const size = 120; + + // helper for collision detection + const detectCollision = ( + nextX: number, + nextY: number, + w: number, + h: number + ) => { + let collidedX = false; + let collidedY = false; + + // Left or Right wall + if (nextX <= 0 || nextX + size >= w) collidedX = true; + + // Top or Bottom wall + if (nextY <= 0 || nextY + size >= h) collidedY = true; + + return { collidedX, collidedY }; }; + + const animate = () => { + const w = window.innerWidth; + const h = window.innerHeight; + + const nextX = x + vx * speed; + const nextY = y + vy * speed; + + const { collidedX, collidedY } = detectCollision(nextX, nextY, w, h); + + if (collidedX) vx *= -1; + if (collidedY) vy *= -1; + + x += vx * speed; + y += vy * speed; + + setPos({ x, y }); + setVel({ x: vx, y: vy }); + + frame = requestAnimationFrame(animate); + }; + + frame = requestAnimationFrame(animate); + return () => cancelAnimationFrame(frame); }, []); - useEffect(() => { - if (dimensions.width && dimensions.height) { - initParticles(dimensions.width, dimensions.height); - animate(); - } - - return () => { - if (animationRef.current) { - cancelAnimationFrame(animationRef.current); - } - }; - }, [dimensions]); - return (
- - - {children} + Logo +
{children}
); -}; +}