Installation

Architecture

This component achieves a "curtain reveal" parallax effect without using any complex scroll listeners or physics engines. It relies purely on native CSS stacking contexts:

1. The Footer (-z-10, sticky bottom-0): The footer sits at the very end of your DOM tree. Because it is sticky bottom-0, as soon as it enters the viewport, it locks to the bottom edge of the screen and refuses to scroll any higher.
2. The Main Content (z-10, relative): Your main application wrapper (<main>) is rendered before the footer in the DOM, but has a higher z-index and a solid background color.

As you scroll past the bottom of your main content, the footer enters the viewport, sticks to the bottom, and the main content simply slides up and off of it, revealing the giant typography natively.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GiantTypeFooter } from "@/components/creative/giant-type-footer";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GiantTypeFooter } from "@/components/creative/giant-type-footer";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GiantTypeFooter
        title="example"
        links="example"
      />
    </div>
  );
}