Footer Fold — React Footer Component

Your wordmark becomes a hinged paper screen. Each panel turns toward the passing pointer.

Starting live preview

Usage

import { FooterFold } from "@/components/FooterFold";

export function PageFooter() {
  return (
    <FooterFold
      cta={{"label":"Begin a project","href":"mailto:hello@example.com"}}
      groups={[{"label":"Explore","links":[{"label":"Our work","href":"/heroes"},{"label":"The collection","href":"/footers"},{"label":"Get started","href":"/installation"}]},{"label":"Elsewhere","links":[{"label":"GitHub","href":"https://github.com/zjy365/vfx-ui"},{"label":"For agents","href":"/llms.txt"}]}]}
      copyright={"© 2026 FORM"}
      legal={[{"label":"Back to the collection","href":"/footers"}]}
      brand={"FORM"}
      title={"Leave it wide open."}
      color={"#292454"}
      background={"#e5e0f0"}
      {...{
        brand: "FORM",
        title: "Leave it wide open.",
        interactive: true,
        color: "#292454",
        background: "#e5e0f0",
        depth: 32
      }}
    />
  );
}

Implementation notes & API

A semantic footer with customizable brand, title, description, CTA, navigation groups, copyright and legal links. Example links belong to the demo; replace them with your own routes. children replaces the intro and navigation. No WebGPU or animation library required. Touch and reduced-motion preserve a composed static design. Canvas work sleeps offscreen. Set --vfx-footer-display through style to use your brand font.

Property	Type	Notes / default
`brand`	`string`	Your brand; the artwork is generated from this text
`title / description`	`ReactNode`	Replaceable example copy
`cta`	`FooterLink \| null`	{ label, href }; omitted by default
`groups`	`FooterLinkGroup[]`	[{ label, links: [{ label, href }] }]; empty by default
`legal`	`FooterLink[]`	Optional legal or social links
`copyright`	`ReactNode`	Optional bottom line
`children`	`ReactNode`	Replaces the introduction and navigation; artwork remains
`interactive`	`boolean`	true; pointer motion respects reduced-motion and touch
`className / style`	`string / CSSProperties`	Applied to footer; --vfx-footer-display sets the display font

View source on GitHubFree for commercial projects · MIT