Variable Proximity `<mv-variable-proximity>`

마우스나 펜이 다가오면 글자가 가변 폰트 축(굵기, 너비, 모든 사용자 지정 축)을 따라 부풀어 오릅니다. 반경은 em 단위이며 감쇠는 linear, exponential, gaussian 중에서 고를 수 있습니다. 글자 위치는 정지 상태에서 캐시되므로 필드가 떨리지 않으며, 고정 폰트에서는 크기 조절 효과로 대체됩니다.

카테고리	애니메이션 텍스트
유형	Web Component (`<mv-variable-proximity>`)
상태	안정
Keywords	safe-rewrite, variable-font, proximity, pointer, cursor, weight, typography, pressure

When to use

A heading or text line should swell in weight or width as the cursor approaches
An editorial, typography-driven page wants a subtle pointer effect using variable font axes

Avoid when

A big standalone headline or 404 needs stronger effects or must also animate on touch → use Cursor Type instead
Long body text; letters changing weight under the pointer disturb reading

설치

node scripts/add.mjs variable-proximity --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["variable-proximity"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/variable-proximity/variable-proximity.js, components/variable-proximity/variable-proximity.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:grid;gap:1.25rem;justify-items:center;text-align:center;padding:2rem 1rem;width:100%;min-height:300px;align-content:center;box-sizing:border-box;font-family:'Inter var','Segoe UI Variable Display',system-ui,sans-serif">
  <p style="margin:0;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1;letter-spacing:-.02em">
    <mv-variable-proximity from="'wght' 300" to="'wght' 800" radius="2.4" falloff="gaussian">Move your cursor closer</mv-variable-proximity>
  </p>
  <p style="margin:0;font-size:1.35rem;color:var(--mv-fg-muted)">
    <mv-variable-proximity from="'wght' 350" to="'wght' 700" radius="4" style="--mv-variable-proximity-color:var(--mv-accent)">Living typography, driven by distance.</mv-variable-proximity>
  </p>
  <p style="margin:.5rem 0 0;font-size:.8rem;color:var(--mv-fg-subtle)">Font without variable axes? It automatically falls back to a scale effect.</p>
</div>

API

Attributes

Name	유형	Default	Description
`from`	font-variation-settings	`'wght' 400`	Axes at rest (e.g. "'wght' 300, 'wdth' 75"). wght → font-weight and wdth → font-stretch (also works with system variable fonts); other axes go through font-variation-settings.
`to`	font-variation-settings	`'wght' 900`	Axes under the cursor.
`radius`	number	`3`	Influence radius, in em (the element's font size), measured from the pointer to each letter's resting center.
`falloff`	linear \| exponential \| gaussian	`linear`	Falloff curve over distance: linear, exponential (sharp peak, long tail) or gaussian (soft plateau under the pointer).

CSS variables

Name	Default	Description
`--mv-variable-proximity-color`		Color that nearby letters tint toward (none by default).
`--mv-variable-proximity-scale`	`0.35`	Max scale-up in fallback mode (non-variable font).
`--mv-t`		Exposed on each letter (0 → 1) for your own styles.

Accessibility

The text is exposed once through a visually hidden copy; the split letters are aria-hidden. A decorative effect for mouse and pen, with no keyboard impact (touch leaves the text at rest). The rAF loop only runs while the pointer moves or letters settle, and is off with reduced motion. Forced colors: the tint is dropped. If the font doesn't interpolate the requested axes (static font), it automatically falls back to a scale effect.