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.
DOM + CSS0 deps1 file · 7 KB TSXreduced-motion aware
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
// ---------------------------------------------------------------
}Details
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.
