Curtain Footer

Footers

About

A sticky site footer with a giant wordmark that reveals itself as the page's last section scrolls up and off, like a sheet being lifted away.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Curtain Footer to your project and fits it to your theme.

Code

How Curtain Footer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import CurtainFooter from "@/components/ui/curtain-footer";
import { useRef } from "react";

export default function Demo() {
  const scroller = useRef<HTMLDivElement>(null);
  return (
    <div
      ref={scroller}
      className="w-full overflow-y-auto bg-[#16130f] text-[#efe8dc]"
      style={{ height: "600px" }}
    >
      <CurtainFooter
        scrollRef={scroller}
        wordmark="Hamza"
        columns={[
          { title: "Work", links: ["Masar", "Wally", "OCS", "TransOcean"] },
          { title: "Site", links: ["About", "Writing", "Vitrine", "Contact"] },
          { title: "Elsewhere", links: ["GitHub", "LinkedIn", "Read.cv"] },
        ]}
      >
        <section className="px-8 pb-24 pt-16 text-[#efe8dc]">
          <p className="font-[family-name:Geist_Mono] text-[0.6875rem] uppercase tracking-[0.16em] text-[#6f6a64]">
            Scroll to the end
          </p>
          <h2 className="mt-3 max-w-[16ch] font-[family-name:Instrument_Serif] text-[clamp(2.2rem,5vw,3.4rem)] leading-[1.02] tracking-[-0.02em]">
            The page is a sheet. The footer is what's underneath.
          </h2>
          {Array.from({ length: 5 }, (_, i) => (
            <p
              key={i}
              className="mt-6 max-w-[56ch] text-[0.9375rem] leading-relaxed text-[#a8a59c]"
            >
              Selected work, notes and experiments. Every project here was
              designed and built end to end — from the first sketch to the last
              accessibility pass. Keep scrolling: at the bottom the page lifts
              away.
            </p>
          ))}
        </section>
      </CurtainFooter>
    </div>
  );
}