Components
laser focus
Animated "laser focus" hero background. Beams of light fan out from a focal point and sweep slowly, rendered with a full-screen WebGL shader. Zero dependencies, configurable colors, and respects prefers-reduced-motion.
import LaserField from "@/components/ui/laser-focus";
export default function LaserFieldDemo() {
return (
<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-xl bg-black">
<LaserField className="pointer-events-none absolute inset-0 h-full w-full opacity-80" />
<div className="relative z-10 text-center px-6">
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tight text-white">
Laser Focus
</h1>
<p className="mt-4 text-base md:text-lg text-white/70">
A lightweight, zero-dependency WebGL laser-beam background.
</p>
</div>
</div>
);
}