laser focus

Heroes 25

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds laser focus to your project and fits it to your theme.

Code

How laser focus is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}