Sandstorm Drift

<!-- Sandstorm Drift — horizontally blowing soft noise haze -->
<div class="nuda-ng2-sandstorm">
  <div class="nuda-ng2-sandstorm__haze" aria-hidden="true"></div>
  <span class="nuda-ng2-sandstorm__label">DUNE-07</span>
</div>

.nuda-ng2-sandstorm {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg,#3a3319,#09090b 75%);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  isolation: isolate;
}

.nuda-ng2-sandstorm__haze {
  position: absolute;
  inset: -30% -60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: _nuda-ng2sandstorm-blow 18s linear infinite;
}

.nuda-ng2-sandstorm__label {
  position: relative;
  z-index: 1;
  font-family: ui-sans-serif,system-ui,sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #e4ff54;
}

@keyframes _nuda-ng2sandstorm-blow {
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(-140px,0,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ng2-sandstorm__haze {
    animation: none;
  }
}