Binary Command Hero
Overview
A white hero: binary texture fading at both sides twinkles slowly, a one-click copy command box sits under an oversized headline, and a pixel robot branches through node pills with curves into a row of tool cards. Good for AI tools and developer platforms.
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 Binary Command Hero to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
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 binary-command-hero
mcp › Use 8pt MCP to call get_component("binary-command-hero")
Code
Source for Binary Command Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-qbh"><section class="qs-hero"> <div class="qs-bin" aria-hidden="true"><pre class="qs-bin__a"></pre><pre class="qs-bin__b"></pre></div> <div class="qs-hero__in"> <span class="qs-live"><i></i>实时目录</span> <h1 class="qs-h1">工具，交给<br><em>智能体</em>自己去找。</h1> <p class="qs-give">把这一行交给它 <span class="qs-agents" aria-hidden="true"><i class="a1"></i><i class="a2"></i><i class="a3"></i><i class="a4"></i></span></p> <div class="qs-cmd qs-cmd--dark"><span class="qs-cmd__p">$</span><code>接入 https://example.com/skill.md</code><button class="qs-cmd__btn" type="button" aria-label="复制" data-qs-copy="接入 https://example.com/skill.md"><span class="i-copy"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg></span><span class="i-ok"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span></button></div> <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"/> …
.x-qbh{--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-qbh *,.x-qbh *::before,.x-qbh *::after{box-sizing:border-box;margin:0;padding:0}.x-qbh a{color:inherit;text-decoration:none}.x-qbh button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-qbh .qs-wrap{max-width:1100px;margin:0 auto;padding:0 24px}.x-qbh .qs-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-align:center}.x-qbh .qs-mark{display:inline-grid;grid-template-columns:repeat(2,6px);gap:2px;transform:rotate(45deg);margin:0 2px}.x-qbh .qs-mark i{width:6px;height:6px;border-radius:1.5px;background:currentColor;display:block}.x-qbh .qs-mark i:nth-child(4){opacity:.35}.x-qbh .qs-cmd{display:flex;align-items:center;gap:12px;width:100%;max-width:560px;margin:0 auto;padding:12px 12px 12px 18px;border-radius:10px;font-family:var(--mono);font-size:14px;text-align:left}.x-qbh .qs-cmd code{flex:1;font-family:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qbh .qs-cmd--dark{background:#141416;color:#f2f2f2;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}.x-qbh .qs-cmd--dark .qs-cmd__p{color:#7c7c84}.x-qbh .qs-cmd--light{background:#fff;color:#1c1c1e;box-shadow:0 18px 40px -14px rgba(0,0,30,.45)}.x-qbh .qs-cmd--light .qs-cmd__p{color:#9a9aa2}.x-qbh .qs-cmd__btn{position:relative;flex:none;width:30px;height:30px;border-radius:7px;background:var(--acc);color:#fff;display:grid;place-items:center;transition:transform .2s}.x-qbh .qs-cmd__btn:hover{transform:scale(1.06)}.x-qbh .qs-cmd__btn:active{transform:scale(.94)}.x-qbh .qs-cmd__btn span{grid-area:1/1;display:grid;transition:opacity .2s,transform .2s}.x-qbh .qs-cmd__btn .i-ok{opacity:0;transform:scale(.6)}.x-qbh .qs-cmd__btn.is-done .i-ok{opacity:1;transform:none}.x-qbh .qs-cmd__btn.is-done .i-copy{opacity:0;transform:scale(.6)}@media (prefers-reduced-motion:reduce){.x-qbh .qs-cmd__btn,.x-qbh .qs-cmd__btn span{transition:none}}.x-qbh .qs-hero{position:relative;overflow:hidden;padding:72px 0 96px;background:#fff}.x-qbh .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-qbh .qs-bin pre{position:absolute;inset:0;font:10px/12px var(--mono);color:#cfcfd6;letter-spacing:1px;white-space:pre;overflow:hidden}.x-qbh .qs-bin__b{color:#b9bccc!important;animation:xqbhFlick 4.8s ease-in-out infinite alternate}@keyframes xqbhFlick{0%{opacity:0}100%{opacity:1}}.x-qbh .qs-hero__in{position:relative;max-width:1100px;margin:0 auto;padding:0 24px;text-align:center}.x-qbh .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-qbh .qs-live i{width:6px;height:6px;border-radius:50%;background:#12a150;animation:xqbhPulse 2s ease-in-out infinite}@keyframes xqbhPulse{50%{opacity:.25;transform:scale(.8)}}.x-qbh .qs-h1{margin:26px 0 30px;font-size:clamp(40px,7.2vw,88px);font-weight:800;letter-spacing:-.045em;line-height:1.04}.x-qbh .qs-h1 em{font-style:normal;color:var(--acc)}.x-qbh .qs-give{display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;color:#3a3a3e;margin-bottom:18px}.x-qbh .qs-agents{display:inline-flex;gap:7px}.x-qbh .qs-agents i{width:18px;height:18px;border-radius:50%;background:#2b2b30;display:block}.x-qbh .qs-agents .a1{border-radius:4px;transform:rotate(45deg) scale(.82)}.x-qbh .qs-agents .a2{background:transparent;border:2.5px solid #2b2b30}.x-qbh .qs-agents .a3{border-radius:50% 50% 4px 4px}.x-qbh .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-qbh .qs-hub{display:flex;flex-direction:column;align-items:center;margin-top:44px}.x-qbh .qs-bot{width:68px;height:auto;color:var(--acc);animation:xqbhBob 3.2s ease-in-out infinite}@keyframes xqbhBob{50%{transform:translateY(-6px)}}.x-qbh .qs-stem{width:1px;height:26px;background:#d4d4da;margin:8px 0}.x-qbh .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-qbh .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-qbh .qs-branch path{vector-effect:non-scaling-stroke}.x-qbh .qs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:-2px;text-align:left}.x-qbh .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-qbh .qs-tool:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,40,.25);border-color:#dcdce2}.x-qbh .qs-tool__ic{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center}.x-qbh .qs-tool__ic svg{width:16px;height:16px}.x-qbh .qs-tool__t{min-width:0;display:flex;flex-direction:column}.x-qbh .qs-tool__t b{font-size:14px;font-weight:600}.x-qbh .qs-tool__t small{font:11px var(--mono);color:#7a7a80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-qbh .qs-tool--all{background:var(--acc);border-color:var(--acc);color:#fff;font-size:14px;font-weight:600;justify-content:center}.x-qbh .qs-tool--all:hover{border-color:var(--acc)}@media (max-width:900px){.x-qbh .qs-grid{grid-template-columns:repeat(3,1fr)}.x-qbh .qs-branch{display:none}.x-qbh .qs-hub{margin-bottom:24px}}@media (max-width:560px){.x-qbh .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-qbh .qs-bin__b{animation:none!important;opacity:0}.x-qbh .qs-grid{grid-template-columns:repeat(2,1fr)}.x-qbh .qs-hero{padding:48px 0 64px}.x-qbh .qs-give{font-size:16px}.x-qbh .qs-tool{padding:12px 10px}}@media (prefers-reduced-motion:reduce){.x-qbh .qs-bin__b,.x-qbh .qs-live i,.x-qbh .qs-bot{animation:none}.x-qbh .qs-tool{transition:none}}.x-qbh .qs-hero{padding:56px 0 64px}.x-qbh .qs-h1{margin:20px 0 24px;font-size:clamp(40px,6.4vw,78px)}.x-qbh .qs-hub{margin-top:32px}
(root) => {
const el = (root.classList && root.classList.contains('x-qbh')) ? root : (root.querySelector('.x-qbh') || root);
const offs = [];
el.querySelectorAll('.qs-bin pre').forEach((p) => {
const rows = [];
for (let r = 0; r < 80; r++) { let s = ''; for (let c = 0; c < 200; c++) s += Math.random() < .5 ? '0' : '1'; rows.push(s); }
p.textContent = rows.join('\n');
});
el.querySelectorAll('[data-qs-copy]').forEach((btn) => {
let t = 0;
const on = () => {
const txt = btn.getAttribute('data-qs-copy');
…Subscribe to Builder to see the full source.See pricing