CTA Horizon Footer
A free animated footer with a luminous transition, complete sitemap and final call to action.
Customise
Code
<FooterCtaHorizon heading={footer.heading} description={footer.description} primaryAction={footer.primaryAction} secondaryAction={footer.secondaryAction} groups={footer.groups} legal={footer.legal} />CTA Horizon Footer is a free animated footer React and Next.js teams can use to join a final call to action, grouped sitemap navigation and legal copy in one Tailwind section. Its token-derived horizon creates a clear visual transition without replacing real headings, lists or anchor destinations.
Motion reveals the horizon, CTA copy and sitemap groups once when the footer enters view, while a restrained opacity cycle runs only while the footer is onscreen and the document is visible. Reduced motion and no JavaScript both keep the complete footer immediately visible, with the dithered horizon held as a static composition.
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/footer-cta-horizonUsage
import { FooterCtaHorizon } from "@/components/footer-cta-horizon";
const groups = [
{
heading: "Product",
links: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
],
},
{
heading: "Company",
links: [
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
];
export function SiteFooter() {
return (
<FooterCtaHorizon
heading="Build the next chapter"
description="Give every visitor a clear next step and a complete route through your site."
primaryAction={{ label: "Start a project", href: "/contact" }}
secondaryAction={{ label: "View work", href: "/work" }}
groups={groups}
legal="© 2026 Acme Studio. All rights reserved."
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | required | Final conversion heading rendered as the footer CTA's h2. |
| description | string | required | Supporting copy beneath the conversion heading. |
| primaryAction | { label: string; href: string } | required | Required primary anchor with a readable label and real destination. |
| secondaryAction | { label: string; href: string } | undefined | Optional secondary anchor. Empty or unsafe values are omitted. |
| groups | ReadonlyArray<{ heading; links: ReadonlyArray<{ label; href }> }> | required | Two to five sitemap groups. Blank headings, empty links and unsafe destinations are removed at runtime. |
| legal | string | required | Copyright or legal line rendered after the sitemap. |
| glowWidth | number | 72 | Final horizon width in percent, clamped to 30 through 120. |
| glowIntensity | number | 0.58 | Horizon opacity, clamped to 0 through 1. |
| horizonOffset | number | 18 | Static vertical transform offset in CSS pixels, clamped to -32 through 64. |
| alignment | "left" | "center" | "center" | CTA alignment and wide-screen composition. |
| revealStagger | number | 0.055 | Sitemap entrance stagger in seconds, clamped to 0 through 0.14. |
| radius | number | 32 | CTA panel top radius in CSS pixels, clamped to 0 through 56. |
| className | string | undefined | Additional classes merged onto the semantic footer. |
Customisation
CTA Horizon Footer exposes three Tier 3 colour tokens. Use --footer-horizon-accent for the horizon and primary action, --footer-horizon-surface for the CTA and sitemap surface, and --footer-horizon-line for the transition and dividers. Each falls back to a semantic theme token:
.launch-footer {
--footer-horizon-accent: var(--ring);
--footer-horizon-surface: var(--card);
--footer-horizon-line: var(--border);
}
<FooterCtaHorizon
className="launch-footer"
heading="Build the next chapter"
description="Give every visitor a clear next step."
primaryAction={{ label: "Start a project", href: "/contact" }}
groups={groups}
legal="© 2026 Acme Studio."
/>Frequently asked questions
- Is CTA Horizon Footer free for commercial use?
- Yes. CTA Horizon Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is CTA Horizon Footer accessible and motion safe?
- Yes. It uses a semantic footer, a labelled CTA region, grouped sitemap lists and real anchors with visible focus styles. The decorative horizon is hidden from assistive technology, its motion is limited to transform and opacity, ambient cycling pauses offscreen or in a hidden tab, and reduced motion renders the final static footer immediately.
- How do I customise the horizon and footer layout?
- Use glowWidth, glowIntensity and horizonOffset to tune the transition, choose left or centre alignment, and adjust revealStagger and radius within their documented bounds. Override the accent, surface and line Tier 3 tokens to make the footer follow your theme without editing the component.