Footer Reveal
ScrollThe page content slides up to reveal a footer that is already in place underneath.
every browserscroll
Footer Big Type
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.
Live demo
scroll inside
Line 1 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 2 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 3 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 4 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 5 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 6 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 7 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 8 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 9 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 10 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 11 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 12 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 13 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 14 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 15 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 16 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 17 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 18 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 19 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 20 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 21 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 22 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 23 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 24 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 25 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 26 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 27 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 28 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 29 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
Line 30 of a sample page. It has a ground of its own and sits over the footer; at its end it slides up and the footer is already there.
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
tone
density
columns
Measured
JavaScript of its own
0 B
Uses Reveal and the shared runtime (1.9 kB raw, once per site). With those included: 3.0 kB raw.
CSS 14.0 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
Chrome 105 · Firefox 121 · Safari 16; needs container-units, has. Elsewhere: without :has() the page before the footer is not lifted over it, so the footer sits after the page instead of under it.
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:
npx shadcn@latest add @moonarc-pro/footer-big-type---
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"
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: footer-reveal, reveal, split-text, underline-hover.
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. |
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-bigtype.ma-bigtype__actions.ma-bigtype__aside.ma-bigtype__bottom.ma-bigtype__columns.ma-bigtype__edge.ma-bigtype__em.ma-bigtype__email.ma-bigtype__headline.ma-bigtype__inner.ma-bigtype__lead.ma-bigtype__name.ma-bigtype__title.ma-bigtype__top.ma-in.ma-split__mask.ma-split__part
Slots
slot="headline"slot="actions"slot="aside"
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.
Why it is built this way
- 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). See the migration table.
Related
Split Text
TextSplits a string into words, characters or lines on the server and reveals them with a capped stagger when they scroll into view.
every browserscroll
Underline Hover
TextA link underline that enters from the left on hover and leaves to the right, so the exit continues the entrance instead of rewinding it.
every browserhover
Footer
ProA 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
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown