Variable Proximity <mv-variable-proximity>
鼠标或触控笔靠近时，字母沿可变字体轴（字重、字宽、任意自定义轴）膨胀，半径以 em 为单位，衰减方式可选线性、指数或高斯；字母位置在静止时缓存，因此场效应绝不抖动，静态字体则回退为缩放效果。
| 分类 | 动画文字 |
|---|---|
| 类型 | 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.