Footer

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.

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

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 10.5 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 120 · Firefox 53 · Safari 15.4; needs mask-image.

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-section

src/pages/index.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."
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal, dot-pattern.

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.

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-footer.ma-footer__actions.ma-footer__aside.ma-footer__bottom.ma-footer__brand.ma-footer__columns.ma-footer__dots.ma-footer__inner.ma-footer__title

Slots

slot="headline"slot="copy"slot="actions"slot="aside"

Reduced motion

Columns fade in without stagger; dots hold still.

With `ClientRouter`

Inherits Reveal; nothing to rebind.

Why it is built this way

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

Dot Pattern

Backgrounds

A field of dots behind content, faded toward the edges, with an optional slow pulse.

every browseralways

Scroll Reveal

Scroll

Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation.

every browserscroll

scroll inside

Line 1: the bar above condenses with the first 120 px of scroll.

Line 2: the bar above condenses with the first 120 px of scroll.

Line 3: the bar above condenses with the first 120 px of scroll.

Line 4: the bar above condenses with the first 120 px of scroll.

Line 5: the bar above condenses with the first 120 px of scroll.

Line 6: the bar above condenses with the first 120 px of scroll.

Line 7: the bar above condenses with the first 120 px of scroll.

Line 8: the bar above condenses with the first 120 px of scroll.

Sticky Nav Bar

Pro

A sticky navigation bar that condenses over the first 120 px of scroll: the row tightens and a hairline appears, bound to the document's scroll timeline.

Chrome 115 · not Firefox · Safari 26scroll

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