# Paper Texture

> A copy-paste Noise & Grain component from NudaUI. Pure HTML + CSS, zero dependencies, MIT licensed.

| | |
| --- | --- |
| Id | `grain-paper` |
| Category | Noise & Grain (`noise-grain`) |
| Languages | html, css |
| Needs JavaScript | no |
| Licence | MIT |
| JSON | https://nudaui.dev/api/components/grain-paper.json |

## Code

Paste this verbatim. Nothing here needs a build step.

### HTML

```html
<!-- 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>
```

### CSS

```css
.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;
  }
}

```

### Preview-only CSS

Extra styling the live preview injects. Copy it only if you want the demo's exact framing.

```css

      .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}}
    
```

## Using it

- Drop the HTML wherever you need it — JSX, Blade, Jinja, ERB, or a plain `.html` file.
- Put the CSS in a global stylesheet, a `<style>` block, or whatever your build expects.
- Colour, size and timing read from CSS custom properties: override them on `:root` or any parent.
- Class names are prefixed `nuda-*`, so nothing collides with Tailwind utilities.

---

Canonical HTML version: https://nudaui.dev/components/grain-paper