Emoji Rain
A copy-paste confetti & celebration component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Confetti & CelebrationHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-confetti-emoji" role="img" aria-label="Emoji rain celebration">
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:4%; --d:0s; --dur:3s; --r:-10deg">🎉</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:13%; --d:.4s; --dur:4s; --r:13deg">🎊</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:22%; --d:.8s; --dur:5s; --r:-6deg">✨</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:31%; --d:1.2s; --dur:3s; --r:9deg">🥳</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:40%; --d:1.6s; --dur:4s; --r:-12deg">🎈</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:49%; --d:0s; --dur:5s; --r:5deg">⭐</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:58%; --d:.4s; --dur:3s; --r:-8deg">🎉</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:67%; --d:.8s; --dur:4s; --r:11deg">✨</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:76%; --d:1.2s; --dur:5s; --r:-4deg">🎊</span>
<span class="nuda-confetti-emoji__drop" aria-hidden="true" style="left:85%; --d:1.6s; --dur:3s; --r:7deg">🥳</span>
</div>CSS
/* Emoji Rain
Celebration emoji fall and tumble down a panel.
Customize: emoji glyphs, container size, per-drop --d/--dur/--r. */
.nuda-confetti-emoji {
position: relative;
width: 160px;
height: 110px;
background: #09090b;
border: 1px solid rgba(228, 255, 84, 0.18);
border-radius: 12px;
overflow: hidden;
}
.nuda-confetti-emoji__drop {
position: absolute;
top: -24px;
font-size: 18px;
line-height: 1;
opacity: 0;
animation: nuda-confetti-emoji-fall var(--dur, 4s) linear var(--d, 0s) infinite;
}
@keyframes nuda-confetti-emoji-fall {
0% { opacity: 0; transform: translateY(-24px) rotate(var(--r, 0deg)); }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; transform: translateY(130px) rotate(calc(var(--r, 0deg) + 80deg)); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-confetti-emoji__drop {
animation: none;
opacity: 1;
top: auto;
bottom: 8px;
transform: none;
}
}How to use Emoji 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.