Falling Ash
A copy-paste particles & effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Particles & EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Falling Ash -->
<div class="nuda-pt2-falling-ash" role="img" aria-label="Ash falling through smoky air">
<span class="nuda-pt2-falling-ash__flake" style="left:2%; --s:3px; --d:0s; --dur:5s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:9%; --s:2px; --d:.4s; --dur:6s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:16%; --s:4px; --d:.8s; --dur:7s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:23%; --s:2px; --d:1.2s; --dur:8s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:30%; --s:3px; --d:1.6s; --dur:5s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:37%; --s:4px; --d:2s; --dur:6s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:44%; --s:2px; --d:2.4s; --dur:7s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:51%; --s:3px; --d:0s; --dur:8s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:58%; --s:4px; --d:.4s; --dur:5s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:65%; --s:2px; --d:.8s; --dur:6s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:72%; --s:3px; --d:1.2s; --dur:7s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:79%; --s:4px; --d:1.6s; --dur:8s; --sway:12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:86%; --s:2px; --d:2s; --dur:5s; --sway:-12px"></span>
<span class="nuda-pt2-falling-ash__flake" style="left:93%; --s:3px; --d:2.4s; --dur:6s; --sway:12px"></span>
</div>CSS
.nuda-pt2-falling-ash {
position: relative;
width: 100%;
max-width: 220px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(180deg,#141312,#0a0a0a);
}
.nuda-pt2-falling-ash__flake {
position: absolute;
top: -8px;
width: var(--s);
height: var(--s);
border-radius: 1px;
background: #b9b9ad;
opacity: 0;
filter: blur(.2px);
animation: _nuda-pt2fallingash var(--dur) linear var(--d) infinite;
}
@keyframes _nuda-pt2fallingash {
0% {
transform: translate(0,0) rotate(0deg);
opacity: 0;
}
8% {
opacity: .7;
}
50% {
transform: translate(var(--sway),55px) rotate(140deg);
opacity: .5;
}
100% {
transform: translate(0,120px) rotate(280deg);
opacity: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-pt2-falling-ash__flake {
animation: none !important;
opacity: 0;
}
}
How to use Falling Ash
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.