Hover Preview
介绍
正文里的关键词悬停时，跟随指针浮出一张预览卡；卡片内容是纯 CSS 绘制。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Hover Preview 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add hover-preview
mcp › 使用 8pt MCP 调用 get_component("hover-preview")
代码
Hover Preview 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-hp">
<p>好的界面从<a data-k="grid">网格系统</a>开始，靠<a data-k="type">字体排印</a>建立层级，再用<a data-k="ease">动效曲线</a>让它活起来。</p>
<div class="x-hp__card" aria-hidden="true">
<div class="x-hp__art" data-art="grid"></div>
<div class="x-hp__art" data-art="type">Aa</div>
<div class="x-hp__art" data-art="ease"><svg viewBox="0 0 100 60"><path d="M4 56 C 44 56, 50 4, 96 4" fill="none" stroke="currentColor" stroke-width="2.5"/></svg></div>
</div>
</div>.x-hp{position:relative;width:min(460px,100%);color:var(--d-fg,#fff)}
.x-hp p{margin:0;font:500 clamp(17px,2.2vw,22px)/1.7 var(--d-font,system-ui,sans-serif);letter-spacing:-.01em;color:var(--d-muted,#a0a0ab)}
.x-hp a{color:var(--d-fg,#fff);font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--d-accent,#4D74FF) 70%,transparent);text-underline-offset:5px;cursor:default}
.x-hp__card{position:absolute;left:0;top:0;width:180px;height:120px;border-radius:14px;overflow:hidden;background:#0c0c14;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 50px -20px rgba(0,0,0,.7);opacity:0;pointer-events:none;transform:translate(0,0) scale(.9);transition:opacity .2s;will-change:transform;z-index:3}
.x-hp__card.on{opacity:1}
.x-hp__art{position:absolute;inset:0;display:none;place-items:center;color:#fff}
.x-hp__art.on{display:grid}
.x-hp__art[data-art=grid]{background:linear-gradient(#4D74FF33 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,#4D74FF33 1px,transparent 1px) 0 0/16px 16px,radial-gradient(circle at 30% 30%,#4b3bff,#0c0c14 70%)}
.x-hp__art[data-art=type]{font:700 64px/1 Georgia,serif;background:linear-gradient(135deg,#1b1b2a,#0c0c14)}
.x-hp__art[data-art=ease]{padding:18px;background:linear-gradient(135deg,#0d2230,#0c0c14);color:#7cf3ff}
.x-hp__art svg{width:100%;height:100%}const init = (root) => {
const box = root.querySelector('.x-hp'), card = box.querySelector('.x-hp__card'), arts = card.querySelectorAll('.x-hp__art');
let x = 0, y = 0, tx = 0, ty = 0, s = .9, ts = .9, raf = 0;
const tick = () => {
x += (tx - x) * .2; y += (ty - y) * .2; s += (ts - s) * .2;
card.style.transform = `translate(${x}px, ${y}px) scale(${s})`;
raf = Math.abs(tx - x) + Math.abs(ty - y) + Math.abs(ts - s) > .05 ? requestAnimationFrame(tick) : 0;
};
box.querySelectorAll('a').forEach(a => {
a.addEventListener('pointerenter', () => { arts.forEach(el => el.classList.toggle('on', el.dataset.art === a.dataset.k)); card.classList.add('on'); ts = 1; });
a.addEventListener('pointerleave', () => { card.classList.remove('on'); ts = .9; });
});
…订阅 Builder 查看完整源码。查看价格