Glow Top Footer
A free animated footer with a breathing accent glow along its top edge.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 1 runtime package
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 is pure CSS and animates 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, small h2 headings and real anchors with visible focus rings. 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.
Footers
A footer that lights its own edge
Keep scrolling. The accent glow along the top edge breathes only while the footer is on screen, and the link columns rise once as they arrive.
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 small. |
| 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 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.