Bento Grid
Overview
A four-tile feature layout with uneven widths: bars rise one by one, numbers count up, tags rotate. The hovered tile lifts slightly while the others step back.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Bento Grid to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add bento-grid
mcp › Use 8pt MCP to call get_component("bento-grid")
Code
Source for Bento Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-bento">
<article class="x-bento__c x-bento__c--wide">
<small>Builds this week</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>Pass rate</small><b>98.6%</b>
<span class="x-bento__dot" aria-hidden="true"></span>
</article>
<article class="x-bento__c">
<small>Model</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);
…Subscribe to Builder to see the full source.See pricing