# Footer (Moonarc)

A site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge. Pure CSS.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/footer-section` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<FooterSection brand={{…}} columns={[…]}>`
- Browser support: widely (Chrome 120 · Firefox 53 · Safari 15.4)
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 10.5 kB raw)
- Page: https://moonarc.dev/components/footer-section/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `{ label, blurb?, href? }` | none | Brand link and blurb. |
| `label` | `string` | `'Footer'` | Accessible name of the columns' nav. Make it unique per page. |
| `columns` | `{ title, links: { href, label }[] }[]` | none | Link columns. |
| `legal` | `{ href, label }[]` | none | Bottom-row links. |
| `note` | `string` | none | Bottom-row text (copyright, licence). |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import FooterSection from '@/components/moonarc/pro/FooterSection.astro';
---
<FooterSection
  brand={{ label: 'Moonarc', blurb: 'Zero-runtime motion for Astro.' }}
  columns={[
    { title: 'Product', links: [{ href: '/components/', label: 'Components' }, { href: '/pro/', label: 'Pro' }] },
    { title: 'Docs', links: [{ href: '/docs/', label: 'Docs' }, { href: '/setup/', label: 'Setup' }] },
  ]}
  legal={[{ href: '/privacy/', label: 'Privacy' }, { href: '/terms/', label: 'Terms' }]}
  note="MIT, forever."
/>
```

## Reduced motion

Columns fade in without stagger; dots hold still.

## With ClientRouter

Inherits Reveal; nothing to rebind.

## Craft

- The dot field fades out over the bottom 70% of the footer, strongest at the edge, so it reads as ground, not pattern.
- Columns stagger 60 ms: a footer is the last thing revealed on a page and should arrive quietly.
- The bottom row is separated by a hairline, never a colour change.

## Replaces

- Footers (Tailwind Plus)
- Footer (shadcnblocks)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/footer-section` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: reveal, dot-pattern.