Beam Banner CTA
A free animated CTA section with drifting light beams behind the ask.
Full fibre reaches Fenwick in March
The last four miles are being trenched now. Order before the first splice goes in and installation is free: 900 Mb up and down from day one, and no price rise for three years.
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 animate in CSS keyframes on transform and opacity 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.
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.