Coin Shower
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-coins" role="img" aria-label="Coin shower reward">
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:5%; --d:0s; --dur:2.4s; --flip:1s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:14%; --d:.35s; --dur:2.9s; --flip:1.3s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:23%; --d:.7s; --dur:3.4s; --flip:1.6s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:32%; --d:1.05s; --dur:2.4s; --flip:1s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:41%; --d:1.4s; --dur:2.9s; --flip:1.3s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:50%; --d:0s; --dur:3.4s; --flip:1.6s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:59%; --d:.35s; --dur:2.4s; --flip:1s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:68%; --d:.7s; --dur:2.9s; --flip:1.3s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:77%; --d:1.05s; --dur:3.4s; --flip:1.6s"></span>
<span class="nuda-confetti-coins__coin" aria-hidden="true" style="left:86%; --d:1.4s; --dur:2.4s; --flip:1s"></span>
</div>CSS
/* Coin Shower
Lime-gold coins rain down while flipping on their axis.
Customize: container size, per-coin --d/--dur/--flip. */
.nuda-confetti-coins {
position: relative;
width: 160px;
height: 110px;
background: #09090b;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
}
.nuda-confetti-coins__coin {
position: absolute;
top: -20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff6c4, #e4ff54 45%, #b9c93f 80%);
box-shadow: 0 0 6px rgba(228, 255, 84, 0.5);
opacity: 0;
animation:
nuda-confetti-coins-fall var(--dur, 3s) linear var(--d, 0s) infinite,
nuda-confetti-coins-flip var(--flip, 1.2s) linear var(--d, 0s) infinite;
}
@keyframes nuda-confetti-coins-fall {
0% { opacity: 0; transform: translateY(-20px); }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; transform: translateY(128px); }
}
@keyframes nuda-confetti-coins-flip {
0% { transform: scaleX(1); }
50% { transform: scaleX(0.15); }
100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.nuda-confetti-coins__coin {
animation: none;
opacity: 1;
top: auto;
bottom: 8px;
transform: none;
}
}How to use Coin Shower
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.