Beta

Cursor Type `<mv-cursor-type>`

Ein großes Wort (eine 404, ein Schlüsselwort), dessen Buchstaben auf einen präzisen Zeiger reagieren, jeder mit eigener Feder: eine anschwellende variable Strichstärke, elastisches Strecken von der Grundlinie aus, beiseitegeschobene Buchstaben, die sich dabei neigen, oder eine Lupe im Dock-Stil, die Nachbarn auseinanderschiebt. Funktioniert mit dem bloßen Tag, behält den echten Text für Screenreader und driftet dort, wo es keine Maus gibt, langsam von selbst.

Kategorie	Cursor
Typ	Web Component (`<mv-cursor-type>`)
Status	Beta
Keywords	cursor, typography, 404, variable-font, weight, elastic, scatter, magnify, dock, spring, headline, accessible

When to use

A 404 page or error screen needs one big headline that reacts letter by letter to the mouse
A launch or showcase title should swell, stretch, scatter or magnify under the cursor without extra setup
The headline should still feel alive on phones and tablets through a slow automatic drift

Avoid when

Inline text or a subtle weight shift near the pointer is enough → use Variable Proximity instead
Body copy or multi-line text; the effect is designed for one large headline

Installation

node scripts/add.mjs cursor-type --out ./src/marvelous

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["cursor-type"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/cursor-type/cursor-type.js, components/cursor-type/cursor-type.css.

Verwendung

Schnellstart mit dem kleinsten funktionierenden Markup:

<mv-cursor-type>404</mv-cursor-type>

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1rem;width:100%;max-width:52rem;font-family:'Inter var','Segoe UI Variable Display','Segoe UI Variable',system-ui,sans-serif">
  <section style="position:relative;display:grid;place-items:center;min-height:14rem;padding:1.5rem;overflow:hidden;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
    <mv-cursor-type variant="weight" radius="120" style="font-size:clamp(5rem,12vw,7.5rem);letter-spacing:-.04em">404</mv-cursor-type>
    <small style="position:absolute;left:1.125rem;bottom:.875rem;color:var(--mv-fg-subtle)">weight: variable weight</small>
  </section>
  <section style="position:relative;display:grid;place-items:center;min-height:14rem;padding:1.5rem;overflow:hidden;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
    <mv-cursor-type variant="stretch" style="font-size:clamp(4rem,9vw,5.5rem);font-weight:800;letter-spacing:-.03em">Oops</mv-cursor-type>
    <small style="position:absolute;left:1.125rem;bottom:.875rem;color:var(--mv-fg-subtle)">stretch: elastic letters</small>
  </section>
  <section style="position:relative;display:grid;place-items:center;min-height:14rem;padding:1.5rem;overflow:hidden;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-bg-emphasis)">
    <mv-cursor-type variant="scatter" radius="140" style="font-size:clamp(3.5rem,8vw,4.75rem);font-weight:700;letter-spacing:-.03em">Lost?</mv-cursor-type>
    <small style="position:absolute;left:1.125rem;bottom:.875rem;color:var(--mv-fg-muted)">scatter: letters scatter</small>
  </section>
  <section style="position:relative;display:grid;place-items:center;min-height:14rem;padding:1.5rem;overflow:hidden;border:1px solid var(--mv-border);border-radius:var(--mv-radius-xl);background:var(--mv-surface)">
    <mv-cursor-type variant="magnify" radius="120" style="font-size:clamp(2.75rem,6vw,3.5rem);font-weight:650;letter-spacing:-.02em;color:var(--mv-accent-fg)">Nowhere</mv-cursor-type>
    <small style="position:absolute;left:1.125rem;bottom:.875rem;color:var(--mv-fg-subtle)">magnify: dock-style magnifier</small>
  </section>
</div>

API

Attributes

Name	Typ	Default	Description
`variant`	weight \| stretch \| scatter \| magnify	`weight`	What the letters do near the cursor: swell in weight, stretch tall, scatter away or magnify like a dock.
`radius`	number	`180`	Cursor influence radius (px).
`strength`	number	`1`	Strength (0 to 3).
`min-weight / max-weight`	number	`200 / 900`	weight: weight at rest and under the cursor. A font without a weight axis ⇒ falls back to scaling.
`idle`	auto \| always \| off	`auto`	Slow virtual cursor: auto where there is no fine hover pointer (touch, pen-only), always = even with a mouse, off = never. Off under reduced motion.

CSS classes

Name	Description
`mv-cursor-type-stage / -char / -glyph`	Generated parts (position on -char, scale / weight on -glyph).

CSS variables

Name	Default	Description
`--mv-cursor-type-rest-weight`	`200`	weight: weight before the script initializes.

Accessibility

The word is exposed once through a visually hidden copy of the real text; the animated letters are an aria-hidden duplicate and ignore pointer events. Nothing needs to be operated, so there is nothing to reach by keyboard. Pointer reactions only run under (hover: hover) and (pointer: fine), touch events are ignored, and the system cursor is never hidden or replaced. The pointer is read on the parent, so the field reaches past the word. Reduced motion: letters follow the pointer one to one with no spring lag or overshoot, and the idle drift is off. Colors come from the host text, so forced colors apply unchanged. The frame loop sleeps at rest and pauses off screen.