Rain
A copy-paste particles & effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Particles & EffectsHTMLCSSany framework
Copy into your project
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
/* 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; }
}How to use Rain
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.