# Rain

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

| | |
| --- | --- |
| Id | `rain` |
| Category | Particles & Effects (`particles`) |
| Languages | html, css |
| Needs JavaScript | no |
| Licence | MIT |
| JSON | https://nudaui.dev/api/components/rain.json |

## Code

Paste this verbatim. Nothing here needs a build step.

### HTML

```html
<!-- Rain -->
<div class="nuda-rain" role="img" aria-label="Rain">
  <span class="nuda-rain__drop" style="left:5%;  --d:0s;   --dur:.9s"></span>
  <span class="nuda-rain__drop" style="left:14%; --d:.15s; --dur:1s"></span>
  <span class="nuda-rain__drop" style="left:24%; --d:.3s;  --dur:.8s"></span>
  <span class="nuda-rain__drop" style="left:34%; --d:.45s; --dur:1.1s"></span>
  <span class="nuda-rain__drop" style="left:44%; --d:.6s;  --dur:.9s"></span>
  <span class="nuda-rain__drop" style="left:54%; --d:0s;   --dur:1s"></span>
  <span class="nuda-rain__drop" style="left:64%; --d:.15s; --dur:.8s"></span>
  <span class="nuda-rain__drop" style="left:74%; --d:.3s;  --dur:1.1s"></span>
  <span class="nuda-rain__drop" style="left:84%; --d:.45s; --dur:.9s"></span>
  <span class="nuda-rain__drop" style="left:94%; --d:.6s;  --dur:1s"></span>
  <!-- ...more drops for density -->
</div>
```

### CSS

```css
/* Rain
   Vertical streaks falling at varying speeds.
   Customize: --rain-color, container size, individual --d/--dur. */

.nuda-rain {
  --rain-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(228, 255, 84, 0.05), transparent);
  overflow: hidden;
  border-radius: 8px;
}

.nuda-rain__drop {
  position: absolute;
  top: -12px;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, var(--rain-color));
  opacity: 0.7;
  animation: nuda-rain-fall var(--dur, 1s) linear var(--d, 0s) infinite;
}

@keyframes nuda-rain-fall {
  0%   { transform: translateY(-14px); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translateY(calc(100% + 14px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-rain__drop { animation: none; opacity: 0; }
}
```

### Preview-only CSS

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

```css

      .nuda-rain{position:relative;width:100px;height:100px;background:linear-gradient(180deg,rgba(228,255,84,.05),transparent);overflow:hidden;border-radius:8px}
      .nuda-rain__drop{position:absolute;top:-12px;width:1px;height:14px;background:linear-gradient(180deg,transparent,#e4ff54);opacity:.7;animation:_rn-fall var(--dur) linear var(--d) infinite}
      @keyframes _rn-fall{0%{transform:translateY(-14px);opacity:0}10%{opacity:.7}100%{transform:translateY(110px);opacity:0}}
    
```

## 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/rain