Paper Texture

<!-- Paper Texture — animated paper-fibre noise surface -->
<div class="nuda-grain-paper">
  <div class="nuda-grain-paper__fibre" aria-hidden="true"></div>
  <span class="nuda-grain-paper__label">Paper</span>
</div>

.nuda-grain-paper {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#13130f,#09090b);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  isolation: isolate;
}

.nuda-grain-paper__fibre {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  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: 200px 200px;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: _paperDrift 24s ease-in-out infinite alternate;
}

.nuda-grain-paper__label {
  position: relative;
  z-index: 1;
  font-family: ui-serif,Georgia,serif;
  font-size: 20px;
  font-style: italic;
  color: #e4ff54;
}

@keyframes _paperDrift {
  0% {
    transform: translate3d(0,0,0) rotate(0deg);
  }
  100% {
    transform: translate3d(-18px,-12px,0) rotate(.5deg);
  }
}

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