Glow Top Footer
A free animated footer with a breathing accent glow along its top edge.
Release intelligence
Ship on Friday, know by Friday evening
Halyard reads every deploy against live customer traffic and names the accounts a change touched, usually inside 90 seconds. Regressions arrive as a message in your channel, not as a support queue on Monday.
Glow Top Footer is a free animated footer React component for Next.js, styled with Tailwind, that lights its own top edge: a 1px border with a centred, blurred accent glow segment that breathes in opacity and width on a slow six second loop. The glow animates in CSS on transform and opacity only, sits beneath a static noise overlay that dithers the gradient, and pauses whenever the footer is offscreen or the browser tab is hidden.
The link columns rise once on a 60 millisecond stagger as the footer first scrolls into view, and the markup is a real footer landmark with a labelled nav per column, tracked uppercase h2 headings above muted links, and real anchors with visible focus rings. The wide-screen track count is taken from the columns you pass, so three columns lay out on three tracks with no empty fourth. It is a drop-in styled footer, unlike footer-reveal-parallax, which pins beneath the page and lifts away with a parallax watermark: this component has no sticky behaviour and no watermark, so you place it at the end of any page as is.
With prefers-reduced-motion enabled, or with JavaScript unavailable, the glow holds static at half opacity and every column is fully visible with no reveal.
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-glow-topUsage
import { FooterGlowTop } from "@/components/footer-glow-top";
export default function Page() {
return (
<FooterGlowTop
logo={<span className="font-semibold">Acme</span>}
columns={[
{
heading: "Product",
links: [
{ label: "Features", href: "/features" },
{ label: "Pricing", href: "/pricing" },
],
},
{
heading: "Company",
links: [
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
]}
legal="© 2026 Acme Inc. All rights reserved."
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | required | Brand slot rendered at the start of the footer. Pass a logo, wordmark or any node. |
| columns | { heading: string; links: { label: string; href: string }[] }[] | required | 2 to 4 link columns. Each renders as its own nav labelled by its heading; headings are h2 elements styled as tracked uppercase labels. The number of columns you pass sets the wide-screen track count. |
| legal | string | undefined | Optional copyright or legal line rendered beneath the columns. |
| className | string | undefined | Additional classes merged onto the footer element. |
Customisation
Glow Top Footer exposes three Tier 3 tokens on the glow. --footer-glow sets the accent colour and defaults to the accent primitive, --footer-glow-blur softens the segment and defaults to 16px, and --footer-glow-width sizes the centred segment and defaults to 40%. Each defaults to a token reference, so the glow tracks your theme; override any of them from :root or an ancestor to retint or resize it:
:root {
--footer-glow: var(--color-brand-400);
--footer-glow-blur: 24px;
--footer-glow-width: 55%;
}Frequently asked questions
- Is Glow Top Footer free for commercial use?
- Yes. Glow Top Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Glow Top Footer accessible and performant?
- Yes. The glow animates only opacity and a horizontal scale, runs entirely in CSS, and pauses while the footer is offscreen or the tab is hidden, so it never burns frames out of view. The markup is a real footer landmark with a labelled nav per column, h2 column headings and real anchors with visible focus rings at AA contrast. The wide-screen grid takes its track count from the columns you pass, so it never leaves an empty track. The glow layer is aria-hidden and ignores pointer input, and under reduced motion or with no JavaScript the columns are fully visible and the glow holds static.
- How do I change the glow colour or size?
- Override the Tier 3 tokens. Set --footer-glow to any colour token to retint the segment, --footer-glow-blur to soften or sharpen it, and --footer-glow-width to widen or narrow the centred glow. Each token defaults to a theme reference, so leaving it unset keeps the footer in step with the rest of your design system.