Branch Tool Grid
Overview
A central node branches with Bézier curves into five columns of tool cards, each with a colorful icon block and small monospace text, lifting slightly on hover, with the last cell finished in the accent color. Good for integration directories and plugin marketplaces.
Taken from the page template Qishu Agent Tool Platform Home. 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 Branch Tool 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 branch-tool-grid
mcp › Use 8pt MCP to call get_component("branch-tool-grid")
Code
Source for Branch Tool Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-qtg"><section class="qs-hero qs-hero--grid"><div class="qs-hero__in"><div class="qs-hub"><svg class="qs-bot" viewBox="0 0 13 9" shape-rendering="crispEdges" aria-hidden="true"><g fill="currentColor"> <rect x="2" y="0" width="1" height="1"/><rect x="10" y="0" width="1" height="1"/> <rect x="2" y="1" width="9" height="1"/><rect x="1" y="2" width="11" height="1"/> <rect x="0" y="3" width="3" height="1"/><rect x="4" y="3" width="5" height="1"/><rect x="10" y="3" width="3" height="1"/> <rect x="0" y="4" width="13" height="1"/><rect x="1" y="5" width="11" height="1"/> <rect x="2" y="6" width="2" height="2"/><rect x="9" y="6" width="2" height="2"/><rect x="5" y="6" width="3" height="1"/> </g></svg><span class="qs-stem"></span><span class="qs-pill">器枢<span class="qs-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span></span></div><svg class="qs-branch" viewBox="0 0 1000 90" preserveAspectRatio="none" aria-hidden="true"><path d="M500 0 C500 55 100 30 100 90"/><path d="M500 0 C500 55 300 30 300 90"/><path d="M500 0 C500 55 500 30 500 90"/><path d="M500 0 C500 55 700 30 700 90"/><path d="M500 0 C500 55 900 30 900 90"/></svg><div class="qs-grid"><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#111114"><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="8"/><circle cx="12" cy="12" r="3.5"/><path d="M12 12l5.5-5.5"/></svg></span><span class="qs-tool__t"><b>线索雷达</b><small>销售线索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2a3cff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l4-10 4 10 4-10 4 10"/></svg></span><span class="qs-tool__t"><b>帧流</b><small>视频生成</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff7a1a"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3-5 9-6 13-2l4-3v10l-4-3c-4 4-10 3-13-2z"/><circle cx="8" cy="11" r=".8"/></svg></span><span class="qs-tool__t"><b>游鱼</b><small>检索 + 抓页</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1f6bff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19V11M12 19V5M19 19v-6"/></svg></span><span class="qs-tool__t"><b>词脉</b><small>SEO 数据</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#3d4bff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></span><span class="qs-tool__t"><b>远望</b><small>网页搜索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff4d1f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16v10H9l-5 4z"/></svg></span><span class="qs-tool__t"><b>论坛采集</b><small>社区抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#111114"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M8 5l11 7-11 7z"/></svg></span><span class="qs-tool__t"><b>短片采集</b><small>短视频抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#e0337a"><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="16" height="16" rx="4"/><circle cx="12" cy="12" r="3.5"/></svg></span><span class="qs-tool__t"><b>图墙采集</b><small>图片社交抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff2d2d"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="3"/><path d="M10.5 9.5l4 2.5-4 2.5z"/></svg></span><span class="qs-tool__t"><b>长片采集</b><small>视频平台抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1c1c1e"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h3l2 10h10l2-7H7"/><circle cx="10" cy="19" r="1"/><circle cx="17" cy="19" r="1"/></svg></span><span class="qs-tool__t"><b>货架采集</b><small>电商抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2aa3e6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 4L3 11l7 2 2 7z"/></svg></span><span class="qs-tool__t"><b>群聊采集</b><small>即时通讯抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#2fa84f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4l2.4 5 5.6.6-4.2 3.8 1.2 5.6L12 16.2 7 19l1.2-5.6L4 9.6 9.6 9z"/></svg></span><span class="qs-tool__t"><b>口碑采集</b><small>地图评论抓取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff4f14"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M3 9h18"/></svg></span><span class="qs-tool__t"><b>浏览舱</b><small>网页自动化</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#f2365f"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h2M8 8v8M12 5v14M16 8v8M20 12h-2"/></svg></span><span class="qs-tool__t"><b>声画</b><small>多媒体生成</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#0f1b3d"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z"/><path d="M4 7.5l8 4.5 8-4.5M12 12v9"/></svg></span><span class="qs-tool__t"><b>链上账本</b><small>协议数据</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#ff6a00"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-7 2 1 3 2 4 4 0-3-1-5 0-8z"/></svg></span><span class="qs-tool__t"><b>火线</b><small>网页爬取</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#1c1c1e"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="M4 7l8 6 8-6"/></svg></span><span class="qs-tool__t"><b>信使</b><small>智能体邮箱</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#7a4dff"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="3"/><path d="M3 19c0-3 3-5 6-5s6 2 6 5"/><path d="M16 6a3 3 0 0 1 0 6M21 19c0-2-1-4-3-4.6"/></svg></span><span class="qs-tool__t"><b>人脉库</b><small>人员检索</small></span></a><a class="qs-tool" href="#"><span class="qs-tool__ic" style="background:#14b8a6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></svg></span><span class="qs-tool__t"><b>拨号员</b><small>智能体电话</small></span></a><a class="qs-tool qs-tool--all" href="#">查看全部工具 <span aria-hidden="true">→</span></a></div></div></section></div>
.x-qtg{--acc:#0016D7;--ink:#1c1c1e;--mut:#6e6e73;--line:#ececee;--soft:#fafafa;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;
font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;width:100%;box-sizing:border-box;text-align:left}.x-qtg *,.x-qtg *::before,.x-qtg *::after{box-sizing:border-box;margin:0;padding:0}.x-qtg a{color:inherit;text-decoration:none}.x-qtg button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qtg .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qtg .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qtg .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qtg .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qtg .qs-mark i:nth-child(4){opacity:.35}.x-qtg .qs-hero{position:relative;overflow:hidden;padding:72px 0 96px;background:#fff}.x-qtg .qs-bin{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(38% 46% at 8% 34%,#000 30%,transparent 72%),radial-gradient(36% 48% at 94% 30%,#000 28%,transparent 72%);mask-image:radial-gradient(38% 46% at 8% 34%,#000 30%,transparent 72%),radial-gradient(36% 48% at 94% 30%,#000 28%,transparent 72%)}.x-qtg .qs-bin pre{position:absolute;inset:0;font:10px/12px var(--mono);color:#cfcfd6;letter-spacing:1px;white-space:pre;overflow:hidden}.x-qtg .qs-bin__b{color:#b9bccc!important;animation:xqtgFlick 4.8s ease-in-out infinite alternate}@keyframes xqtgFlick{0%{opacity:0}100%{opacity:1}}.x-qtg .qs-hero__in{position:relative;max-width:1100px;margin:0 auto;padding:0 24px;text-align:center}.x-qtg .qs-live{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);letter-spacing:.12em;color:#55555a;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}.x-qtg .qs-live i{width:6px;height:6px;border-radius:50%;background:#12a150;animation:xqtgPulse 2s ease-in-out infinite}@keyframes xqtgPulse{50%{opacity:.25;transform:scale(.8)}}.x-qtg .qs-h1{margin:26px 0 30px;font-size:clamp(40px,7.2vw,88px);font-weight:800;letter-spacing:-.045em;line-height:1.04}.x-qtg .qs-h1 em{font-style:normal;color:var(--acc)}.x-qtg .qs-give{display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;color:#3a3a3e;margin-bottom:18px}.x-qtg .qs-agents{display:inline-flex;gap:7px}.x-qtg .qs-agents i{width:18px;height:18px;border-radius:50%;background:#2b2b30;display:block}.x-qtg .qs-agents .a1{border-radius:4px;transform:rotate(45deg) scale(.82)}.x-qtg .qs-agents .a2{background:transparent;border:2.5px solid #2b2b30}.x-qtg .qs-agents .a3{border-radius:50% 50% 4px 4px}.x-qtg .qs-agents .a4{border-radius:3px;background:radial-gradient(circle at 35% 40%,#fff 0 2px,transparent 2.5px),radial-gradient(circle at 65% 40%,#fff 0 2px,transparent 2.5px),#2b2b30}.x-qtg .qs-hub{display:flex;flex-direction:column;align-items:center;margin-top:44px}.x-qtg .qs-bot{width:68px;height:auto;color:var(--acc);animation:xqtgBob 3.2s ease-in-out infinite}@keyframes xqtgBob{50%{transform:translateY(-6px)}}.x-qtg .qs-stem{width:1px;height:26px;background:#d4d4da;margin:8px 0}.x-qtg .qs-pill{display:inline-flex;align-items:center;gap:6px;background:#1c1c1e;color:#fff;font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}.x-qtg .qs-branch{display:block;width:84%;height:70px;margin:0 auto;fill:none;stroke:var(--acc);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:.75}.x-qtg .qs-branch path{vector-effect:non-scaling-stroke}.x-qtg .qs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:-2px;text-align:left}.x-qtg .qs-tool{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .25s,box-shadow .25s,border-color .25s}.x-qtg .qs-tool:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,40,.25);border-color:#dcdce2}.x-qtg .qs-tool__ic{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center}.x-qtg .qs-tool__ic svg{width:16px;height:16px}.x-qtg .qs-tool__t{min-width:0;display:flex;flex-direction:column}.x-qtg .qs-tool__t b{font-size:14px;font-weight:600}.x-qtg .qs-tool__t small{font:11px var(--mono);color:#7a7a80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qtg .qs-tool--all{background:var(--acc);border-color:var(--acc);color:#fff;font-size:14px;font-weight:600;justify-content:center}.x-qtg .qs-tool--all:hover{border-color:var(--acc)}@media (max-width:900px){.x-qtg .qs-grid{grid-template-columns:repeat(3,1fr)}.x-qtg .qs-branch{display:none}.x-qtg .qs-hub{margin-bottom:24px}}@media (max-width:560px){.x-qtg .qs-bin{opacity:.32;-webkit-mask-image:radial-gradient(42% 16% at 0% 3%,#000 10%,transparent 80%),radial-gradient(42% 16% at 100% 3%,#000 10%,transparent 80%),radial-gradient(50% 12% at 0% 62%,#000 10%,transparent 80%),radial-gradient(50% 12% at 100% 62%,#000 10%,transparent 80%);mask-image:radial-gradient(42% 16% at 0% 3%,#000 10%,transparent 80%),radial-gradient(42% 16% at 100% 3%,#000 10%,transparent 80%),radial-gradient(50% 12% at 0% 62%,#000 10%,transparent 80%),radial-gradient(50% 12% at 100% 62%,#000 10%,transparent 80%)}.x-qtg .qs-bin__b{animation:none!important;opacity:0}.x-qtg .qs-grid{grid-template-columns:repeat(2,1fr)}.x-qtg .qs-hero{padding:48px 0 64px}.x-qtg .qs-give{font-size:16px}.x-qtg .qs-tool{padding:12px 10px}}@media (prefers-reduced-motion:reduce){.x-qtg .qs-bin__b,.x-qtg .qs-live i,.x-qtg .qs-bot{animation:none}.x-qtg .qs-tool{transition:none}}.x-qtg .qs-hero--grid{padding:64px 0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;background:#fff radial-gradient(#ececf1 1px,transparent 1.3px) 0 0/18px 18px}.x-qtg .qs-hero--grid .qs-hub{margin-top:0}
Subscribe to Builder to see the full source.See pricing