生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 ネオンサイン

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

    <div class="ambient-light" id="ambient"></div>
    <div class="neon-container">
        /* ここにテキストを入れる */
        <div id="neon-text">-JavaScript-</div>
    </div>

        const neon = document.getElementById('neon-text');
        const ambient = document.getElementById('ambient');
        
        // 色の設定（ここを変えるだけで全体の雰囲気が変わります）
        const colorRGB = "255, 0, 255"; 
        const colorHex = "#ff00ff";

        function animateNeon() {
            // 1. 微細な震え (Wobble)
            // 常に1px〜3px程度のランダムな揺れを加える
            const wobble = Math.random() * 4;

            // 2. フリッカー（点滅）ロジック
            let opacity = 1;
            const rand = Math.random();

            // 1%の確率で激しい瞬き
            if (rand > 0.98) {
                opacity = Math.random() * 0.3;
            } 
            // 0.5%の確率で一瞬完全に消える（スパーク）
            else if (rand < 0.005) {
                opacity = 0;
            }

            // 3. 多層テクスチャ・シャドウの動的生成
            // 内側から外側へ：白 -> 薄い色 -> 濃い色 -> 遠くの光
            const shadows = [
                `0 0 ${2 + wobble}px #fff`,
                `0 0 ${10 + wobble}px #fff`,
                `0 0 ${20 + wobble}px ${colorHex}`,
                `0 0 ${40 + wobble}px ${colorHex}`,
                `0 0 ${70 + wobble}px ${colorHex}`,
                `0 0 ${120 + wobble}px rgba(${colorRGB}, 0.5)`
            ].join(',');

            // スタイルの適用
            neon.style.textShadow = shadows;
            neon.style.opacity = opacity;

            // 背景の照り返しも同期させる
            ambient.style.background = `radial-gradient(circle, rgba(${colorRGB}, ${0.05 * opacity}) 0%, transparent 70%)`;

            // 次の描画タイミングで再実行
            requestAnimationFrame(animateNeon);
        }

        // アニメーション開始
        animateNeon();

        // クリックで「再起動」演出
        neon.addEventListener('click', () => {
            neon.style.transition = 'none';
            neon.style.opacity = '0';
            setTimeout(() => {
                neon.style.transition = '0.05s';
                // 3回素早く点滅させてから復帰
                let count = 0;
                const restart = setInterval(() => {
                    neon.style.opacity = count % 2 === 0 ? '1' : '0.2';
                    count++;
                    if (count > 5) {
                        clearInterval(restart);
                        animateNeon();
                    }
                }, 60);
            }, 200);
        });

        /* 背景の照り返し（グロー効果） */
        .ambient-light {
            position: absolute;
            height: 100%;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        .neon-container {
            background-color: #08090a;
            text-align: center;
            position: relative;
            z-index: 10;
        }

        #neon-text {
            color: #ff00ff; /* メインのネオン色（マゼンタ） */
            font-family: 'Dancing Script', cursive;
            font-size: 2rem;
            text-transform: uppercase;
            letter-spacing: 0.2rem;
           /* 初期の影（JSで動的に上書きします） */
            text-shadow: 0 0 10px #fff;
            user-select: none;
            transition: opacity 0.05s ease-in-out;
        }