Tube Light

<!-- Tube Light — animated neon tube fill -->
<div class="nuda-neon-tube">
  <span class="nuda-neon-tube__fill"></span>
</div>

/* ── Tube Light ──────────────────────────────────────────────
   A glowing band travels along the tube by shifting a gradient's
   background-position (GPU-friendly, no layout work).
   Customize:
     --neon-tube-color : neon hue
     --neon-tube-speed : sweep cycle
   ──────────────────────────────────────────────────────────── */
.nuda-neon-tube {
  --neon-tube-color: #e4ff54;
  --neon-tube-speed: 2.6s;
  position: relative;
  width: 220px;
  height: 12px;
  border-radius: 99px;
  background: #16161c;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

.nuda-neon-tube__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(228, 255, 84, 0) 0%,
    var(--neon-tube-color) 30%,
    #aef0ff 50%,
    var(--neon-tube-color) 70%,
    rgba(228, 255, 84, 0) 100%
  );
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(228, 255, 84, 0.6);
  animation: nuda-neon-tube-fill var(--neon-tube-speed) linear infinite;
  will-change: background-position;
}

@keyframes nuda-neon-tube-fill {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-neon-tube__fill {
    animation: none;
    background-position: 50% 0;
  }
}