<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Million Gradio Developers with Fireworks</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #1a2a6c;
font-family: 'Arial', sans-serif;
overflow: hidden;
position: relative;
}
.container {
text-align: center;
position: relative;
z-index: 10;
}
svg {
max-width: 100%;
height: auto;
}
.text-stroke {
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
animation: dash 3s linear forwards;
fill: transparent;
font-weight: bold;
font-size: 60px;
}
.counter {
font-size: 80px;
color: white;
font-weight: bold;
margin-bottom: 20px;
}
.firework {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
pointer-events: none;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
fill: white;
}
}
@keyframes firework {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
70% {
opacity: 0.8;
}
100% {
transform: translate(var(--tx), var(--ty)) scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="counter" id="counter">0</div>
<svg width="800" height="200" viewBox="0 0 800 200">
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="text-stroke">Gradio Developers</text>
</svg>
</div>
<script>
// Counter animation
const counter = document.getElementById('counter');
let count = 0;
const target = 1000000;
const duration = 3000;
const increment = target / (duration / 16);
function animateCounter() {
if (count < target) {
count += increment;
if (count > target) count = target;
counter.textContent = Math.floor(count).toLocaleString();
requestAnimationFrame(animateCounter);
if (Math.random() < 0.3) createFirework();
} else {
// Create more fireworks when counter reaches target
setInterval(createFirework, 300);
}
}
// Firework animation
function createFirework() {
const firework = document.createElement('div');
firework.className = 'firework';
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const color = `hsl(${Math.random() * 60 + 190}, 100%, 50%)`;
firework.style.left = x + 'px';
firework.style.top = y + 'px';
firework.style.backgroundColor = color;
document.body.appendChild(firework);
// Create particles
const particleCount = 30 + Math.floor(Math.random() * 20);
for (let i = 0; i < particleCount; i++) {
createParticle(x, y, color);
}
setTimeout(() => {
firework.remove();
}, 1000);
}
function createParticle(x, y, color) {
const particle = document.createElement('div');
particle.className = 'firework';
const angle = Math.random() * Math.PI * 2;
const radius = 50 + Math.random() * 100;
const size = 2 + Math.random() * 3;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.backgroundColor = color;
particle.style.setProperty('--tx', (Math.cos(angle) * radius) + 'px');
particle.style.setProperty('--ty', (Math.sin(angle) * radius) + 'px');
particle.style.left = x + 'px';
particle.style.top = y + 'px';
particle.style.animation = 'firework 0.8s linear forwards';
document.body.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 800);
}
// Start animations after a short delay
setTimeout(() => {
animateCounter();
// Initial fireworks
for (let i = 0; i < 5; i++) {
setTimeout(createFirework, i * 200);
}
}, 500);
// Resize SVG text on window resize
function resizeText() {
const svg = document.querySelector('svg');
const newWidth = Math.min(window.innerWidth - 40, 800);
svg.setAttribute('width', newWidth);
}
window.addEventListener('resize', resizeText);
resizeText();
</script>
</body>
</html>