Curtain Footer Section
The page ends, lifts, and the footer is already there underneath: a sticky footer revealed by the last section sliding over it, with the wordmark cropped by the bottom edge. No JavaScript in the reveal.
- Category
- Sections
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
End of page · scroll
Baked at six.
Gone by eleven.
The page lifts off the footer ↓
Props
"use client";
import type { ReactNode } from "react";
/**
* CurtainFooter — the page ends, lifts, and the footer is already there
* underneath.
*
* The footer sits fixed to the bottom of the viewport, beneath the page, and
* the page's last section slides up over it as you scroll to the end: the
* footer is revealed, not animated in. Nothing about it moves on its own,
* which is why it works with reduced motion untouched. The wordmark is set at
* a third of the footer's height and cropped by the bottom edge — a name
* that runs off the page reads as fixed beneath it.
*
* HOW THE CURTAIN WORKS. The footer is position: sticky; bottom: 0 with
* z-index 0, placed LAST in the page. Everything before it must be opaque and
* stacked above it (position: relative; z-index: 1; a background). Wrap that
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
The footer on a studio-grade site does not scroll into view; it is already there, and the page lifts off it. This section does that with three CSS properties and no scroll listener. The footer is sticky to the bottom of the viewport with a z-index of zero and sits last in the page; everything before it is wrapped in an opaque layer stacked above, so as the last section scrolls up the footer is revealed beneath. Because nothing animates on its own, reduced motion needs no special case. The wordmark takes the bottom third of the footer and is pushed down so the page edge crops it, which is the detail that makes a name read as fixed underneath rather than printed on. Above it, three monospace columns carry the things people scroll to a footer for: address, hours, phone, email. The single accent is a dot beside one live line such as the day's closing time, and Back to top scrolls whichever container actually scrolls. Keep the footer under the viewport height; the note in the code says why.
Curator’s note
Studio sites have done this for years and every implementation I have seen used a scroll listener. It is three CSS properties. The wordmark running off the page is what makes it read as fixed beneath.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Service Price Ledger
sectionsA price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Hours Poster Section
sectionsOpening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.
Headline Switch Hero
heroesThe second line of the headline is the navigation: KITCHENS / BATHROOMS / LOFTS at headline size, and choosing one swaps the treated photo plate, the copy and the price.