Skip to main content
Dracos
Date & Time Display
Sunday, April 12, 2026
12:34:56
AM
Interactive Cursor Background</titl<a href="#ed-2498539079" class="wv-link-elm"></a>e>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.text-overlay {
text-align: center;
color: white;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
pointer-events: auto;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
font-weight: 300;
letter-spacing: 2px;
}
p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 300;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="content">
<div class="text-overlay">
<h1>Move Your Mouse</h1>
<p>Watch the background interact with your cursor</p>
</div>
</div>
<div class="script-placeholder"></div><!--script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let mouse = { x: canvas.width / 2, y: canvas.height / 2 };
let particles = [];
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.baseX = x;
this.baseY = y;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.radius = Math.random() * 3 + 2;
this.color = 'rgb(255, 255, 255)';
this.alpha = 1;
this.life = Math.random() * 60 + 40;
this.maxLife = this.life;
}
update() {
this.life--;
this.alpha = this.life / this.maxLife;
// Move towards base position
this.x += (this.baseX - this.x) * 0.05;
this.y += (this.baseY - this.y) * 0.05;
// Add slight drift
this.x += this.vx * 0.1;
this.y += this.vy * 0.1;
}
draw(ctx) {
ctx.save();
ctx.fillStyle = this.color;
ctx.globalAlpha = this.alpha;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
isAlive() {
return this.life > 0;
}
}
function createParticles(x, y) {
for (let i = 0; i < 4; i++) {
particles.push(new Particle(x, y));
}
}
// Create gradient background
function drawBackground() {
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
// Dynamic grayscale based on mouse position
const darkness = (mouse.x / canvas.width) * 50 + 10;
gradient.addColorStop(0, `rgb(${darkness}, ${darkness}, ${darkness})`);
gradient.addColorStop(0.5, `rgb(${darkness + 20}, ${darkness + 20}, ${darkness + 20})`);
gradient.addColorStop(1, `rgb(${darkness - 5}, ${darkness - 5}, ${darkness - 5})`);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Draw cursor glow
function drawCursorGlow() {
const gradient = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 150);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.1)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.fillRect(mouse.x - 150, mouse.y - 150, 300, 300);
}
// Draw cursor ring
function drawCursorRing() {
ctx.save();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 30, 0, Math.PI * 2);
ctx.stroke();
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(mouse.x, mouse.y, 50, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
}
function animate() {
drawBackground();
drawCursorGlow();
drawCursorRing();
// Update and draw particles
particles = particles.filter(p => p.isAlive());
particles.forEach(p => {
p.update();
p.draw(ctx);
});
requestAnimationFrame(animate);
}
// Mouse tracking
document.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
// Create particles on movement
if (Math.random() > 0.7) {
createParticles(mouse.x, mouse.y);
}
});
// Touch support for mobile
document.addEventListener('touchmove', (e) => {
if (e.touches.length > 0) {
mouse.x = e.touches[0].clientX;
mouse.y = e.touches[0].clientY;
if (Math.random() > 0.7) {
createParticles(mouse.x, mouse.y);
}
}
});
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Start animation
animate();
</script-->
</body>
</html>