Background Beams
SVG-based animated beam lines radiating across the background.
Preview
Background Beams
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Newsletter signup sections and focused call-to-action areas.
Why this component matters
Creates directional energy that guides the eye toward a focal point like a CTA button or input field.
Usage guidance
Place behind a centered, focused piece of content (one heading + one CTA). The beams should radiate outward from the content center.
Installation
bash
npx shadcn@latest add @aceternity/background-beamsUsage
example.tsxtsx
import { BackgroundBeams } from "@/components/ui/background-beams";
export default function Example() {
return (
<BackgroundBeams>
{/* Your content here */}
</BackgroundBeams>
);
}Source
background-beams.tsx
components/ui/background-beams.tsx