Wordmark Footer `<mv-wordmark-footer>`

Pied de page avec des colonnes de liens au-dessus d’un nom de marque géant au trait fin, ajusté à la largeur : le pointeur, le focus clavier ou un toucher est projeté sur les lettres, où un projecteur les remplit d’un dégradé ou d’une couleur unie par-dessus un léger voile au repos.

Catégorie	Blocs
Type	Bloc (section prête à l’emploi) (`<mv-wordmark-footer>`)
Statut	stable
Keywords	footer, pied de page, wordmark, spotlight, mask, outline, cursor, keyboard, landing

When to use

A brand-led site wants its footer to end on a giant outlined name that lights up under the pointer or keyboard focus
Link columns should sit above a full-width wordmark that answers the column being browsed

Avoid when

The footer needs a newsletter, contact tiles or a statement headline → use Footer instead

Installation

node scripts/add.mjs wordmark-footer --out ./src/marvelous

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["wordmark-footer"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/wordmark-footer/wordmark-footer.js, components/wordmark-footer/wordmark-footer.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<mv-wordmark-footer style="width:100%">
  <footer class="mv-wordmark-footer">
    <div class="mv-wordmark-footer-top">
      <div class="mv-wordmark-footer-brand">
        <a class="mv-wordmark-footer-logo" href="#home">
          <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M3 15c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
          Tidewell
        </a>
        <p class="mv-wordmark-footer-tagline">Scheduling for field teams. Plan the week, route the day and keep every crew in sync.</p>
        <a class="mv-badge" data-variant="outline" href="#status" style="gap:.375rem;text-decoration:none"><span aria-hidden="true" style="width:.5rem;height:.5rem;border-radius:50%;background:var(--mv-success)"></span>All systems operational</a>
      </div>
      <nav class="mv-wordmark-footer-nav" aria-label="Footer">
        <div>
          <h2 class="mv-wordmark-footer-heading">Product</h2>
          <ul class="mv-wordmark-footer-links">
            <li><a href="#planner">Planner</a></li>
            <li><a href="#routes">Route optimizer</a></li>
            <li><a href="#mobile">Mobile app</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h2 class="mv-wordmark-footer-heading">Company</h2>
          <ul class="mv-wordmark-footer-links">
            <li><a href="#about">About</a></li>
            <li><a href="#customers">Customers</a></li>
            <li><a href="#careers">Careers</a></li>
            <li><a href="#press">Press kit</a></li>
          </ul>
        </div>
        <div>
          <h2 class="mv-wordmark-footer-heading">Support</h2>
          <ul class="mv-wordmark-footer-links">
            <li><a href="#docs">Documentation</a></li>
            <li><a href="#api">API reference</a></li>
            <li><a href="#mail">[email protected]</a></li>
            <li><a href="#community">Community</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="mv-wordmark-footer-bottom">
      <span>© 2026 Tidewell Inc. · 548 Market Street, San Francisco, CA</span>
      <ul>
        <li><a href="#terms">Terms</a></li>
        <li><a href="#privacy">Privacy</a></li>
        <li><a href="#cookies">Cookies</a></li>
      </ul>
    </div>
    <div class="mv-wordmark-footer-mark" aria-hidden="true">Tidewell</div>
  </footer>
</mv-wordmark-footer>

API

Attributes

Name	Type	Default	Description
`radius`	number	`220`	Full spotlight radius in px (capped at 35% of the width); it shrinks to 45% while the pointer is far above the letters.
`fit`	width \| none	`width`	width: the wordmark size is computed to fill the full width; none: --_fs / 17cqi.
`data-fill (on .mv-wordmark-footer)`	gradient \| solid	`gradient`	Fill under the spotlight.
`data-lit`	boolean		Set on the host while the spotlight is on (read-only).

Content structure

Name	Description
`.mv-wordmark-footer-top`	.mv-wordmark-footer-brand (-logo, -tagline) + nav.mv-wordmark-footer-nav (columns of .mv-wordmark-footer-heading + ul.mv-wordmark-footer-links).
`.mv-wordmark-footer-bottom`	Bottom bar: copyright and legal links.
`.mv-wordmark-footer-mark`	Last child, aria-hidden: the brand name as plain text, redrawn by CSS as an outline + a masked fill (no duplicated text nodes).

CSS classes

Name	Description
`mv-wordmark-footer`	Root (on `<footer>`, inside `<mv-wordmark-footer>`), query container.
`mv-wordmark-footer-outline / -fill / -glow`	Generated wordmark layers (outline and fill draw their data-text attribute).

CSS variables

Name	Default	Description
`--mv-wordmark-footer-fill`	`accent → pink → amber gradient`	Revealed fill (any background value).
`--mv-wordmark-footer-stroke`	`var(--mv-border-strong)`	Outline color.
`--mv-wordmark-footer-weight`	`800`	Wordmark font weight.
`--mv-wordmark-footer-columns`	`3`	Link columns (from 40rem).
`--mv-wordmark-footer-max`	`72rem`	Max content width.
`--mv-wordmark-footer-bg`	`var(--mv-bg)`	Background.

Accessibility

Native <footer> element (contentinfo landmark), navigation named via aria-label, column headings and links with visible focus; long links wrap instead of scrolling down to 320px. The wordmark is aria-hidden, ignores the pointer and holds no duplicated text (layers are drawn by CSS), so the brand name is read once, from the logo. Keyboard focus on a link lights the letters under it; a fine pointer lights them from anywhere over the footer; a tap lights the touched column for a moment. Reduced motion: the spotlight jumps without smoothing. Forced colors: plain outline, no fill.