Library Bento Grid
介绍
三乘二的浅灰圆角便当格，每格一个内容类型：扇形 App 图标、书架式网站缩略、手机界面、双屏流程、脉冲动效和轮流高亮的工具条，悬停时各自展开或上浮。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Library Bento Grid 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add library-bento-grid
mcp › 使用 8pt MCP 调用 get_component("library-bento-grid")
代码
Library Bento Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<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}订阅 Builder 查看完整源码。查看价格