Beam Marker

Component 3

About

A vertical light-beam marker with a bracketed label, optional sublabel and coordinates for annotating maps, diagrams or dashboards.

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

Code

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

Usage.tsx

import { BeamMarker } from "@/components/ui/beam-marker";

export default function Default() {
  return (
    <div className="relative flex min-h-[460px] w-full items-end justify-center gap-16 overflow-hidden bg-background px-10 pb-16 pt-12 text-foreground">
      {/* Tron grid floor */}
      <div
        className="pointer-events-none absolute inset-0"
        style={{
          backgroundImage:
            "linear-gradient(oklch(0.55 0.12 195 / 0.28) 1px, transparent 1px), linear-gradient(90deg, oklch(0.55 0.12 195 / 0.28) 1px, transparent 1px)",
          backgroundSize: "46px 46px",
          maskImage:
            "radial-gradient(ellipse 80% 70% at 50% 60%, black 30%, transparent 82%)",
          WebkitMaskImage:
            "radial-gradient(ellipse 80% 70% at 50% 60%, black 30%, transparent 82%)",
        }}
      />

      <BeamMarker
        label="ALPHA"
        sublabel="SECTOR 7"
        beamColor="cyan"
        coordinates="34.05° N, 118.24° W"
        beamHeight={150}
        className="relative z-10"
      />
      <BeamMarker
        label="BRAVO"
        sublabel="SECTOR 12"
        beamColor="red"
        coordinates="40.71° N, 74.00° W"
        beamHeight={96}
        className="relative z-10"
      />
      <BeamMarker
        label="DELTA"
        sublabel="SECTOR 3"
        beamColor="amber"
        coordinates="51.50° N, 0.12° W"
        beamHeight={196}
        className="relative z-10"
      />
    </div>
  );
}