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/marvelousMarvelous 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.