Library Bento Grid
Overview
A three-by-two light gray rounded bento, one content type per tile: a fan of app icons, bookshelf-style site thumbnails, a phone screen, a two-screen flow, a pulse animation and a toolbar with rotating highlights. Each tile expands or lifts on hover.
Taken from the page template Banshi Design Reference Library Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
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 Library 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 library-bento-grid
mcp › Use 8pt MCP to call get_component("library-bento-grid")
Code
Source for Library Bento Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-bbg"><section class="bs-bt"><div class="bs-wrap"><h2 class="bs-h2">一座库，<br>装下你要找的一切。</h2><div class="bs-bt__g"><a class="bs-bt__c" href="#"><b>App</b><div class="bs-bt__v"><div class="bs-bt__apps"><span class="bs-ic a1" style="width:76px;height:76px;background:linear-gradient(145deg,#fb7185,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="bs-ic a2" style="width:84px;height:84px;background:linear-gradient(145deg,#fde047,#f59e0b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg></span><span class="bs-ic a3" style="width:76px;height:76px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span></div></div></a><a class="bs-bt__c" href="#"><b>网站</b><div class="bs-bt__v"><div class="bs-bt__shelf"><div class="bs-bt__row"><i style="background:#a78bfa"></i><i style="background:#f472b6"></i><i style="background:#facc15"></i><i style="background:#60a5fa"></i><i style="background:#34d399"></i></div><div class="bs-bt__row"><i style="background:#fb923c"></i><i style="background:#1f2937"></i><i style="background:#e879f9"></i><i style="background:#38bdf8"></i><i style="background:#f87171"></i></div></div></div></a><a class="bs-bt__c" href="#"><b>界面</b><div class="bs-bt__v"><div class="bs-bt__phone"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar s"></div><div class="bs-ph__hero" style="background:#2563eb22"><span style="width:58%;aspect-ratio:1;border-radius:50%;background:#2563eb;display:block"></span></div><div class="bs-ph__bar d m"></div><div class="bs-ph__bar"></div><div class="bs-ph__bar s"></div><div class="bs-ph__btn"></div></div></div></div></a><a class="bs-bt__c" href="#"><b>流程</b><div class="bs-bt__v"><div class="bs-bt__flow"><div><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar" style="height:20px;border-radius:8px"></div><div class="bs-ph__row"><b style="background:#fde68a"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bfdbfe"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fecdd3"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bbf7d0"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#e9d5ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div></div></div><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 12h15M13.5 6l6 6-6 6"/></svg></span><div><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bub">你好，想从哪里开始？</div><div class="bs-ph__bub me">先看看新手引导</div><div class="bs-ph__bub">好的，帮你挑了几种做法</div><div class="bs-ph__bub me">第二种不错</div><div class="bs-ph__bar" style="height:20px;border-radius:999px;margin-top:auto"></div></div></div></div></div></a><a class="bs-bt__c" href="#"><b>动效</b><div class="bs-bt__v"><div class="bs-bt__phone bs-bt__anim"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m" style="height:14px;background:#111"></div><div class="bs-ph__bars"><i style="height:40%;background:#111"></i><i style="height:65%;background:#111"></i><i style="height:50%;background:#111"></i><i style="height:85%;background:#111"></i><i style="height:60%;background:#111"></i><i style="height:95%;background:#e11d48"></i><i style="height:70%;background:#111"></i></div><div class="bs-ph__row"><b style="background:#e0e7ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fee2e2"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div></div><span class="bs-bt__pulse"></span></div></div></a><a class="bs-bt__c" href="#"><b>组件</b><div class="bs-bt__v"><div class="bs-bt__tool"><i class="t0"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13.5V18a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 20 18v-4.5M4 13.5 6.5 5h11l2.5 8.5M4 13.5h4.5l1.2 2h4.6l1.2-2H20"/></svg></i><i class="t1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8.5V5.5A1.5 1.5 0 0 1 5.5 4h3M15.5 4h3A1.5 1.5 0 0 1 20 5.5v3M20 15.5v3a1.5 1.5 0 0 1-1.5 1.5h-3M8.5 20h-3A1.5 1.5 0 0 1 4 18.5v-3"/><circle cx="12" cy="12" r="2.5"/></svg></i><i class="t2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 4 2.4 5 5.4.7-4 3.7 1 5.4L12 16.2 7.2 18.8l1-5.4-4-3.7 5.4-.7z"/></svg></i><i class="t3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m8 9 4-4 4 4M8 15l4 4 4-4"/></svg></i><i class="t4"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg></i></div></div></a></div></div></section></div>
.x-bbg{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bbg *{box-sizing:border-box;margin:0;padding:0}.x-bbg{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bbg a{color:inherit;text-decoration:none}.x-bbg button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bbg .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bbg .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bbg .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bbg .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bbg .bs-btn--dark{background:var(--ink);color:#fff}.x-bbg .bs-btn--dark:hover{background:#2a2a2e}.x-bbg .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bbg .bs-btn--gray:hover{background:#e2e2e5}.x-bbg .bs-btn svg{width:16px;height:16px}.x-bbg .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bbg .bs-ic svg{width:56%;height:56%}.x-bbg .bs-ph{position:relative;width:100%;aspect-ratio:9/19.5;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 18px 40px -24px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;gap:8px;font-size:9px;color:#111}.x-bbg .bs-ph__sb{display:flex;justify-content:space-between;font-weight:600;font-size:8px}.x-bbg .bs-ph__sb i{display:inline-block;width:18px;height:6px;border-radius:2px;background:#111;margin-left:3px}.x-bbg .bs-ph__bar{height:6px;border-radius:3px;background:#ececef}.x-bbg .bs-ph__bar.s{width:45%}.x-bbg .bs-ph__bar.m{width:70%}.x-bbg .bs-ph__bar.d{background:#1a1a1e}.x-bbg .bs-ph__hero{flex:1;border-radius:14px;display:grid;place-items:center}.x-bbg .bs-ph__btn{height:22px;border-radius:999px;background:#111;margin-top:auto}.x-bbg .bs-ph__row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f2}.x-bbg .bs-ph__row b{width:20px;height:20px;border-radius:6px;flex:none}.x-bbg .bs-ph__row span{flex:1;display:flex;flex-direction:column;gap:4px}.x-bbg .bs-ph__plan{border:1.5px solid #ececef;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}.x-bbg .bs-ph__plan.on{border-color:#111}.x-bbg .bs-ph__bub{max-width:78%;padding:6px 8px;border-radius:10px;background:#f1f1f3;font-size:8.5px;line-height:1.4}.x-bbg .bs-ph__bub.me{align-self:flex-end;background:#2563eb;color:#fff}.x-bbg .bs-ph__bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding:8px 0}.x-bbg .bs-ph__bars i{flex:1;border-radius:4px 4px 0 0;background:#111}.x-bbg .bs-bt{padding:40px 0 120px}.x-bbg .bs-bt__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}.x-bbg .bs-bt__c{position:relative;height:330px;background:var(--soft);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding-top:26px}.x-bbg .bs-bt__c>b{font-size:17px;font-weight:600;position:relative;z-index:2}.x-bbg .bs-bt__v{flex:1;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.x-bbg .bs-bt__apps{display:flex;align-items:center}.x-bbg .bs-bt__apps .bs-ic{transition:transform .5s var(--ease)}.x-bbg .bs-bt__apps .a1{transform:rotate(-12deg) translateX(18px)}.x-bbg .bs-bt__apps .a2{z-index:2;transform:translateY(-4px)}.x-bbg .bs-bt__apps .a3{transform:rotate(12deg) translateX(-18px)}.x-bbg .bs-bt__c:hover .a1{transform:rotate(-18deg) translateX(-4px)}.x-bbg .bs-bt__c:hover .a3{transform:rotate(18deg) translateX(4px)}.x-bbg .bs-bt__c:hover .a2{transform:translateY(-12px) scale(1.05)}.x-bbg .bs-bt__shelf{position:absolute;left:12%;right:-8%;top:16%;bottom:18%;background:linear-gradient(180deg,#e9e9ec,#d9d9de);border-radius:8px 0 0 8px;padding:12% 6% 0;display:flex;flex-direction:column;gap:14%;box-shadow:0 20px 40px -26px rgba(0,0,0,.5)}.x-bbg .bs-bt__row{display:flex;gap:6px;padding-bottom:6px;border-bottom:4px solid #fff;transition:transform .5s var(--ease)}.x-bbg .bs-bt__row i{flex:1;aspect-ratio:3/4;border-radius:2px;box-shadow:0 4px 8px -4px rgba(0,0,0,.4)}.x-bbg .bs-bt__c:hover .bs-bt__row:first-child{transform:translateX(-10px)}.x-bbg .bs-bt__c:hover .bs-bt__row:last-child{transform:translateX(8px)}.x-bbg .bs-bt__phone{position:absolute;width:44%;top:14%;left:28%;transition:transform .5s var(--ease)}.x-bbg .bs-bt__c:hover .bs-bt__phone{transform:translateY(-12px)}.x-bbg .bs-bt__flow{position:absolute;top:16%;left:6%;right:6%;display:flex;align-items:flex-start;gap:8px}.x-bbg .bs-bt__flow>div{flex:1;transition:transform .5s var(--ease)}.x-bbg .bs-bt__flow>span{align-self:center;margin-top:-20%;color:#9a9aa0}.x-bbg .bs-bt__flow>span svg{width:18px;height:18px}.x-bbg .bs-bt__c:hover .bs-bt__flow>div:last-child{transform:translateY(-10px)}.x-bbg .bs-bt__anim .bs-bt__pulse{position:absolute;left:50%;top:44%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid #e11d48;animation:xbbgPulse 2.2s var(--ease) infinite}@keyframes xbbgPulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}.x-bbg .bs-bt__tool{display:flex;gap:6px;padding:8px;background:#fff;border-radius:999px;box-shadow:0 14px 30px -16px rgba(0,0,0,.35)}.x-bbg .bs-bt__tool i{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.x-bbg .bs-bt__tool i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#efeff1;opacity:0;animation:xbbgTool 7.5s infinite}.x-bbg .bs-bt__tool i svg{position:relative;width:19px;height:19px}.x-bbg .bs-bt__tool .t1::before{animation-delay:1.5s}.x-bbg .bs-bt__tool .t2::before{animation-delay:3s}.x-bbg .bs-bt__tool .t3::before{animation-delay:4.5s}.x-bbg .bs-bt__tool .t4::before{animation-delay:6s}@keyframes xbbgTool{0%,20%{opacity:0}4%,16%{opacity:1}}@media (max-width:900px){.x-bbg .bs-bt__g{grid-template-columns:repeat(2,1fr)}}@media (max-width:620px){.x-bbg .bs-bt{padding:24px 0 80px}.x-bbg .bs-bt__g{grid-template-columns:1fr;gap:12px;margin-top:36px}.x-bbg .bs-bt__c{height:300px;border-radius:22px}}@media (prefers-reduced-motion:reduce){.x-bbg .bs-bt__pulse,.x-bbg .bs-bt__tool i::before{animation:none!important}.x-bbg .bs-bt__apps .bs-ic,.x-bbg .bs-bt__row,.x-bbg .bs-bt__phone,.x-bbg .bs-bt__flow>div{transition:none}}.x-bbg .bs-bt{padding:40px 0}.x-bbg .bs-bt__g{margin-top:36px}.x-bbg .bs-bt__c{height:300px}Subscribe to Builder to see the full source.See pricing