# Footer Marquee Links — React Footer Component

> Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.

- Category: [Footers](https://pixelpapa.com/components/footers.md)
- Tags: footer, marquee, links, loop, typography
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/footers/footer-marquee-links

## Install

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

The file is written to `components/pixelpapa/footer-marquee-links.tsx`. To install manually, run `npm install lucide-react` 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, Asterisk } from "lucide-react";
import { cn } from "@/lib/utils";

type FooterMarqueeLinksProps = {
  rows?: string[][];
  /** Seconds for one loop. */
  speed?: number;
};

const defaultRows = [
  ["Selected work", "Studio", "Journal", "Say hello"],
  ["Capabilities", "Careers", "Press", "Newsletter"],
];

function Row({ items, reverse, speed, outline }: { items: string[]; reverse?: boolean; speed: number; outline?: boolean }) {
  return (
    <div className="group flex overflow-hidden">
      {[0, 1].map((copy) => (
        <ul
          key={copy}
          aria-hidden={copy === 1}
          className="flex shrink-0 items-center group-hover:[animation-play-state:paused] motion-reduce:animate-none"
          style={{
            animation: `pp-footer-marquee-links-scroll ${speed}s linear infinite`,
            animationDirection: reverse ? "reverse" : "normal",
          }}
        >
          {items.map((item) => (
            <li key={item} className="flex items-center">
              <a
                href="#"
                tabIndex={copy === 1 ? -1 : undefined}
                className={cn(
                  "px-6 text-6xl font-semibold tracking-tighter whitespace-nowrap transition-colors duration-300 sm:text-8xl",
                  outline
                    ? "text-transparent [-webkit-text-stroke:1.5px_var(--muted-foreground)] hover:text-primary hover:[-webkit-text-stroke:1.5px_var(--primary)]"
                    : "text-foreground hover:text-primary",
                )}
              >
                {item}
              </a>
              <Asterisk className="size-10 shrink-0 text-primary sm:size-14" strokeWidth={1.5} />
            </li>
          ))}
        </ul>
      ))}
    </div>
  );
}

export default function FooterMarqueeLinks({ rows = defaultRows, speed = 34 }: FooterMarqueeLinksProps) {
  return (
    <footer className="w-full overflow-hidden border-t border-border bg-background">
      <style>{`
        @keyframes pp-footer-marquee-links-scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-100%); }
        }
      `}</style>
      <div className="space-y-2 py-12 [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]">
        {rows.map((items, i) => (
          <Row key={i} items={items} reverse={i % 2 === 1} outline={i % 2 === 1} speed={speed + i * 8} />
        ))}
      </div>

      <div className="mx-auto grid max-w-6xl gap-8 border-t border-border px-6 py-10 text-sm sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <p className="font-semibold tracking-tight text-foreground">Oddbird &amp; Co.</p>
          <p className="mt-2 text-muted-foreground">Brand and motion studio. Twelve people, one very long table.</p>
        </div>
        <div>
          <p className="text-xs tracking-[0.16em] text-muted-foreground uppercase">Visit</p>
          <p className="mt-2 text-foreground">
            14 Calle de la Palma
            <br />
            28004 Madrid
          </p>
        </div>
        <div>
          <p className="text-xs tracking-[0.16em] text-muted-foreground uppercase">New business</p>
          <a href="#" className="group mt-2 inline-flex items-center gap-1 text-foreground hover:text-primary">
            ines@oddbird.studio
            <ArrowUpRight className="size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
          </a>
          <p className="mt-1 text-muted-foreground">Booking from March 2027</p>
        </div>
        <div className="lg:text-right">
          <p className="text-xs tracking-[0.16em] text-muted-foreground uppercase">Elsewhere</p>
          <ul className="mt-2 space-y-1 text-foreground">
            {["Showreel", "Type specimens", "Field notes"].map((l) => (
              <li key={l}>
                <a href="#" className="hover:text-primary">
                  {l}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <p className="border-t border-border px-6 py-4 text-center text-xs text-muted-foreground">
        © 2026 Oddbird &amp; Co. No cookies were baked for this website.
      </p>
    </footer>
  );
}
```

## AI prompt

```text
Add the "Footer Marquee Links" component from PixelPapa UI to this project.

What it is: Oversized footer links drift past in two opposing marquee rows that slow to a stop on hover, above a small grid of studio details.
Category: Footers. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/footer-marquee-links.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/footer-marquee-links.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/footer-marquee-links" 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 Giant Wordmark](https://pixelpapa.com/components/footers/footer-giant-wordmark.md): Compact link columns above an oversized brand word whose letters spring up out of the clipped bottom edge when the footer enters view.
- [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.