# Footer Giant Wordmark — React Footer Component

> Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.

- Category: [Footers](https://pixelpapa.com/components/footers.md)
- Tags: footer, wordmark, reveal, stagger, spring
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/footers/footer-giant-wordmark

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/footer-giant-wordmark.json"
```

The file is written to `components/pixelpapa/footer-giant-wordmark.tsx`. To install manually, run `npm install lucide-react motion` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { ArrowUpRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";

type Column = { title: string; links: string[] };

type FooterGiantWordmarkProps = {
  brand?: string;
  columns?: Column[];
};

const defaultColumns: Column[] = [
  { title: "Product", links: ["Canvas", "Automations", "Insights", "Changelog"] },
  { title: "Company", links: ["About", "Careers", "Press kit", "Contact"] },
  { title: "Resources", links: ["Docs", "Guides", "Community", "Status"] },
];

export default function FooterGiantWordmark({ brand = "halcyon", columns = defaultColumns }: FooterGiantWordmarkProps) {
  const reduce = useReducedMotion();
  const letters = brand.split("");

  return (
    <footer className="relative w-full overflow-hidden border-t border-border bg-background">
      <div className="mx-auto max-w-6xl px-6 pt-16">
        <div className="grid gap-12 md:grid-cols-[1.5fr_repeat(3,1fr)]">
          <div className="max-w-xs">
            <p className="text-lg font-medium tracking-tight text-foreground">
              Planning software for teams who would rather be building.
            </p>
            <a
              href="#"
              className="group mt-5 inline-flex items-center gap-1.5 border-b border-foreground/30 pb-0.5 text-sm font-medium text-foreground transition-colors hover:border-primary hover:text-primary"
            >
              hello@halcyon.app
              <ArrowUpRight className="size-3.5 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
            </a>
          </div>
          {columns.map((col) => (
            <nav key={col.title} aria-label={col.title}>
              <h3 className="text-xs font-medium tracking-[0.16em] text-muted-foreground uppercase">{col.title}</h3>
              <ul className="mt-4 space-y-2.5 text-sm">
                {col.links.map((link) => (
                  <li key={link}>
                    <a href="#" className="text-foreground/80 transition-colors hover:text-primary">
                      {link}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        <div className="mt-14 flex flex-wrap items-center justify-between gap-3 border-t border-border py-5 text-xs text-muted-foreground">
          <p>© 2026 Halcyon Labs, Inc. Built in Rotterdam and Montréal.</p>
          <div className="flex gap-5">
            {["Privacy", "Terms", "Security"].map((l) => (
              <a key={l} href="#" className="transition-colors hover:text-foreground">
                {l}
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* The word is taller than its box, so the bottom of every letter is cut by the footer edge. */}
      <motion.div
        aria-hidden
        initial="hidden"
        whileInView="shown"
        viewport={{ once: true, amount: 0.25 }}
        transition={{ staggerChildren: reduce ? 0 : 0.055, delayChildren: 0.1 }}
        className="flex h-[0.74em] justify-center overflow-hidden px-4 leading-[0.86] font-semibold tracking-[-0.06em] select-none"
        style={{ fontSize: `min(${Math.round(152 / Math.max(letters.length, 3))}vw, 22rem)` }}
      >
        {letters.map((char, i) => (
          <motion.span
            key={`${char}-${i}`}
            variants={{
              hidden: reduce ? { opacity: 0 } : { y: "70%", opacity: 0, rotate: i % 2 ? 4 : -4 },
              shown: { y: 0, opacity: 1, rotate: 0 },
            }}
            transition={{ type: "spring", stiffness: 120, damping: 16, mass: 0.9 }}
            whileHover={reduce ? undefined : { y: "-5%" }}
            className="inline-block bg-gradient-to-b from-foreground via-foreground/70 to-foreground/5 bg-clip-text text-transparent transition-[background-image] hover:from-primary hover:via-primary/70 hover:to-primary/5"
          >
            {char}
          </motion.span>
        ))}
      </motion.div>
    </footer>
  );
}
```

## AI prompt

```text
Add the "Footer Giant Wordmark" component from PixelPapa UI to this project.

What it is: Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.
Category: Footers. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/footer-giant-wordmark.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/footer-giant-wordmark.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/footer-giant-wordmark" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More footers

- [Footer App Style](https://pixelpapa.com/components/footers/footer-app-style.md) (Pro): A compact application footer with a working language menu that retranslates the links and a system / light / dark theme switch with a sliding thumb.
- [Footer CTA Above](https://pixelpapa.com/components/footers/footer-cta-above.md) (Pro): A rounded call-to-action card that overlaps the top edge of the footer, with a sheen that tracks the cursor and link columns underneath.
- [Footer Dark Gradient Glow](https://pixelpapa.com/components/footers/footer-dark-gradient-glow.md) (Pro): An always-dark footer lit by a breathing horizon glow, with a faint perspective grid, twinkling points and link columns that brighten on hover.
- [Footer Editorial Serif](https://pixelpapa.com/components/footers/footer-editorial-serif.md) (Pro): A magazine-style colophon: a large serif sign-off that reveals line by line, hairline-ruled numbered columns and a live local clock.
- [Footer Marquee Links](https://pixelpapa.com/components/footers/footer-marquee-links.md): Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.
- [Footer Minimal Centered](https://pixelpapa.com/components/footers/footer-minimal-centered.md): A quiet centered footer: logo mark, a link row with a pill that glides between hovered links, round social buttons and a back-to-top control.