Infra Tab Showcase
Overview
A dark panel: an accordion list on the left opens descriptions while the right side switches between five animated scenes (glowing browser with connected nodes, service icon grid, rotating wireframe globe with arcs, floating badges, laptop and phone mockups), rotating on its own.
Taken from the page template Niancheng AI App Builder 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 Infra Tab Showcase to your project in your colors.
Where to use it
Scroll, hover and entrance motion that gives a page rhythm; animation uses only transform and opacity.
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 infra-tab-showcase
mcp › Use 8pt MCP to call get_component("infra-tab-showcase")
Code
Source for Infra Tab Showcase. Motion uses only transform and opacity and respects the Reduce motion setting.
<section class="x-bis"><div class="bis-l"><h2>为构建，也为之后</h2><p>念成运行在企业级基础设施上，你做出的全栈软件可以放心扩展。</p><div class="bis-list"><button type="button" class="bis-it on" data-i="0"><b>托管，交给我们</b><span>托管、证书和后端基础设施都由念成照看。代码和数据始终属于你。</span></button><button type="button" class="bis-it" data-i="1"><b>应用栈，一键连通</b><span>表格、邮件、数据库和常用服务，点几下就接进你的应用。</span></button><button type="button" class="bis-it" data-i="2"><b>收款，随时就绪</b><span>接入收款与订阅，从第一位用户开始就能收钱。</span></button><button type="button" class="bis-it" data-i="3"><b>安全，是默认配置</b><span>加密、权限隔离与操作审计开箱即用，不必另外配置。</span></button><button type="button" class="bis-it" data-i="4"><b>随时随地，都能用</b><span>网页、平板与手机自动适配，在哪儿打开都顺手。</span></button></div></div><div class="bis-r"><div class="bis-v on" data-i="0"><div class="bv bv-host"><span class="bh-glow"></span><svg class="bh-ln" viewBox="0 0 600 300" preserveAspectRatio="none"><path id="bhP" d="M70 165 C150 165 160 150 200 150 S 260 170 300 172 S 360 150 400 150 S 470 165 530 165" fill="none" stroke="rgba(255,255,255,.18)" stroke-width="1.2"/><circle r="3" fill="#fff"><animateMotion dur="5s" repeatCount="indefinite"><mpath href="#bhP"/></animateMotion></circle></svg><div class="bh-win"><div class="bh-bar"><i></i><i></i><i></i><span><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>orbit.example.com</span><b></b><b></b></div><div class="bh-body"></div></div><span class="bh-n n1"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span><span class="bh-n n2"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7v10M18 10c0 4-6 3-11 7"/></svg></span><span class="bh-n n3 big"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg></span><span class="bh-n n4"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M16 7l2 2"/></svg></span><span class="bh-n n5"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3 3 7 3s7-1.3 7-3"/></svg></span></div></div><div class="bis-v" data-i="1"><div class="bv bv-grid"><div class="ig-g"><span class="ig-t" style="--c:#1F9D55" data-n="表格"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#E5484D" data-n="邮件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span><span class="ig-t" style="--c:#635BFF" data-n="收款"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg></span><span class="ig-t" style="--c:#3ECF8E" data-n="数据库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3 3 7 3s7-1.3 7-3"/></svg></span><span class="ig-t" style="--c:#7C66DC" data-n="群聊"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#2F80ED" data-n="日历"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#38BDF8" data-n="云盘"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg></span><span class="ig-t" style="--c:#F5A524" data-n="自动化"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3L5 14h6l-1 7 8-11h-6z"/></svg></span><span class="ig-t" style="--c:#F59E0B" data-n="文件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h6l2 2h10v11H3z"/></svg></span><span class="ig-t" style="--c:#10B981" data-n="地图"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4l6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></svg></span><span class="ig-t" style="--c:#95BF47" data-n="店铺"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2 11h11l2-8H6"/><circle cx="9" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg></span><span class="ig-t" style="--c:#EF4444" data-n="通知"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/><path d="M10 20h4"/></svg></span><span class="ig-t" style="--c:#111827" data-n="文档"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l4-1 11-11-3-3L5 16z"/></svg></span><span class="ig-t" style="--c:#EC4899" data-n="音频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg></span><span class="ig-t" style="--c:#FF4D4F" data-n="视频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></svg></span><span class="ig-t" style="--c:#8B5CF6" data-n="仓储"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 11v10"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="分析"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6 15l4-5 3 3 5-7"/></svg></span><span class="ig-t ig-c"><span class="lg"><svg viewBox="0 0 32 32"><defs><linearGradient id="lgG" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FF7A1A"/><stop offset=".5" stop-color="#FF3D8B"/><stop offset="1" stop-color="#7B61FF"/></linearGradient></defs><path d="M6 4h12a10 10 0 0 1 10 10v4a10 10 0 0 1-10 10H10a6 6 0 0 1-6-6V6a2 2 0 0 1 2-2z" fill="url(#lgG)"/><path d="M15.5 9l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z" fill="#fff"/></svg></span></span><span class="ig-t" style="--c:#2563EB" data-n="检索"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg></span><span class="ig-t" style="--c:#D97757" data-n="智能体"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4M9 13h.01M15 13h.01"/></svg></span><span class="ig-t" style="--c:#24292F" data-n="代码库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg></span><span class="ig-t" style="--c:#64748B" data-n="登录"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span><span class="ig-t" style="--c:#F43F5E" data-n="会员"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="ig-t" style="--c:#22C55E" data-n="短信"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span><span class="ig-t" style="--c:#A855F7" data-n="生成"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="网络钩子"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="7" r="2.3"/><circle cx="18" cy="17" r="2.3"/><circle cx="18" cy="6" r="2.3"/><path d="M8.2 7.5l7.6-1M8 8.6l8.4 6.8"/></svg></span><span class="ig-t" style="--c:#3B82F6" data-n="域名"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg></span><span class="ig-t" style="--c:#EAB308" data-n="密钥"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M16 7l2 2"/></svg></span><span class="ig-t" style="--c:#6366F1" data-n="设计稿"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg></span><span class="ig-t" style="--c:#94A3B8" data-n="表单"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></svg></span><span class="ig-t" style="--c:#14B8A6" data-n="监控"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></span><span class="ig-t" style="--c:#06B6D4" data-n="客服"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#F97316" data-n="预约"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#84CC16" data-n="报表"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#A3A3A3" data-n="订阅"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span></div></div></div><div class="bis-v" data-i="2"><div class="bv bv-globe"><canvas class="glb" aria-hidden="true"></canvas><span class="bg-glow"></span></div></div><div class="bis-v" data-i="3"><div class="bv bv-badge"><i class="bb-l l1"></i><i class="bb-l l2"></i><i class="bb-l l3"></i><span class="bb b0"><b>加密</b><small>存储</small></span><span class="bb b1"><b>隔离</b><small>权限</small></span><span class="bb b2"><b>审计</b><small>日志</small></span><span class="bb b3"><b>备份</b><small>每日</small></span><span class="bg-glow"></span></div></div><div class="bis-v" data-i="4"><div class="bv bv-dev"><div class="bd-lap"><div class="bd-scr"><img src="https://8pt.dev/api/media/b3cefd20b35a4a148be85c86.webp" alt="" loading="lazy"></div><div class="bd-base"></div></div><div class="bd-ph"><div class="bd-ps"><img src="https://8pt.dev/api/media/28d90dbb2e5b1b652360ac32.webp" alt="" loading="lazy"></div></div><span class="bg-glow"></span></div></div></div></section>
.x-bis{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-bis,.x-bis *{box-sizing:border-box}.x-bis a{color:inherit;text-decoration:none}.x-bis button{font:inherit;cursor:pointer;color:inherit}.x-bis img{display:block;max-width:100%}.x-bis .lg{display:inline-block;width:24px;height:24px;flex:none}.x-bis .lg svg{width:100%;height:100%;display:block}.x-bis .ig-g{display:grid;grid-template-columns:repeat(7,64px);gap:14px;justify-content:center;-webkit-mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent);mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent)}.x-bis .ig-t{position:relative;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:var(--c);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .3s,background .3s,box-shadow .3s}.x-bis .ig-t:hover,.x-bis .ig-t.pulse{transform:translateY(-3px);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px -8px var(--c)}.x-bis .ig-t:hover::after{content:attr(data-n);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#ddd;background:#2a2a2a;padding:2px 8px;border-radius:6px;z-index:2}.x-bis .ig-c{background:linear-gradient(160deg,#FF8A3D,#FF3D8B 55%,#7B61FF);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 50px -6px rgba(255,61,139,.8);transform:scale(1.12)}.x-bis .ig-c .lg{width:36px;height:36px}.x-bis .ig-c .lg path:first-child{fill:#fff}.x-bis .ig-c .lg path:last-child{fill:#FF3D8B}@media (max-width:640px){.x-bis .ig-g{grid-template-columns:repeat(7,40px);gap:8px}.x-bis .ig-t{width:40px;height:40px;border-radius:11px}.x-bis .ig-t svg{width:18px;height:18px}.x-bis .ig-c .lg{width:24px;height:24px}}.x-bis .bv{position:relative;height:100%;overflow:hidden;border-radius:14px;background:radial-gradient(90% 70% at 50% 40%,#25262B,#17181B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.x-bis .bg-glow{position:absolute;left:-10%;right:-10%;bottom:-38%;height:60%;border-radius:50%;background:radial-gradient(closest-side,#9FB7FF,#4C6FFF 40%,rgba(255,102,204,.5) 70%,transparent);filter:blur(20px);opacity:.85;pointer-events:none}.x-bis .bv-host{background:linear-gradient(180deg,#1E2230,#1A1B22)}.x-bis .bh-glow{position:absolute;left:30%;right:30%;top:30%;bottom:20%;background:radial-gradient(closest-side,rgba(255,61,139,.35),transparent);filter:blur(20px)}.x-bis .bh-ln{position:absolute;inset:0;width:100%;height:100%}.x-bis .bh-win{position:absolute;left:26%;right:26%;top:22%;bottom:18%;border-radius:16px;background:rgba(40,42,50,.75);box-shadow:0 0 0 1.5px #5B8CFF,0 0 0 3px rgba(255,61,139,.35),0 20px 50px -10px rgba(255,61,139,.55);padding:8px}.x-bis .bh-bar{display:flex;align-items:center;gap:5px;height:22px;color:#aaa;font-size:10px}.x-bis .bh-bar i{width:7px;height:7px;border-radius:50%;background:#555}.x-bis .bh-bar span{flex:1;margin:0 10px;display:flex;align-items:center;justify-content:center;gap:4px;height:18px;border-radius:6px;background:#3a3c44}.x-bis .bh-bar b{width:14px;height:14px;border-radius:50%;background:#3a3c44}.x-bis .bh-body{position:absolute;left:8px;right:8px;top:36px;bottom:8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.x-bis .bh-n{position:absolute;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;color:#e6e6e6;background:radial-gradient(circle at 35% 30%,#5a5c66,#2b2c33);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.4);animation:bisF 4s ease-in-out infinite}.x-bis .bh-n.big{width:52px;height:52px;margin:-14px 0 0 -26px}.x-bis .n1{left:12%}.x-bis .n2{left:33%}.x-bis .n3{left:50%}.x-bis .n4{left:67%}.x-bis .n5{left:88%}.x-bis .n2,.x-bis .n4{animation-delay:-1.5s}.x-bis .n3{animation-delay:-.8s}@keyframes bisF{50%{transform:translateY(-5px)}}.x-bis .bv-grid{display:grid;place-items:center;background:#1B1C1F}.x-bis .bv-globe{background:#18191C}.x-bis .glb{position:absolute;left:0;top:0;width:100%;height:100%}.x-bis .bv-badge{background:#1B1C1F}.x-bis .bb-l{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.12)}.x-bis .l1{left:30%}.x-bis .l2{left:50%}.x-bis .l3{left:70%}.x-bis .bb{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;display:grid;place-content:center;text-align:center;color:#eee;background:radial-gradient(circle at 40% 30%,#4a4b52,#26272c);box-shadow:0 0 0 2px #2c2d33,0 0 0 3.5px rgba(255,79,163,.6),0 0 0 5px rgba(91,140,255,.5),0 12px 30px rgba(0,0,0,.5);z-index:1;animation:bisF 5s ease-in-out infinite}.x-bis .bb b{font-size:19px;font-weight:700;letter-spacing:.06em}.x-bis .bb small{font-size:10px;letter-spacing:.2em;color:#aaa;margin-top:2px}.x-bis .b0{left:50%;top:20%}.x-bis .b1{left:30%;top:42%;animation-delay:-1.2s}.x-bis .b2{left:70%;top:42%;animation-delay:-2.4s}.x-bis .b3{left:50%;top:64%;animation-delay:-3.6s}.x-bis .bv-dev{background:#1B1C1F}.x-bis .bd-lap{position:absolute;left:14%;width:56%;top:14%;z-index:1}.x-bis .bd-scr{aspect-ratio:16/10.4;border-radius:12px 12px 0 0;padding:8px;background:#2E2F35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(91,140,255,.35)}.x-bis .bd-scr img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px;opacity:.85}.x-bis .bd-base{height:10px;margin:0 -8%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#45464d,#2a2b30);box-shadow:0 8px 24px rgba(91,140,255,.35)}.x-bis .bd-ph{position:absolute;left:62%;width:17%;top:27%;z-index:2;aspect-ratio:9/18;border-radius:18px;padding:6px;background:#2E2F35;box-shadow:0 0 0 1.5px #7B8CFF,0 0 0 3px rgba(255,79,163,.45),0 16px 40px rgba(255,79,163,.35)}.x-bis .bd-ps{width:100%;height:100%;border-radius:12px;overflow:hidden}.x-bis .bd-ps img{width:100%;height:100%;object-fit:cover}.x-bis{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:48px;width:100%;max-width:1360px;margin:0 auto;padding:56px 40px;background:#1C1C1C;color:#fff;border-radius:22px}.x-bis h2{margin:0 0 14px;font-size:clamp(26px,2.6vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.2}.x-bis .bis-l>p{margin:0 0 30px;font-size:15px;line-height:1.65;color:#BDBDB8}.x-bis .bis-it{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;padding:14px 0}.x-bis .bis-it b{display:block;font-size:14px;font-weight:500}.x-bis .bis-it span{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.6;color:#BDBDB8;transition:max-height .4s,opacity .4s,margin .4s}.x-bis .bis-it.on span{max-height:80px;opacity:1;margin-top:8px}.x-bis .bis-it:not(.on) b{color:#D6D6D1}.x-bis .bis-it:hover b{color:#fff}.x-bis .bis-r{position:relative;height:500px}.x-bis .bis-v{position:absolute;inset:0;opacity:0;transform:scale(.98);transition:opacity .6s,transform .6s;pointer-events:none}.x-bis .bis-v.on{opacity:1;transform:none;pointer-events:auto}.x-bis.is-stack .bis-l{position:sticky;top:96px;align-self:start}.x-bis.is-stack .bis-r{height:auto;display:grid;gap:12px}.x-bis.is-stack .bis-v{position:relative;inset:auto;height:500px;opacity:1;transform:none;pointer-events:auto}@media (max-width:900px){.x-bis{grid-template-columns:1fr;padding:40px 18px;gap:28px}.x-bis .bis-r,.x-bis.is-stack .bis-v{height:360px}.x-bis.is-stack .bis-l{position:static}}@media (prefers-reduced-motion:reduce){.x-bis *,.x-bis *::before,.x-bis *::after{animation:none!important;transition:none!important}}.x-bis{max-width:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:16px 16px}.x-bis{width:1120px;max-width:100%;box-sizing:border-box}(root) => {const gridPulse=(g)=>{const ts=[...g.querySelectorAll('.ig-t:not(.ig-c)')];let k=0;const red=matchMedia('(prefers-reduced-motion: reduce)').matches;if(red)return ()=>{};const iv=setInterval(()=>{ts.forEach(t=>t.classList.remove('pulse'));const near=[9,10,11,16,18,23,24,25];const t=ts[near[k++%near.length]];if(t)t.classList.add('pulse')},1100);return ()=>clearInterval(iv)};const drawGlobe=(cv)=>{const ctx=cv.getContext('2d');const N=220,P=[],E=[];const ga=Math.PI*(3-Math.sqrt(5));for(let i=0;i<N;i++){const y=1-(i/(N-1))*2,r=Math.sqrt(1-y*y),t=ga*i;P.push([Math.cos(t)*r,y,Math.sin(t)*r])}
for(let i=0;i<N;i++)for(let j=i+1;j<N;j++){const dx=P[i][0]-P[j][0],dy=P[i][1]-P[j][1],dz=P[i][2]-P[j][2];if(dx*dx+dy*dy+dz*dz<0.058)E.push([i,j])}
const ll=(la,lo)=>{la*=Math.PI/180;lo*=Math.PI/180;return [Math.cos(la)*Math.cos(lo),Math.sin(la),Math.cos(la)*Math.sin(lo)]};const A=ll(28,-60),B=ll(-12,40);
let W=0,H=0,dpr=1,raf,a=0,prog=0;const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const fit=()=>{dpr=Math.min(2,devicePixelRatio||1);W=cv.clientWidth;H=cv.clientHeight;cv.width=W*dpr;cv.height=H*dpr};fit();const ro=new ResizeObserver(fit);ro.observe(cv);
const rot=(p)=>{const c=Math.cos(a),s=Math.sin(a),t=0.32,ct=Math.cos(t),st=Math.sin(t);let x=p[0]*c-p[2]*s,z=p[0]*s+p[2]*c,y=p[1];const y2=y*ct-z*st,z2=y*st+z*ct;return [x,y2,z2]};
const frame=()=>{ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,W,H);const R=Math.min(W,H)*0.42,cx=W/2,cy=H/2;const Q=P.map(rot);
ctx.lineWidth=0.6;for(const [i,j] of E){const z=(Q[i][2]+Q[j][2])/2;ctx.strokeStyle='rgba(200,210,255,'+(0.05+0.22*(z+1)/2)+')';ctx.beginPath();ctx.moveTo(cx+Q[i][0]*R,cy-Q[i][1]*R);ctx.lineTo(cx+Q[j][0]*R,cy-Q[j][1]*R);ctx.stroke()}
for(const q of Q){const z=(q[2]+1)/2;ctx.fillStyle='rgba(255,255,255,'+(0.15+0.85*z)+')';ctx.beginPath();ctx.arc(cx+q[0]*R,cy-q[1]*R,0.6+1.4*z,0,7);ctx.fill()}
const a1=rot(A),b1=rot(B);const pts=[];for(let k=0;k<=40;k++){const t=k/40;let x=a1[0]*(1-t)+b1[0]*t,y=a1[1]*(1-t)+b1[1]*t,z=a1[2]*(1-t)+b1[2]*t;const l=Math.hypot(x,y,z)||1,h=1+0.25*Math.sin(Math.PI*t);pts.push([cx+x/l*h*R,cy-y/l*h*R])}
const n=Math.max(2,Math.min(41,Math.floor(prog*40)));const gr=ctx.createLinearGradient(pts[0][0],pts[0][1],pts[40][0],pts[40][1]);gr.addColorStop(0,'#FF4FA3');gr.addColorStop(1,'#5B8CFF');ctx.strokeStyle=gr;ctx.lineWidth=2.2;ctx.beginPath();ctx.moveTo(pts[0][0],pts[0][1]);for(let k=1;k<n;k++)ctx.lineTo(pts[k][0],pts[k][1]);ctx.stroke();
for(const [p,c] of [[pts[0],'#FF4FA3'],[pts[n-1],'#5B8CFF']]){ctx.fillStyle=c;ctx.beginPath();ctx.arc(p[0],p[1],4,0,7);ctx.fill();ctx.strokeStyle='rgba(255,255,255,.9)';ctx.lineWidth=1.5;ctx.stroke()}
…Subscribe to Builder to see the full source.See pricing