ui/aiverse-starfield.js

/**
 * AIverse Starfield Generator
 *
 * Generates a random starfield background with twinkling stars.
 * Used by all AIverse-themed pages (games, playgrounds, landing).
 *
 * Usage:
 *   <div class="starfield" aria-hidden="true">
 *     <div class="starfield__layer" id="starfieldLayer"></div>
 *   </div>
 *   <script src="../../js/ui/aiverse-starfield.js"></script>
 *
 * @fileoverview Starfield background generator
 * @author Alexander Wolf
 * @version 1.0
 */

(function () {
    'use strict';

    var layer = document.getElementById('starfieldLayer');
    if (!layer) return;

    var STAR_COUNT = 100;
    var sizes = ['sm', 'md', 'lg'];
    var frag = document.createDocumentFragment();

    for (var i = 0; i < STAR_COUNT; i++) {
        var star = document.createElement('div');
        var size = sizes[Math.floor(Math.random() * 3)];
        star.className = 'starfield__star starfield__star--' + size;

        if (Math.random() < 0.3) {
            star.classList.add('starfield__star--twinkle');
            star.style.animationDelay = (Math.random() * 4).toFixed(1) + 's';
        }

        star.style.left = (Math.random() * 100).toFixed(1) + '%';
        star.style.top  = (Math.random() * 100).toFixed(1) + '%';
        frag.appendChild(star);
    }

    layer.appendChild(frag);
})();