Footer Signoff

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.

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Variants · each row writes the attribute the prop writes; the section's own CSS answers

columnsunset

Measured

JavaScript of its own

0 B

CSS 10.2 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Limited availability

Chrome 115 · not Firefox · Safari 26; needs scroll-timeline, container-units. 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.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/footer-signoff

src/pages/index.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']}
/>

Without a key the registry answers 401 with an upgrade message.

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.

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Classes

.ma-signoff.ma-signoff__action.ma-signoff__column.ma-signoff__columns.ma-signoff__lines.ma-signoff__name.ma-signoff__panel.ma-signoff__sign.ma-signoff__stroke.ma-signoff__thanks.ma-signoff__title.ma-signoff__top

Slots

none

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.

Why it is built this way

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). See the migration table.

Footer

Pro

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.

every browserscroll

Footer Big Type

Pro

A footer for a studio or a person: a line and the email address to write to, columns of links, and the name set across the whole width at the bottom.

every browserscroll

Footer Label

Pro

The foot of a maker's site, made like the label sewn into what they make: a panel in a colour block with a stitched edge, the name large (a second part in the emphasis face), the link columns, a row of care symbols drawn as line icons with their words (how to wash it, that it goes in the oven, that it is mended for free) and a few small lines in the mono face.

every browserhover

Hero Bento

Pro

The first screen of one person's work, as a bento.

newly · Chrome 105 · Firefox 128 · Safari 17pointerscrollalways

One letter a week, in your inbox

Free, every Friday at nine. One click to leave from any issue.

Demo: nothing is sent.

Read by 12,480 people every Friday

SitenameFriday, 09:00

No. 187: The button at the end

Hello, and happy Friday.

This week is about the last button on a form: what it says, where it sits, and what happens after it is pressed.

The rest lands on Friday

Signup Preview

Pro

A newsletter signup beside a look at what arrives: the heading, a line, one email field with its button and the count of people already reading, and next to them the next issue as it lands in an inbox (who it is from, the subject, the day it sends, its first lines fading out) on a small stack of the issues before it.

every browserclickhover

Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown