# Footer Signoff (Moonarc)

A footer that signs off like a letter: on a strong colour block, a line of thanks, the name set large with its second part in the emphasis face and a stroke drawn under that part, a way back to the signup, the links in columns and a few small lines at the foot. The stroke draws itself as the footer comes into view; where there is no view timeline, or under reduced motion, it is drawn from the start. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/footer-signoff` (license key required)
- Tier B · category section · trigger scroll, hover
- Readout: `<FooterSignoff name="Your" nameEm="Name" action={{ href, label }} columns={[{ title, links }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the stroke is drawn from the start where there is no view timeline (Firefox); without container units the name keeps the page's text size and the panel has no padding
- Measured cost: 0 B JS (CSS 10.2 kB raw)
- Page: https://moonarc.dev/components/footer-signoff/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | none | The name, set large in the display face. Required. |
| `nameEm` | `string` | none | A second part of the name, set in the emphasis face and colour after a space, with the stroke under it. |
| `signoff` | `string` | none | The line of thanks over the name: "Thanks for reading". |
| `action` | `{ href: string; label: string }` | none | A way back to the signup, or to whatever you most want a reader to do next: a filled button with an arrow. |
| `columns` | `{ title: string; links: { href: string; label: string }[] }[]` | `[]` | The link columns, each a nav named by its title. |
| `lines` | `string[]` | `[]` | Small lines at the foot, in the mono face: where it is written, the year. |
| `block` | `1 | 2 | 3 | 4 | 5` | `5` | The colour block the panel paints: the strong one, 5 in every palette. |

## Usage

```astro
---
import FooterSignoff from '@/components/moonarc/pro/FooterSignoff.astro';
---
<FooterSignoff
  signoff="Thanks for reading"
  name="Your"
  nameEm="Name"
  action={{ href: '#signup', label: 'Subscribe' }}
  columns={[
    { title: 'Read', links: [{ href: '/issues/', label: 'Issues' }, { href: '/episodes/', label: 'Episodes' }] },
    { title: 'Elsewhere', links: [{ href: 'https://example.com/', label: 'Mastodon' }, { href: '/rss.xml', label: 'RSS' }] },
  ]}
  lines={['Written in Lisbon', '© 2026']}
/>
```

## Reduced motion

The stroke is drawn from the start, and the links' underline and the button's rise change at once.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- The stroke is one path with a path length of 1, so its dash is a share of the line and the same two numbers draw it at any width. It takes the emphasis colour with the second part of the name.
- The stroke's resting state is the finished one. The undrawn start exists only inside a view-timeline and no-preference condition, so a browser without view timelines, and a reader who asks for reduced motion, get the whole stroke.
- The name is set from 3rem to 8.5rem by the footer's width, scaled by --ma-display-scale, and wraps anywhere rather than overflowing, so a long name fits a phone.
- Each link column is a nav named by its title, so a screen reader lists the columns by name. The stroke is hidden from assistive technology.

## Replaces

- Footers (Framer templates)
- Newsletter site footers (Ghost themes)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/footer-signoff` with a key in components.json (https://moonarc.dev/account/).