Chaos Versus Ship Split
Overview
A side-by-side contrast section: on the left a pile of alert notes drifts and stacks over a faint orange bar-chart noise, under a headline about fighting infrastructure the old way; the right half is solid orange, split by a dashed line, where a pill message with a check cycles through good news.
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 Chaos Versus Ship Split 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 suiyun-chaos-ship
mcp › Use 8pt MCP to call get_component("suiyun-chaos-ship")
Code
Source for Chaos Versus Ship Split. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-cvs"><h2>为什么选择燧云</h2><p class="x-cvs__sub">构建安全、高性能应用所需的一切</p><div class="x-cvs__grid"><div class="x-cvs__mess"><div class="x-cvs__bars" aria-hidden="true"></div><div class="x-cvs__note" style="left:30%;top:27%;animation-delay:-0.0s"><b>回源流量这周翻倍了，边缘缓存没生效，今天下班前能修好吗？</b></div><div class="x-cvs__note" style="left:54%;top:40%;animation-delay:-1.7s"><b class="x-cvs__p0">P0</b><span>高延迟！！！每个请求都慢半拍</span></div><div class="x-cvs__note" style="left:5%;top:45%;animation-delay:-3.4s"><b>实习生</b><span>“我把环境文件推到生产环境，报错就没了。”</span></div><div class="x-cvs__note" style="left:40%;top:58%;animation-delay:-5.1s"><b>源站地址暴露</b><span>正被直接攻击，需要马上封堵。</span></div><div class="x-cvs__note" style="left:8%;top:72%;animation-delay:-6.8s"><b>带宽用量告警</b><span>本月带宽额度已用尽。</span></div><div class="x-cvs__note" style="left:46%;top:80%;animation-delay:-8.5s"><b class="x-cvs__p0">P0</b><span>撞库攻击：短时间内大量异常登录</span></div><div class="x-cvs__note" style="left:10%;top:90%;animation-delay:-10.2s"><b>专线中断</b><span>跨区链路断开，运营商预计数小时后恢复。</span></div><h3>用“老办法”<br>硬扛基础设施</h3></div><div class="x-cvs__ship"><h3>用燧云<br>从容交付</h3><div class="x-cvs__line" aria-hidden="true"></div><div class="x-cvs__toast" aria-live="polite"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.3 4.3L19 7"/></svg><span>今日已推送新版本</span></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-cvs{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-cvs h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-cvs__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-cvs__grid{display:grid;grid-template-columns:1fr 1fr;width:82%;margin:0 auto;height:500px}.x-cvs__mess{position:relative;overflow:hidden;background:#fff;border:1px solid #F0F0F0}.x-cvs__bars{position:absolute;left:0;right:0;top:42%;height:30%;background-image:linear-gradient(90deg,rgba(255,93,29,.18) 1px,transparent 1px);background-size:7px 100%;-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);animation:x-cvs-noise 2.4s steps(4) infinite}.x-cvs__mess h3{position:absolute;left:0;right:0;top:44px;z-index:2;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15;text-shadow:0 0 18px #fff,0 0 8px #fff}.x-cvs__note{position:absolute;z-index:1;max-width:240px;padding:9px 12px;border:1px solid #EFEFEF;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px -16px rgba(0,0,0,.35);font-size:12.5px;line-height:1.4;text-align:left;color:#444;animation:x-cvs-drift 9s ease-in-out infinite}.x-cvs__note b{display:block;font-weight:500;color:#262626}.x-cvs__note .x-cvs__p0{display:inline-block;margin-bottom:3px;padding:1px 6px;border-radius:4px;background:#FDE3E5;color:#C9353E;font-size:11.5px}.x-cvs__note:nth-child(odd){opacity:.75}.x-cvs__ship{position:relative;overflow:hidden;background:#FF5D1D;color:#fff}.x-cvs__ship h3{position:absolute;left:0;right:0;top:44px;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15}.x-cvs__line{position:absolute;left:0;right:0;top:56%;border-top:1px dashed rgba(255,255,255,.55)}.x-cvs__toast{position:absolute;left:50%;top:56%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:14px;white-space:nowrap;transform:translate(-50%,-50%)}.x-cvs__toast svg{width:16px;height:16px}.x-cvs__toast span{transition:opacity .35s,transform .35s}.x-cvs__toast.is-swap span{opacity:0;transform:translateY(6px)}@keyframes x-cvs-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}@keyframes x-cvs-noise{25%{background-position:2px 0}50%{background-position:5px 0}75%{background-position:1px 0}}@media (max-width:640px){.x-cvs__grid{grid-template-columns:1fr;width:100%;height:auto}.x-cvs__mess,.x-cvs__ship{height:420px}}@media (prefers-reduced-motion:reduce){.x-cvs__note,.x-cvs__bars{animation:none}.x-cvs__toast span{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-cvs") ? root : root.querySelector(".x-cvs");
const toast = box && box.querySelector(".x-cvs__toast");
if (!toast) return;
const msgs = ["今日已推送新版本", "新成员今日已接入", "全球节点已同步完成", "安全规则已即时生效"];
let i = 0, t2 = 0;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const tick = () => { toast.classList.add("is-swap"); t2 = setTimeout(() => { i = (i + 1) % msgs.length; toast.querySelector("span").textContent = msgs[i]; toast.classList.remove("is-swap"); }, 350); };
const t = reduce ? 0 : setInterval(tick, 2600);
return () => { clearInterval(t); clearTimeout(t2); };
}Subscribe to Builder to see the full source.See pricing