Kihoro-Code/fluid-cursor-magic
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Fluid Cursor Demo</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/react@18/umd/react.development.js"></script>9 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>10 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>11</head>12<body class="bg-black text-white min-h-screen flex items-center justify-center">13 <div id="root" class="w-full h-full"></div>14 <script type="text/babel">15 const { useEffect, useRef } = React;16 17 function SplashCursor() {18 const canvasRef = useRef(null);19 20 useEffect(() => {21 const canvas = canvasRef.current;22 if (!canvas) return;23 24 const ctx = canvas.getContext('2d');25 canvas.width = window.innerWidth;26 canvas.height = window.innerHeight;27 28 let mouseX = 0;29 let mouseY = 0;30 let particles = [];31 32 class Particle {33 constructor() {34 this.x = Math.random() * canvas.width;35 this.y = Math.random() * canvas.height;36 this.size = Math.random() * 15 + 1;37 this.speedX = Math.random() * 3 - 1.5;38 this.speedY = Math.random() * 3 - 1.5;39 }40 41 update() {42 this.x += this.speedX;43 this.y += this.speedY;44 if (this.size > 0.2) this.size -= 0.1;45 }46 47 draw() {48 ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';49 ctx.beginPath();50 ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);51 ctx.fill();52 }53 }54 55 function init() {56 particles = Array(50).fill().map(() => new Particle());57 }58 59 function animate() {60 ctx.clearRect(0, 0, canvas.width, canvas.height);61 62 for (let i = 0; i < particles.length; i++) {63 particles[i].update();64 particles[i].draw();65 66 for (let j = i; j < particles.length; j++) {67 const dx = particles[i].x - particles[j].x;68 const dy = particles[i].y - particles[j].y;69 const distance = Math.sqrt(dx * dx + dy * dy);70 71 if (distance < 100) {72 ctx.strokeStyle = `rgba(255, 255, 255, ${1 - distance/100})`;73 ctx.lineWidth = 0.5;74 ctx.beginPath();75 ctx.moveTo(particles[i].x, particles[i].y);76 ctx.lineTo(particles[j].x, particles[j].y);77 ctx.stroke();78 }79 }80 }81 requestAnimationFrame(animate);82 }83 84 init();85 animate();86 87 const handleMouseMove = (e) => {88 mouseX = e.clientX;89 mouseY = e.clientY;90 91 for (let i = 0; i < 5; i++) {92 particles.push(new Particle());93 particles[particles.length - 1].x = mouseX;94 particles[particles.length - 1].y = mouseY;95 }96 };97 98 window.addEventListener('mousemove', handleMouseMove);99 window.addEventListener('resize', () => {100 canvas.width = window.innerWidth;101 canvas.height = window.innerHeight;102 });103 104 return () => {105 window.removeEventListener('mousemove', handleMouseMove);106 };107 }, []);108 109 return (110 <div className="fixed top-0 left-0 z-50 pointer-events-none">111 <canvas ref={canvasRef} id="fluid" className="w-screen h-screen" />112 </div>113 );114 }115 116 function App() {117 return (118 <div className="relative w-full h-screen overflow-hidden">119 <div className="absolute inset-0 flex items-center justify-center z-50">120 <h1 className="text-6xl font-bold text-center bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 text-transparent bg-clip-text">Move your cursor around!</h1>121</div>122 <SplashCursor />123 </div>124 );125 }126 127 const root = ReactDOM.createRoot(document.getElementById('root'));128 root.render(<App />);129 </script>130</body>131</html>132