Dust Motes in Light Shaft
A copy-paste particles & effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Particles & EffectsHTMLCSSany framework
Copy into your project
HTML
<!-- Dust Motes in Light Shaft -->
<div class="nuda-pt2-dust-shaft" role="img" aria-label="Dust motes drifting through a light shaft">
<span class="nuda-pt2-dust-shaft__beam" aria-hidden="true"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:12%; top:8%; --s:2px; --d:0s; --dur:6s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:30%; top:24%; --s:1px; --d:.5s; --dur:7s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:48%; top:12%; --s:3px; --d:1s; --dur:8s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:66%; top:40%; --s:2px; --d:1.5s; --dur:9s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:20%; top:55%; --s:1px; --d:2s; --dur:6s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:74%; top:65%; --s:2px; --d:2.5s; --dur:7s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:38%; top:78%; --s:3px; --d:3s; --dur:8s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:56%; top:88%; --s:1px; --d:3.5s; --dur:9s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:84%; top:20%; --s:2px; --d:4s; --dur:6s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:14%; top:70%; --s:1px; --d:4.5s; --dur:7s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:60%; top:10%; --s:2px; --d:5s; --dur:8s"></span>
<span class="nuda-pt2-dust-shaft__mote" style="left:44%; top:48%; --s:1px; --d:5.5s; --dur:9s"></span>
</div>CSS
.nuda-pt2-dust-shaft {
position: relative;
width: 100%;
max-width: 220px;
aspect-ratio: 11/8;
overflow: hidden;
border-radius: 8px;
background: #0a0a0a;
}
.nuda-pt2-dust-shaft__beam {
position: absolute;
top: -20%;
left: 20%;
width: 60%;
height: 140%;
background: linear-gradient(200deg,rgba(228,255,84,.16),rgba(228,255,84,.03) 55%,transparent 75%);
transform: skewX(-14deg);
filter: blur(1px);
}
.nuda-pt2-dust-shaft__mote {
position: absolute;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: rgba(228,255,84,.85);
box-shadow: 0 0 3px rgba(228,255,84,.6);
opacity: 0;
animation: _nuda-pt2dustshaft var(--dur) ease-in-out var(--d) infinite;
}
@keyframes _nuda-pt2dustshaft {
0% {
transform: translate(0,0);
opacity: 0;
}
10% {
opacity: .9;
}
50% {
transform: translate(10px,-14px);
opacity: .5;
}
90% {
opacity: .9;
}
100% {
transform: translate(-6px,10px);
opacity: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-pt2-dust-shaft__mote {
animation: none !important;
opacity: .6;
}
}
How to use Dust Motes in Light Shaft
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.