Footer Reveal

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #1a1428;
  color: #f5f3fa;
}

.page {
  position: relative;
  z-index: 1;
  background: #0f0f14;
  margin-bottom: 40vh;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.block {
  min-height: 70vh;
  padding: 3rem 1.5rem;
  max-width: 36rem;
  margin: 0 auto;
}

.block h1,
.block h2 {
  margin: 0 0 0.75rem;
}

.block p {
  margin: 0;
  color: #9a9590;
  line-height: 1.6;
}

.site-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 0;
  min-height: 40vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(160deg, #2a1f4a, #1a1428);
}

.brand {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
}

.tag {
  margin: 0.5rem 0 0;
  color: #b8b0c8;
}

const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const page = document.querySelector("[data-page]");

gsap.registerPlugin(ScrollTrigger);

function boot() {
  if (!reduced) {
    gsap.to(page, {
      y: -24,
      ease: "none",
      scrollTrigger: {
        trigger: page,
        start: "bottom bottom",
        end: "bottom top",
        scrub: true,
      },
    });
  }

  if (!reduced && typeof Lenis !== "undefined") {
    const lenis = new Lenis({ autoRaf: false });
    lenis.on("scroll", ScrollTrigger.update);
    gsap.ticker.add((t) => lenis.raf(t * 1000));
    gsap.ticker.lagSmoothing(0);
  }
  ScrollTrigger.refresh();
}

boot();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Footer Reveal</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="page" data-page>
      <main>
        <section class="block">
          <h1>Content sheet</h1>
          <p>Scroll past the end — the footer was waiting underneath.</p>
        </section>
        <section class="block">
          <h2>More copy</h2>
          <p>Lenis keeps the reveal smooth; the sheet lifts slightly as you approach the edge.</p>
        </section>
        <section class="block">
          <h2>Almost there</h2>
          <p>One more push.</p>
        </section>
      </main>
    </div>

    <footer class="site-footer" data-footer>
      <p class="brand">StealThis</p>
      <p class="tag">Footer reveal pattern</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>