nexus-labs
componentbeam-sweep-fieldsource: ok · hit
Beam Sweep Field
Slow sweeping light column for cinematic section backgrounds.
npx shadcn add "https://nexus-ui.com/r/beam-sweep-field.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · mediumanimationframer-motion
Registry dependencies
https://www.nexus-ui.com/api/registry/nexus-font
Files1 · source cached 10/9/2026, 9:23:33 AM
next-ui/beam-sweep-field.tsx
"use client";
import { motion } from "framer-motion";
export function BeamField() {
return (
<div className="relative overflow-hidden rounded-[2.5rem] border border-white/10 bg-zinc-950">
<div className="lf-grid absolute inset-0 opacity-30" />
<motion.div className="absolute inset-y-10 w-[2px] bg-gradient-to-b from-transparent via-cyan-300 to-transparent" animate={{ left: ["8%", "86%", "30%", "8%"] }} transition={{ duration: 9, repeat: Infinity, ease: "easeInOut" }} />
</div>
);
}