*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.starfield-wrapper {
position: relative;
width: 100%;
max-width: 800px;
height: 400px;
background: #0f172a;
overflow: hidden;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
#star-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.star-content {
position: relative;
z-index: 2;
text-align: center;
color: #ffffff;
pointer-events: none;
padding: 20px;
}
.star-content h2 {
font-size: 2.5rem;
margin: 0 0 10px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.star-content p {
color: #cbd5e1;
font-size: 1.125rem;
margin: 0;
}
const canvas = document.getElementById("star-canvas");
const ctx = canvas.getContext("2d");
// Set fixed dimensions for the demo
canvas.width = 800;
canvas.height = 400;
const stars = new Array();
for (let i = 0; i < 150; i++) {
const star = new Object();
star.x = Math.random() * canvas.width;
star.y = Math.random() * canvas.height;
star.radius = Math.random() * 1.5;
star.speed = Math.random() * 0.5 + 0.1;
stars.push(star);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ffffff";
stars.forEach(function(s) {
ctx.beginPath();
ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2);
ctx.fill();
// Move the star down
s.y += s.speed;
// Reset star to top when it falls off screen
if (s.y > canvas.height) {
s.y = 0;
s.x = Math.random() * canvas.width;
}
});
window.requestAnimationFrame(draw);
}
draw();
