Bento Grid
介绍
四格不等宽的功能布局：柱状图逐根升起、数字递增、标签轮播。悬停的格子轻微上浮，其余格子退后。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Bento Grid 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add bento-grid
mcp › 使用 8pt MCP 调用 get_component("bento-grid")
代码
Bento Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bento">
<article class="x-bento__c x-bento__c--wide">
<small>本周构建</small><b class="x-bento__num" data-to="1284">0</b>
<div class="x-bento__bars" aria-hidden="true"><i style="--h:.42"></i><i style="--h:.66"></i><i style="--h:.5"></i><i style="--h:.84"></i><i style="--h:.62"></i><i style="--h:1"></i><i style="--h:.74"></i></div>
</article>
<article class="x-bento__c x-bento__c--tall">
<small>通过率</small><b>98.6%</b>
<span class="x-bento__dot" aria-hidden="true"></span>
</article>
<article class="x-bento__c">
<small>模型</small>
<div class="x-bento__rot" aria-live="polite"><span>Claude</span><span>GPT</span><span>DeepSeek</span><span>Qwen</span></div>
….x-bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;width:min(420px,100%);height:min(230px,100%);color:var(--d-fg,#fff)}
.x-bento__c{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.1));transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.x-bento:hover .x-bento__c{opacity:.6}
.x-bento .x-bento__c:hover{opacity:1;transform:translateY(-3px)}
.x-bento__c--wide{grid-row:span 2}
.x-bento__c--tall{grid-column:span 2}
.x-bento__c--ac{background:color-mix(in srgb,var(--d-accent,#4D74FF) 22%,var(--d-card,#14141c));border-color:color-mix(in srgb,var(--d-accent,#4D74FF) 45%,transparent)}
.x-bento small{font:500 11px/1.2 var(--d-font,system-ui,sans-serif);color:var(--d-muted,#9b9ba8)}
.x-bento b{font:700 20px/1.1 var(--d-font,system-ui,sans-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.x-bento__bars{flex:1;display:flex;align-items:flex-end;gap:5px;margin-top:8px}
.x-bento__bars i{flex:1;height:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--d-accent,#4D74FF),color-mix(in srgb,var(--d-accent,#4D74FF) 30%,transparent));transform-origin:bottom;transform:scaleY(.04);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.x-bento.in .x-bento__bars i{transform:scaleY(var(--h))}
…const init = (root) => {
const box = root.querySelector('.x-bento'), num = box.querySelector('.x-bento__num');
const words = [...box.querySelectorAll('.x-bento__rot span')];
let i = 0, timer, raf;
words[0].classList.add('on');
const count = () => {
const to = +num.dataset.to, t0 = performance.now();
const step = (t) => { const k = Math.min(1, (t - t0) / 1200), e = 1 - Math.pow(1 - k, 3); num.textContent = Math.round(to * e).toLocaleString('en-US'); if (k < 1) raf = requestAnimationFrame(step); };
raf = requestAnimationFrame(step);
};
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { box.classList.add('in'); count(); io.disconnect(); } });
io.observe(box);
…订阅 Builder 查看完整源码。查看价格