Footer Phosphor — React Footer Component

A wordmark made of light. Its cells scatter around your pointer and settle back into place.

Starting live preview

Usage

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

export function PageFooter() {
  return (
    <FooterPhosphor
      cta={{"label":"Say hello","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 STILL"}
      legal={[{"label":"Back to the collection","href":"/footers"}]}
      brand={"STILL"}
      title={"Keep in touch."}
      color={"#d2f8a2"}
      background={"#17201b"}
      {...{
        brand: "STILL",
        title: "Keep in touch.",
        interactive: true,
        color: "#d2f8a2",
        background: "#17201b"
      }}
    />
  );
}

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