Library

Spotlight Beam Hero

Spotlight Beam Hero

Dramatic hero with light beams from above, floating particles, grid background, and pulsing glow at the beam impact point. Dark, cinematic feel.

herospotlightbeamparticles

Installation

bash
# Copy spotlight-beam-hero.tsx to your project
cp components/ui/spotlight-beam-hero.tsx your-project/components/ui/spotlight-beam-hero.tsx

How to use

tsx
import { SpotlightBeamHero } from "@/components/ui/spotlight-beam-hero";
tsx
<SpotlightBeamHero
  heading={<>The future is<br /><span className="text-violet-400">here</span></>}
  subheading="A dramatic hero with light beam effects"
  beamColor="#7c3aed"
>
  <button className="px-6 py-3 bg-violet-600 text-white rounded-full">Explore</button>
</SpotlightBeamHero>

Dependencies

framer-motion

Exports

SpotlightBeamHero

File

components/ui/spotlight-beam-hero.tsx
Preview
The future is
already here

A cinematic hero with light beams, floating particles, and grid background.

Made with