CLOCK-e-verse

1. Creating Different Sized Stars

// Random size calculation
const size = Math.random() * 3 + 1 + 'px';
star.style.width = size;
star.style.height = size;

Each star gets a random size between 1px and 4px using Math.random() * 3 + 1

2. Adding Glow Effects

Method 1: CSS Filter (Used in your code)

filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));

Example:

Method 2: Box Shadow (Enhanced)

box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 20px rgba(255, 255, 255, 0.4),
    0 0 30px rgba(255, 255, 255, 0.2);

Example:

3. Twinkle Animation

@keyframes twinkle {
    '0%, 100%': { opacity: '0.3', transform: 'scale(1)' },
    '50%': { opacity: '1', transform: 'scale(1.2)' },
}

// Applied with random delay
star.style.animationDelay = Math.random() * 3 + 's';

Twinkling stars:

4. Complete Star Creation Function

function createStars() {
    const starsContainer = document.getElementById('stars');
    const numStars = 150;
    
    for (let i = 0; i < numStars; i++) {
        const star = document.createElement('div');
        
        // Basic styling
        star.className = 'absolute bg-white rounded-full animate-twinkle';
        
        // Random position
        star.style.left = Math.random() * 100 + '%';
        star.style.top = Math.random() * 100 + '%';
        
        // Random size (1px to 4px)
        const size = Math.random() * 3 + 1 + 'px';
        star.style.width = size;
        star.style.height = size;
        
        // Random animation delay for natural effect
        star.style.animationDelay = Math.random() * 3 + 's';
        
        starsContainer.appendChild(star);
    }
}

5. Interactive Demo

Try the buttons above to see different star effects in action!

Stay tuned for more logic ....