Library Browser Mock
Overview
A product browser window inside a light gray rounded frame: a top bar with a segmented switch and search box, four-column category navigation, and Latest / Popular tabs switching three site thumbnail cards that lift slightly 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 Browser Mock to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
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-browser-mock
mcp › Use 8pt MCP to call get_component("library-browser-mock")
Code
Source for Library Browser Mock. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-blb"><section class="bs-bm"><div class="bs-bm__frame"><div class="bs-bm__win"> <div class="bs-bm__top"><span class="bs-bm__logo"><svg viewBox="0 0 34 20" aria-hidden="true"><path d="M2 18 8 2h6L8 18z M12 18 18 2h6l-6 16z M22 18 28 2h4l-6 16z" fill="currentColor"/></svg></span><span class="bs-bm__seg"><button type="button" class="bs-bm__k" data-k="app">App</button><button type="button" class="bs-bm__k is-on" data-k="web">网站</button></span> <span class="bs-bm__search"><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>搜索网站…</span> <span class="bs-bm__icons"><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="M7 4h10v16l-5-3.5L7 20z"/></svg><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="12" cy="12" r="8"/><path d="M4 12h16M12 4c2.2 2.3 3.2 5 3.2 8s-1 5.7-3.2 8c-2.2-2.3-3.2-5-3.2-8s1-5.7 3.2-8z"/></svg><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="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5L19 18H5z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg><b></b></span></div> <div class="bs-bm__cols"><div class="bs-bm__col"><small>分类</small><a href="#">科技</a><a href="#">购物</a><a href="#">作品集</a><a href="#">商业</a><a href="#">生活方式</a></div><div class="bs-bm__col"><small>区块</small><a href="#">首屏</a><a href="#">定价</a><a href="#">展示</a><a href="#">博客</a><a href="#">404</a></div><div class="bs-bm__col"><small> </small><a href="#">关于</a><a href="#">流程说明</a><a href="#">信任背书</a><a href="#">页脚</a><a href="#">数据</a></div><div class="bs-bm__col"><small>风格</small><a href="#">极简</a><a href="#">动效</a><a href="#">摄影</a><a href="#">插画</a><a href="#">深色</a></div></div> <div class="bs-bm__bar"><span class="bs-bm__tabs"><button type="button" class="is-on" data-t="new">最新</button><button type="button" data-t="hot">最热</button></span><span class="bs-bm__filter"><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 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></svg>筛选</span></div> <div class="bs-bm__grid" data-grid><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;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><span><b>栖光工作室</b><small>把产品打磨成界面</small></span></span></a><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><span><b>聚场</b><small>好活动从这里开场</small></span></span></a><a class="bs-bm__card" href="#"><span class="bs-bm__shot"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></span><span class="bs-bm__meta"><span class="bs-ic " style="width:26px;height:26px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><span><b>拾景</b><small>创作者的灵感索引</small></span></span></a></div> </div></div></section></div>
.x-blb{--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-blb *{box-sizing:border-box;margin:0;padding:0}.x-blb{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-blb a{color:inherit;text-decoration:none}.x-blb button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-blb .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-blb .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-blb .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-blb .bs-btn:active{transform:translateY(1px) scale(.98)}.x-blb .bs-btn--dark{background:var(--ink);color:#fff}.x-blb .bs-btn--dark:hover{background:#2a2a2e}.x-blb .bs-btn--gray{background:#ececee;color:var(--ink)}.x-blb .bs-btn--gray:hover{background:#e2e2e5}.x-blb .bs-btn svg{width:16px;height:16px}.x-blb .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-blb .bs-ic svg{width:56%;height:56%}.x-blb .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-blb .bs-ph__sb{display:flex;justify-content:space-between;font-weight:600;font-size:8px}.x-blb .bs-ph__sb i{display:inline-block;width:18px;height:6px;border-radius:2px;background:#111;margin-left:3px}.x-blb .bs-ph__bar{height:6px;border-radius:3px;background:#ececef}.x-blb .bs-ph__bar.s{width:45%}.x-blb .bs-ph__bar.m{width:70%}.x-blb .bs-ph__bar.d{background:#1a1a1e}.x-blb .bs-ph__hero{flex:1;border-radius:14px;display:grid;place-items:center}.x-blb .bs-ph__btn{height:22px;border-radius:999px;background:#111;margin-top:auto}.x-blb .bs-ph__row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f2}.x-blb .bs-ph__row b{width:20px;height:20px;border-radius:6px;flex:none}.x-blb .bs-ph__row span{flex:1;display:flex;flex-direction:column;gap:4px}.x-blb .bs-ph__plan{border:1.5px solid #ececef;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}.x-blb .bs-ph__plan.on{border-color:#111}.x-blb .bs-ph__bub{max-width:78%;padding:6px 8px;border-radius:10px;background:#f1f1f3;font-size:8.5px;line-height:1.4}.x-blb .bs-ph__bub.me{align-self:flex-end;background:#2563eb;color:#fff}.x-blb .bs-ph__bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding:8px 0}.x-blb .bs-ph__bars i{flex:1;border-radius:4px 4px 0 0;background:#111}.x-blb .bs-site{position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}.x-blb .bs-site__nav{position:absolute;left:5%;right:5%;top:5%;display:flex;justify-content:space-between}.x-blb .bs-site__nav i{display:block;height:3px;width:14%;border-radius:2px;background:currentColor;opacity:.5}.x-blb .bs-site__t{position:absolute;left:0;right:0;text-align:center;font-weight:700;letter-spacing:-.02em;line-height:1.15}.x-blb .bs-site--wave{background:radial-gradient(120% 90% at 70% 30%,#3b1d8f,#0b0618 70%);color:#fff}.x-blb .bs-site--wave svg{position:absolute;inset:0;width:100%;height:100%}.x-blb .bs-site--wave .bs-site__t{bottom:16%;font-family:Georgia,"Noto Serif CJK SC",serif;font-weight:400;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--float{background:#fff;color:#111}.x-blb .bs-site--float .bs-site__t{top:38%;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--float .bs-site__t em{font-style:normal;color:#ec4899}.x-blb .bs-site--float b{position:absolute;width:11%;aspect-ratio:1;border-radius:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}.x-blb .bs-site--gal{background:#0e0e10;color:#fff}.x-blb .bs-site--gal b{position:absolute;width:9%;aspect-ratio:3/4;border-radius:2px}.x-blb .bs-site--gal .bs-site__t{top:40%;font-size:clamp(11px,1.5vw,17px)}.x-blb .bs-site--gal .bs-site__pill{position:absolute;left:50%;top:62%;width:16%;height:7%;margin-left:-8%;border-radius:99px;background:#fff}.x-blb .bs-bm{padding:0 24px}.x-blb .bs-bm__frame{max-width:1120px;margin:0 auto;background:var(--soft);border-radius:32px;padding:28px 28px 0}.x-blb .bs-bm__win{background:#fff;border-radius:16px 16px 0 0;padding:16px 22px 26px;box-shadow:0 0 0 1px rgba(0,0,0,.04)}.x-blb .bs-bm__top{display:flex;align-items:center;gap:18px;font-size:12px}.x-blb .bs-bm__logo svg{width:26px;height:15px;display:block}.x-blb .bs-bm__seg{display:flex;gap:12px}.x-blb .bs-bm__seg button{font-size:12px;color:#8a8a90}.x-blb .bs-bm__seg button.is-on{color:#111;font-weight:600}.x-blb .bs-bm__search{flex:0 1 300px;margin:0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#f1f1f3;color:#9a9aa0;font-size:12px}.x-blb .bs-bm__search svg{width:14px;height:14px;color:#555}.x-blb .bs-bm__icons{display:flex;align-items:center;gap:12px}.x-blb .bs-bm__icons svg{width:16px;height:16px;display:block}.x-blb .bs-bm__icons b{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#fcd34d,#f97316);display:block}.x-blb .bs-bm__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0 32px}.x-blb .bs-bm__col{display:flex;flex-direction:column;gap:3px}.x-blb .bs-bm__col small{font-size:11px;color:#8a8a90;margin-bottom:6px}.x-blb .bs-bm__col a{font-size:15px;font-weight:500;width:max-content;transition:opacity .2s}.x-blb .bs-bm__col a:hover{opacity:.55}.x-blb .bs-bm__bar{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:14px}.x-blb .bs-bm__tabs{display:flex;gap:16px}.x-blb .bs-bm__tabs button{font-size:12px;color:#8a8a90;padding-bottom:4px;border-bottom:1.5px solid transparent}.x-blb .bs-bm__tabs button.is-on{color:#111;border-color:#111}.x-blb .bs-bm__filter{display:flex;align-items:center;gap:6px;font-weight:500}.x-blb .bs-bm__filter svg{width:14px;height:14px}.x-blb .bs-bm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transition:opacity .25s}.x-blb .bs-bm__grid.is-swap{opacity:0}.x-blb .bs-bm__card{display:flex;flex-direction:column;gap:10px}.x-blb .bs-bm__shot{display:grid;place-items:center;background:var(--soft);border-radius:16px;padding:12% 9%;transition:transform .35s var(--ease)}.x-blb .bs-bm__card:hover .bs-bm__shot{transform:translateY(-3px)}.x-blb .bs-bm__meta{display:flex;align-items:center;gap:8px}.x-blb .bs-bm__meta>span{display:flex;flex-direction:column;min-width:0}.x-blb .bs-bm__meta b{font-size:12px;font-weight:600}.x-blb .bs-bm__meta small{font-size:11px;color:#8a8a90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:900px){.x-blb .bs-bm__cols{grid-template-columns:repeat(2,1fr)}.x-blb .bs-bm__col:nth-child(3){display:none}}@media (max-width:720px){.x-blb .bs-bm{padding:0 12px}.x-blb .bs-bm__frame{padding:12px 12px 0;border-radius:22px}.x-blb .bs-bm__win{padding:12px 14px 18px}.x-blb .bs-bm__search{display:none}.x-blb .bs-bm__icons{margin-left:auto}.x-blb .bs-bm__grid{grid-template-columns:1fr}.x-blb .bs-bm__card:nth-child(n+2){display:none}.x-blb .bs-bm__col a{font-size:14px}}@media (prefers-reduced-motion:reduce){.x-blb .bs-bm__grid,.x-blb .bs-bm__shot{transition:none}}.x-blb .bs-bm{padding:40px 24px}(root) => {
const el = (root.classList && root.classList.contains('x-blb')) ? root : (root.querySelector('.x-blb') || root);
const grid = el.querySelector('[data-grid]');
const sets = { new: grid.innerHTML, hot: null };
const cards = [...grid.children];
sets.hot = [cards[2], cards[0], cards[1]].map((c) => c.outerHTML).join('');
const tabs = [...el.querySelectorAll('[data-t]')], segs = [...el.querySelectorAll('[data-k]')];
let tm = 0;
const offs = [];
tabs.forEach((b) => { const on = () => {
…Subscribe to Builder to see the full source.See pricing