Live Deploy Bento
Overview
A four-tile bento: new builds keep sliding into a deploy list as statuses move from queued to building to deployed; a solid orange card tells the network story; a shield outline keeps redrawing in the secure-by-default tile; and a terminal in the AI tile types out a background agent’s work log line by line.
Taken from the page template Suiyun Global Network 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 Live Deploy Bento 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 suiyun-deploy-bento
mcp › Use 8pt MCP to call get_component("suiyun-deploy-bento")
Code
Source for Live Deploy Bento. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-dbn"><h2>为你的团队量身定制</h2><p class="x-dbn__sub">从初创团队到大型企业，都能轻松上手。</p><div class="x-dbn__grid"><div class="x-dbn__c x-dbn__c--wide"><div class="x-dbn__deploy"><span class="x-dbn__app"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="5.5" r="2"/><circle cx="7" cy="18.5" r="2"/><circle cx="17" cy="8.5" r="2"/><path d="M7 7.5v9"/><path d="M17 10.5c0 3.5-4 3.5-8.6 6.5"/></svg></span><ul class="x-dbn__list"></ul></div><h3>融入现有工作流</h3><p>代码托管、持续集成、常用编辑器与任意框架。没有私有工具，也不会被锁定。</p></div><div class="x-dbn__c x-dbn__c--or"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg><h3>一张网络承载用户、应用与数据</h3><p>无论是发布代码、保护成员还是连通分支机构，全部跑在同一张全球网络上——一个控制台管理，一份账单结算。</p></div><div class="x-dbn__c x-dbn__c--sec"><div class="x-dbn__shield" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/></svg></div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg><h3>默认安全</h3><p>攻击防护、防火墙、机器人管理与零信任控制都内建于网络，从第一天起作用于每一个请求。</p></div><div class="x-dbn__c x-dbn__c--ai"><div><h3>通往 AI 的快车道</h3><p>在同一张网络上构建、部署并治理智能体。安全的工具入口、身份感知访问与内建推理，让生产级 AI 一步上线。</p></div><div class="x-dbn__term"><p class="x-dbn__tl">正在启动智能体分析代码仓库……</p><div class="x-dbn__lines"></div></div></div></div></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-dbn{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dbn h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-dbn__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-dbn__grid{display:grid;grid-template-columns:1fr 1fr 1fr;width:82%;margin:0 auto;text-align:left}.x-dbn__c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:28px 26px;box-sizing:border-box;border:1px solid #EBEBEB;margin:-1px 0 0 -1px;background:#fff;overflow:hidden}.x-dbn__c h3{margin:0 0 8px;font-size:16px;font-weight:500}.x-dbn__c p{margin:0;font-size:14px;line-height:1.55;color:#666;max-width:440px}.x-dbn__c>svg{width:22px;height:22px;margin-bottom:12px}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:span 2}.x-dbn__c--or{justify-content:flex-start;background:#FF5D1D;color:#fff;border-color:#FF5D1D}.x-dbn__c--or p{color:rgba(255,255,255,.92)}.x-dbn__deploy{position:absolute;left:24px;right:24px;top:22px;display:flex;gap:14px}.x-dbn__app{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:8px;background:#FF5D1D;color:#fff}.x-dbn__app svg{width:24px;height:24px}.x-dbn__list{flex:1;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}.x-dbn__list li{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;height:36px;margin-bottom:6px;padding:0 14px;border-radius:4px;background:#FFF1E8;font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12.5px;color:#FF5D1D;animation:x-dbn-push .5s ease}.x-dbn__list li em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-dbn__list li em i{width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box}.x-dbn__list li[data-s="build"] em i{border-right-color:transparent;animation:x-dbn-spin .8s linear infinite}.x-dbn__list li[data-s="queue"]{opacity:.55}.x-dbn__list li[data-s="done"] em i{background:#FF5D1D;border-color:#FF5D1D}.x-dbn__c--sec{justify-content:flex-end}.x-dbn__shield{position:absolute;right:-20px;top:-10px;width:200px;height:200px;color:rgba(255,93,29,.22)}.x-dbn__shield svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.5;stroke-dasharray:60;animation:x-dbn-draw 4s ease-in-out infinite}.x-dbn__c--ai{flex-direction:row;align-items:flex-end;gap:26px}.x-dbn__c--ai>div:first-child{flex:1}.x-dbn__term{flex:1.1;align-self:stretch;padding:14px 16px;border:1px solid #EFEFEF;border-radius:6px;background:linear-gradient(#fff,#FFFAF5);box-shadow:0 14px 40px -26px rgba(120,50,10,.4);font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;color:#444}.x-dbn__tl{margin:0 0 10px!important;font-size:12.5px!important;color:#262626!important}.x-dbn__lines div{display:flex;align-items:center;gap:8px;height:24px;opacity:0;animation:x-dbn-type .4s ease forwards}.x-dbn__lines code{padding:1px 6px;border-radius:4px;background:#FFE9DC;color:#C64A12;font:inherit}.x-dbn__lines .x-dbn__ok{color:#FF5D1D}@keyframes x-dbn-push{from{opacity:0;transform:translateY(-10px)}}@keyframes x-dbn-spin{to{transform:rotate(360deg)}}@keyframes x-dbn-draw{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}@keyframes x-dbn-type{to{opacity:1}}@media (max-width:900px){.x-dbn__grid{grid-template-columns:1fr;width:100%}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:auto}.x-dbn__c--wide{min-height:330px}.x-dbn__c--ai{flex-direction:column;align-items:stretch}.x-dbn__list li{grid-template-columns:1fr auto}.x-dbn__list li span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){.x-dbn__list li,.x-dbn__list li em i,.x-dbn__shield svg{animation:none}.x-dbn__lines div{animation:none;opacity:1}}(root) => {
const box = root.classList && root.classList.contains("x-dbn") ? root : root.querySelector(".x-dbn");
if (!box) return;
const list = box.querySelector(".x-dbn__list"), lines = box.querySelector(".x-dbn__lines");
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const hex = () => Math.random().toString(16).slice(2, 8);
const label = { done: "已部署", build: "构建中", queue: "排队中" };
const row = (s, when) => { const li = document.createElement("li"); li.dataset.s = s; li.innerHTML = "<span>构建 #" + hex() + "</span><span>" + when + "</span><em>" + label[s] + "<i></i></em>"; return li; };
const setS = (li, s) => { li.dataset.s = s; li.querySelector("em").firstChild.textContent = label[s]; };
list.append(row("build", "刚刚"), row("done", "稍早"), row("done", "更早"));
const step = () => { const first = list.firstElementChild; setS(first, "done"); first.children[1].textContent = "稍早"; list.prepend(row("build", "刚刚")); while (list.children.length > 3) list.lastElementChild.remove(); };
const log = [["review-agent", "扫描合并请求"], ["test-agent", "运行检查"], ["docs-agent", "修订文档"], ["perf-agent", "分析首屏性能"]];
…Subscribe to Builder to see the full source.See pricing