Beam Sweep
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-beam-sweep" aria-hidden="true">
<span class="nuda-beam-sweep__b nuda-beam-sweep__b--1"></span>
<span class="nuda-beam-sweep__b nuda-beam-sweep__b--2"></span>
</div>CSS
.nuda-beam-sweep {
position: relative;
overflow: hidden;
background: #09090b;
}
.nuda-beam-sweep__b {
position: absolute;
top: -40%;
bottom: -40%;
width: 60px;
transform: rotate(18deg);
filter: blur(8px);
will-change: transform,opacity;
}
.nuda-beam-sweep__b--1 {
left: -20%;
background: linear-gradient(90deg,transparent,rgba(228,255,84,.32),transparent);
animation: _beamSweep 5s ease-in-out infinite;
}
.nuda-beam-sweep__b--2 {
left: -20%;
background: linear-gradient(90deg,transparent,rgba(98,182,255,.22),transparent);
animation: _beamSweep 7s ease-in-out infinite;
animation-delay: -2.5s;
}
@keyframes _beamSweep {
0% {
transform: translateX(0) rotate(18deg);
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
transform: translateX(600px) rotate(18deg);
opacity: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-beam-sweep__b {
animation: none;
opacity: .3;
transform: rotate(18deg);
}
}
How to use Beam Sweep
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.