Components
Ethereal Beams Hero
A mesmerizing hero section featuring animated 3D light beams with glassmorphic navigation. Perfect for modern SaaS, creative agencies, and tech startups looking to make a bold first impression.
Key Features Listed:- Animated 3D light beams background
- Glassmorphic pill-shaped navigation
- Shimmer button effects
- Fully responsive design
- Black & white aesthetic
- Built-in shimmer effect on hover
- Three variants:
default,outline,ghost - Two sizes:
sm,lg - Fully typed with TypeScript
- No external dependencies
import EtherealBeamsHero from "@/components/ui/ethereal-beams-hero";
const settings = {
beamWidth: 2.5,
beamHeight: 18,
speed: 2.5,
noiseIntensity: 2,
lightColor: "#ffffff",
rotation: 43,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<EtherealBeamsHero {...s} />
</div>
);
}