Tetris Footer

Footers 1

About

A full-height site footer that ends in a playable, full-bleed pixel Tetris. Fully themeable: every colour — the page chrome, the WebGL aurora and the game art — comes from your shadcn theme tokens (primary, foreground, muted, chart-1…5), so it re-colours with any theme in light and dark. Props for logo, links, socials and tagline; real links with inert # placeholders; keyboard-accessible game that only captures keys while focused; respects reduced motion; demo has live controls.

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

Code

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

Usage.tsx

import { TetrisFooter } from "@/components/ui/tetris-footer";

// a neutral brand mark: swap in your own logo
const BrandMark = (
  <svg viewBox="0 0 48 48" fill="none" aria-label="Brand" className="h-full w-full">
    <rect x="4" y="4" width="18" height="18" rx="5" fill="currentColor" />
    <rect x="26" y="4" width="18" height="18" rx="9" fill="currentColor" opacity="0.5" />
    <rect x="4" y="26" width="18" height="18" rx="9" fill="currentColor" opacity="0.5" />
    <rect x="26" y="26" width="18" height="18" rx="5" fill="currentColor" />
  </svg>
);

const socials = [
  {
    label: "Email",
    href: "#",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2.5" y="5" width="19" height="14" rx="2.5" />
        <path d="m3.5 7 8.5 6 8.5-6" />
      </svg>
    ),
  },
  {
    label: "LinkedIn",
    href: "#",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.2 8h4.6v14H.2V8zm7.6 0h4.4v1.9h.1c.6-1.1 2.1-2.3 4.3-2.3 4.6 0 5.4 3 5.4 6.9V22h-4.6v-6.6c0-1.6 0-3.6-2.2-3.6s-2.6 1.7-2.6 3.5V22H7.8V8z" />
      </svg>
    ),
  },
  {
    label: "Dribbble",
    href: "#",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="10" />
        <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" />
        <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" />
        <path d="M8.56 2.75c4.37 6 6 9.42 8.25 18.4" />
      </svg>
    ),
  },
  {
    label: "Behance",
    href: "#",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M2 5.5h5.2c2 0 3.4 1 3.4 2.9 0 1.1-.5 1.9-1.5 2.4 1.4.4 2.2 1.4 2.2 2.9 0 2.2-1.7 3.4-3.9 3.4H2V5.5zm2.6 4.5h2.2c.9 0 1.5-.4 1.5-1.2s-.6-1.2-1.5-1.2H4.6v2.4zm0 4.9h2.5c1 0 1.7-.5 1.7-1.4s-.7-1.4-1.7-1.4H4.6v2.8zM22 13.3h-6.3c.1 1.3 1 2 2.3 2 .9 0 1.6-.4 1.9-1.1h2c-.5 1.9-2 3-4 3-2.6 0-4.4-1.8-4.4-4.4s1.8-4.4 4.4-4.4c2.7 0 4.2 2 4.2 4.5l-.1.4zm-6.3-1.6h4c-.2-1.1-1-1.8-2-1.8s-1.8.7-2 1.8zM14.5 5.8h5v1.4h-5z" />
      </svg>
    ),
  },
  {
    label: "WhatsApp",
    href: "#",
    icon: (
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.2c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.4-.7-2.9-1.1-4.7-4-4.9-4.2-.1-.2-1.1-1.5-1.1-2.9s.7-2 1-2.3c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5s.8 1.9.8 2c.1.1.1.3 0 .5l-.4.6c-.1.2-.3.3-.1.6.2.3.8 1.4 1.8 2.2 1.3 1.1 2.3 1.4 2.6 1.6.3.1.5.1.7-.1l1-1.2c.2-.3.4-.2.7-.1l2 1c.3.1.5.2.6.3 0 .1 0 .7-.3 1.3z" />
      </svg>
    ),
  },
];

// live controls on 21st: the demo merges these over its props
const settings = {
  tagline: "Made it this far? Clear a few lines.",
  showAurora: true,
};

const navItems = [
  { label: "Home", href: "#" },
  { label: "Work", href: "#" },
  { label: "About", href: "#" },
  { label: "Contact", href: "#" },
];

export default function TetrisFooterDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <TetrisFooter logo={BrandMark} navItems={navItems} socials={socials} tagline={s.tagline} showAurora={s.showAurora} />;
}