Reveal Parallax Footer
A free footer with a reveal effect: the page lifts away over a parallax footer.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Reveal Parallax Footer is a free animated footer React component for Next.js, styled with Tailwind, that recreates the classic footer reveal effect: the footer sits in a sticky container pinned beneath the page, so as scrolling reaches the end the content appears to lift away and uncover it. The reveal is pure CSS scroll position, with zero JavaScript, zero scroll listeners and no transforms, and because sticky elements keep their space in flow the container reserves the footer's exact height with no layout shift.
It needs one documented page structure: wrap your main content in a block with relative z-10 bg-background and place the footer after it as the last section of the page, as shown in the usage snippet. Inside, an oversized aria-hidden watermark duplicates the brand and drifts on a slower plane using a pure CSS view timeline, active only where animation-timeline: view() is supported and motion is not reduced; on every other browser, and under reduced motion, the watermark is simply static while the reveal keeps working. The markup is a real footer landmark with a labelled nav per link column and real anchors throughout.
Footers
The page lifts away, the footer waits beneath
Keep scrolling. This content sits on its own opaque layer above the footer, so the reveal is nothing but scroll position: no JavaScript, no listeners, no transforms.
Almost there
As this block scrolls past its end, the footer pinned at the bottom of the viewport is uncovered in place. The oversized watermark drifts on its own view timeline where the browser supports it, and simply holds still everywhere else.
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-reveal-parallaxUsage
import {
FooterRevealParallax,
} from "@/components/footer-reveal-parallax";
export default function Page() {
return (
<>
{/* Content wrapper: the opaque layer that lifts away. */}
<main className="relative z-10 bg-background">
{/* ...page sections... */}
</main>
<FooterRevealParallax
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. Also rendered inside the decorative watermark, which sets its own font size, so pass a node that inherits text size. |
| columns | { heading: string; links: { label: string; href: string }[] }[] | required | 2 to 4 link columns. Each renders as a nav labelled by its heading; headings are h2 elements styled small. |
| legal | string | undefined | Copyright line rendered under a top border at the foot of the footer. |
| className | string | undefined | Additional classes merged onto the footer element. |
Customisation
Reveal Parallax Footer exposes two Tier 3 tokens on the watermark. --footer-watermark-size sets the oversized brand text's font size and defaults to clamp(4.5rem, 16vw, 14rem), and --footer-watermark-opacity sets how faint it renders over the footer background, defaulting to 0.05. Keep the opacity at or near its default so column links and the legal line keep AA contrast over the watermark. Override them from :root or any ancestor:
:root {
--footer-watermark-size: clamp(4.5rem, 16vw, 14rem);
--footer-watermark-opacity: 0.05;
}Frequently asked questions
- Is Reveal Parallax Footer free for commercial use?
- Yes. Reveal Parallax Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Reveal Parallax Footer accessible and performant?
- Yes. The reveal is scroll position, not animation: content never moves on its own, nothing is transformed, and no JavaScript runs at all. The markup is a real footer landmark with a labelled nav per column, h2 column headings and real anchors with visible focus rings, and the footer caps its height at 100dvh so it can never obscure or trap content. The watermark is aria-hidden, ignores pointer input, and its view timeline parallax only runs where the browser supports it and motion is not reduced.
- What page structure does the reveal need?
- Wrap your main content in a block with the classes relative z-10 bg-background and render the footer directly after it as the last element of the page. The opaque, higher layer is what lifts away; the footer pins beneath it in a sticky bottom container that still reserves the footer's exact height in flow, so there is no layout shift and no spacer element to maintain.