Footer reveal
A sticky footer that sits under the page at z-index -1 and fades, scales and sharpens as scroll uncovers it.
API reference
Components
<FooterReveal />
The page root. Owns reveal progress (keyed to the content bottom leaving the viewport, scaled to the footer height) and publishes it to its parts via context.
children?
The page contents: a FooterRevealContent followed by a FooterRevealFooter.
className?
Merged onto the root element, last. The root is a relative, isolated stacking context at full width; use this for a font base or surface. Never add overflow clipping here - it breaks sticky.
<FooterRevealContent />
The page body layer. Sits above the sticky footer (z-index: 1) with an opaque bg-background so it covers the footer until scroll lifts the content away. Its bottom edge is the reveal trigger. Must be rendered inside a <FooterReveal>.
children?
The page body: hero, sections, anything that should cover the sticky footer until scroll uncovers it.
className?
Merged onto the content layer, last. The defaults establish the cover (relative z-[1] bg-background); pass classes for layout, padding and any extra surface treatment. An opaque background is required for the reveal to read - without it the footer shows through the page.
<FooterRevealFooter />
The sticky footer. Pins to the bottom of the viewport at z-index: -1. Opacity fades on a full-bleed surface layer; scale (0.9 → 1) and blur (6px → 0) run on an inner content layer so the background never shrinks and leaves side gaps. Must be rendered inside a <FooterReveal>, after a FooterRevealContent.
children?
The footer contents: wordmark, link columns, legal row.
className?
Merged onto the sticky <footer> shell, last. The defaults establish sticky stacking (sticky bottom-0 z-[-1]); surface colour belongs on this element or the children, not on a clipped ancestor.
Hooks
useFooterRevealProgress
Returns the enclosing FooterReveal's raw reveal progress MotionValue (0 until uncover begins, then 0 → 1 across one footer-height of scroll). Derive any other reveal-linked transform off it. Throws if called outside a FooterReveal.
useFooterRevealProgress(): MotionValue<number>Featured in
See the footer reveal composed into full sections.
