Neon Border

<!-- Neon Border — animated glowing outline -->
<div class="nuda-neon-border">
  <span class="nuda-neon-border__inner">Neon Border</span>
</div>

/* ── Neon Border ─────────────────────────────────────────────
   A glowing arc sweeps around the outline via an animated conic
   gradient (@property angle). The inner panel masks the centre.
   Customize:
     --neon-border-color : primary neon hue
     --neon-border-speed : rotation cycle
   ──────────────────────────────────────────────────────────── */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.nuda-neon-border {
  --neon-border-color: #e4ff54;
  --neon-border-speed: 4s;
  position: relative;
  padding: 1.5px;
  border-radius: 14px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    var(--neon-border-color) 70deg,
    #62b6ff 140deg,
    transparent 210deg,
    transparent 360deg
  );
  isolation: isolate;
  animation: nuda-neon-border-spin var(--neon-border-speed) linear infinite;
  will-change: background;
}

.nuda-neon-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(228, 255, 84, 0.45);
  z-index: -1;
}

.nuda-neon-border__inner {
  display: block;
  padding: 22px 34px;
  background: #09090b;
  border-radius: 13px;
  color: #fbffe0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

@keyframes nuda-neon-border-spin { to { --angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-neon-border {
    animation: none;
    background: var(--neon-border-color);
  }
}