Rain
A copy-paste weather & ambient component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Weather & AmbientHTMLCSSany framework
Copy into your project
HTML
<!-- Rain (add more drops for density) -->
<div class="nuda-weather-rain" role="img" aria-label="Falling rain">
<span class="nuda-weather-rain__drop" style="left:5%; --wr-d:0s; --wr-dur:.8s; --wr-h:14px"></span>
<span class="nuda-weather-rain__drop" style="left:14%; --wr-d:.12s; --wr-dur:1s; --wr-h:20px"></span>
<span class="nuda-weather-rain__drop" style="left:23%; --wr-d:.24s; --wr-dur:.9s; --wr-h:16px"></span>
<span class="nuda-weather-rain__drop" style="left:32%; --wr-d:.36s; --wr-dur:1.1s;--wr-h:14px"></span>
<span class="nuda-weather-rain__drop" style="left:41%; --wr-d:.48s; --wr-dur:.8s; --wr-h:20px"></span>
<span class="nuda-weather-rain__drop" style="left:50%; --wr-d:.6s; --wr-dur:1s; --wr-h:16px"></span>
<span class="nuda-weather-rain__drop" style="left:59%; --wr-d:.12s; --wr-dur:.9s; --wr-h:14px"></span>
<span class="nuda-weather-rain__drop" style="left:68%; --wr-d:.24s; --wr-dur:1.1s;--wr-h:20px"></span>
<span class="nuda-weather-rain__drop" style="left:77%; --wr-d:.36s; --wr-dur:.8s; --wr-h:16px"></span>
<span class="nuda-weather-rain__drop" style="left:86%; --wr-d:.48s; --wr-dur:1s; --wr-h:14px"></span>
<span class="nuda-weather-rain__drop" style="left:95%; --wr-d:.6s; --wr-dur:.9s; --wr-h:20px"></span>
</div>CSS
/* Rain
Slanted streaks falling at varying speeds.
Customize: --rain-color, container size, individual --wr-d/--wr-dur/--wr-h. */
.nuda-weather-rain {
--rain-color: #e4ff54;
position: relative;
width: 100%;
max-width: 320px;
aspect-ratio: 5 / 3;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(180deg, #13131a, #09090b);
}
.nuda-weather-rain__drop {
position: absolute;
top: -20px;
width: 1px;
height: var(--wr-h, 16px);
background: linear-gradient(180deg, transparent, var(--rain-color));
opacity: 0.7;
will-change: transform;
animation: nuda-weather-rain-fall var(--wr-dur, 1s) linear var(--wr-d, 0s) infinite;
}
@keyframes nuda-weather-rain-fall {
0% { transform: translate3d(0, -20px, 0); opacity: 0; }
10% { opacity: 0.7; }
100% { transform: translate3d(-10px, 140px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-weather-rain__drop { animation: none; opacity: 0.25; transform: none; }
}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.