Swipe to Delete

<div class="nuda-swd" role="list">
  <div class="nuda-swd__item" role="listitem">
    <div class="nuda-swd__bg">Delete</div>
    <div class="nuda-swd__row">
      <span class="nuda-swd__avatar"></span>
      <div class="nuda-swd__text">
        <strong>Anna Reyes</strong>
        <span>Sent the design files</span>
      </div>
    </div>
  </div>
</div>

/* Swipe to Delete
   Row that slides left to reveal a delete button.
   Customize: --swd-danger, --swd-bg */

.nuda-swd {
  --swd-danger: #ef4444;
  --swd-bg: #111114;
  width: 280px;
  background: #0c0c10;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-swd__item {
  position: relative;
  height: 64px;
}

.nuda-swd__bg {
  position: absolute;
  inset: 0;
  background: var(--swd-danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
  font: 600 12px/1 system-ui;
}

.nuda-swd__row {
  position: absolute;
  inset: 0;
  background: var(--swd-bg);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  animation: nuda-swd-slide 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform;
}

.nuda-swd__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4ff54, #10b981);
  flex-shrink: 0;
}

.nuda-swd__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 500 11px/1.2 system-ui;
}

.nuda-swd__text strong { color: #fafafa; font-weight: 600; }
.nuda-swd__text span { color: #63636e; }

@keyframes nuda-swd-slide {
  0%, 15% { transform: translateX(0); }
  45%, 75% { transform: translateX(-80px); }
  95%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-swd__row { animation: none; transform: translateX(-80px); }
}