Beam Banner CTA
A free animated CTA section with drifting light beams behind the ask.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Beam Banner CTA is a free animated CTA section React component for Next.js, styled with Tailwind, that closes a landing page with a full-width rounded band. Two accent streaks and one brand streak drift diagonally behind a headline, an optional supporting line and a primary and secondary call to action, all rendered as static HTML with real anchors.
The beams are pure CSS: transform and opacity keyframes on 26 to 40 second desynchronised loops, capped in opacity so text contrast stays AA, dithered by a static noise overlay so the soft gradients never band. The decorative layer ignores pointer input, pauses while offscreen or when the tab is hidden, and holds a fully composed static band under reduced motion.
Ship the launch page your product deserves
Beam Banner CTA closes the page with drifting light streaks behind one clear action, so the final ask feels as considered as the hero.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/cta-beam-bannerUsage
import { CtaBeamBanner } from "@/components/cta-beam-banner";
export function Example() {
return (
<CtaBeamBanner
title="Launch your next idea this week"
description="Everything you need to go from blank page to shipped product."
cta={{ label: "Get started", href: "/signup" }}
secondaryCta={{ label: "See pricing", href: "/pricing" }}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline copy, rendered as the band's h2. |
| description | string | undefined | Optional supporting line rendered under the title. |
| cta | { label: string; href: string } | required | Primary call to action, rendered as a real anchor with inverted tokens. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action, rendered as an outline anchor. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Beam Banner CTA exposes three Tier 3 tokens. --cta-beam-1 colours the two accent streaks and defaults to the Template Empire accent colour with --ring as its vanilla semantic fallback, --cta-beam-2 colours the centre streak and defaults to the brand colour with --primary as its fallback, and --cta-beam-opacity caps the brightest any beam ever gets. Keep the cap at or below its 0.3 default if you raise the beam colours' lightness, so text contrast stays AA. Override them from :root or any ancestor:
:root {
--cta-beam-1: var(--color-accent-400, var(--ring));
--cta-beam-2: var(--color-brand-400, var(--primary));
--cta-beam-opacity: 0.24;
}Frequently asked questions
- Is Beam Banner CTA free for commercial use?
- Yes. Beam Banner CTA is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Beam Banner CTA accessible and performant?
- Yes. The content is static HTML with an h2 and real anchors, both buttons are keyboard reachable with visible focus rings, and the beam layer is decorative, aria-hidden and unable to receive pointer input. The loops animate transforms and opacity only, pause while offscreen or when the tab is hidden, and stop completely under reduced motion while the band stays fully composed.
- How do I customise the beam colours and brightness?
- Override --cta-beam-1 and --cta-beam-2 with semantic colour tokens and set --cta-beam-opacity to tune the cap. The built-in nested fallbacks keep the component usable in both Template Empire and vanilla shadcn themes, and the opacity cap is the single value that guards text contrast.