Dot Drift
A copy-paste backgrounds component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
BackgroundsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-dot-drift" aria-hidden="true"></div>CSS
.nuda-dot-drift {
position: relative;
overflow: hidden;
background-color: #09090b;
background-image: radial-gradient(circle,rgba(228,255,84,.22) 1.4px,transparent 1.4px),radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
background-size: 28px 28px,18px 18px;
animation: _dotDrift 18s linear infinite;
will-change: background-position;
}
.nuda-dot-drift::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 50%,transparent 30%,#09090b 100%);
}
@keyframes _dotDrift {
to {
background-position: 28px 56px,-18px 36px;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-dot-drift {
animation: none;
}
}
How to use Dot Drift
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.