# Footer Big Type (Moonarc)

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. It waits under the page (FooterReveal): the page slides up and uncovers it, and the name's letters rise from their masks (SplitText) as the uncovering starts. The name's size is the container's width over its length in characters, in container units, so it fills the width from a 320 px phone to a wide screen and never runs out of its box. Zero JavaScript of its own.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/footer-big-type` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<FooterBigType name="Studio" email={{ href, label }}>`
- Browser support: widely (Chrome 105 · Firefox 121 · Safari 16); elsewhere: without :has() the page before the footer is not lifted over it, so the footer sits after the page instead of under it
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 14.0 kB raw)
- Page: https://moonarc.dev/components/footer-big-type/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | none | The name set across the width at the bottom. It is decoration (aria-hidden): say the name in `note` too, where a screen reader reads it. |
| `nameEm` | `string` | none | A second word after the name, set in the emphasis face (--ma-font-em, italic) 1.14 times larger and in the emphasis colour a palette names for the footer's tone: a name in two faces. Its letters rise a beat after the name's. |
| `headline` | `string` | none | The line over the email address. Slot "headline" wins. |
| `email` | `{ href: string; label: string }` | none | The address to write to, shown large: a mailto: link, a 24 px target at least. |
| `columns` | `{ title: string; links: { href, label }[] }[]` | `[]` | Columns of links in a nav named `label`: elsewhere, pages, an office. |
| `note` | `string` | none | The small line at the bottom, e.g. the year and the name. |
| `legal` | `{ href: string; label: string }[]` | `[]` | Links in the bottom line, such as a privacy policy. |
| `label` | `string` | `'Footer'` | Accessible name of the columns' nav. |
| `reveal` | `boolean` | `true` | The footer waits under the page, which slides up and uncovers it; false leaves it in the page's flow. It needs the page's <main> right before it, which the section lifts over itself on the page's ground. On a screen under 34 rem tall, where a footer cannot be uncovered whole, it follows the page. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `'ink'` | The ground. Unset, ink: a footer the page uncovers reads as a layer of its own only if its ground differs from the page's. surface, muted and brand paint theirs. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import FooterBigType from '@/components/moonarc/pro/FooterBigType.astro';
---
<!-- after the page's <main>: the section lifts that <main> over itself on the page's own ground, so the page slides
     off the footer. In a template built on the kit, pass it to the layout's footer slot. -->
<main>…</main>
<FooterBigType
  name="Northfold"
  headline="Have something new to show? Write to us."
  email={{ href: 'mailto:hello@studio.example', label: 'hello@studio.example' }}
  columns={[
    { title: 'Elsewhere', links: [{ href: 'https://example.com/', label: 'Instagram' }] },
    { title: 'Studio', links: [{ href: '/work/', label: 'Work' }, { href: '/about/', label: 'About' }] },
  ]}
  note="© 2026 Northfold"
/>
```

## Reduced motion

The letters are in place from the start; the page still slides off the footer, since that is the reader's own scroll.

## With ClientRouter

Reveal rebinds through the shared runtime after every swap; the footer and the page's lift are CSS.

## Craft

- The rise starts at an edge the section renders just before the footer, one pixel in the page's flow watched by Reveal. The footer itself is on screen from the first frame (sticky at the bottom, under the page), so an observer on it would fire at load, before anyone could see the letters.
- The name is the only thing sized by the viewport, and not by vw: 100cqi over its length in characters and --ma-bigtype-fit (em per character, 0.56 by default, a lowercase name in most grotesks at bold; set it higher for capitals or a wide face), so it keeps its proportion at every width and in any container. A template sets the fit for its own face.
- Each letter rises from a mask of its own (SplitText by character) with the stagger capped at 500 ms: the name assembles in the time the page takes to slide off it.
- Unset, the ground is ink, like the tone of the same name: a footer the page uncovers has to be a different colour from the page, or nothing reads as uncovered.
- A footer taller than the screen could never be uncovered whole: under 34 rem of height the section sets FooterReveal's --ma-fr-position to relative and the footer follows the page.

## Replaces

- Big type footers (Framer studio templates)
- FooterReveal with wordmark (Codrops)
- Footer (Aceternity)

## Source

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