リアルタイム風フィード通知

<div class="d09-02-10-panel">
          <div class="d09-02-10-bar">
            <span class="d09-02-10-live"></span>アクティビティ
          </div>
          <div class="d09-02-10-feed"></div>
        </div>

.d09-02-10-panel{width:100%;max-width:280px;background:#fff;border:1px solid #e5e8f0;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(30,40,60,.08)}
        .d09-02-10-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1f2430;color:#fff;font-size:13px;font-weight:600}
        .d09-02-10-live{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:d270blink 1.6s ease-in-out infinite}
        .d09-02-10-feed{max-height:170px;overflow-y:auto;padding:6px 10px}
        .d09-02-10-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid #f0f2f6;animation:d270in .4s ease both}
        .d09-02-10-row:last-child{border-bottom:none}
        .d09-02-10-av{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
        .d09-02-10-info{flex:1;font-size:12px;line-height:1.35;color:#3a4152}
        .d09-02-10-info b{color:#1f2430}
        .d09-02-10-time{font-size:10px;color:#a5abb8;flex:none}
        @keyframes d270blink{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}50%{box-shadow:0 0 0 5px rgba(74,222,128,0)}}
        @keyframes d270in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

(function(){
        var root=document.getElementById('item-09-02-10');
        var feed=root.querySelector('.d09-02-10-feed');
        var names=['田中','佐藤','鈴木','高橋','山本','伊藤','渡辺'];
        var acts=['が登録しました','がコメントしました','をお気に入りに追加','が投稿を公開','がフォローしました'];
        var colors=['#6366f1','#ec4899','#f59e0b','#10b981','#3b82f6','#8b5cf6'];
        function add(){
          var nm=names[Math.floor(Math.random()*names.length)];
          var ac=acts[Math.floor(Math.random()*acts.length)];
          var c=colors[Math.floor(Math.random()*colors.length)];
          var row=document.createElement('div');
          row.className='d09-02-10-row';
          row.innerHTML='<span class="d09-02-10-av" style="background:'+c+'">'+nm.charAt(0)+'</span><span class="d09-02-10-info"><b>'+nm+'さん</b>'+ac+'</span><span class="d09-02-10-time">たった今</span>';
          feed.insertBefore(row,feed.firstChild);
          while(feed.children.length>8)feed.removeChild(feed.lastChild);
        }
        add();add();
        setInterval(add,2600);
      })();