Floating Tile CTA Banner
Overview
A closing orange call-to-action banner: dot texture with a warm yellow glow at the bottom and a few tilted translucent icon tiles drifting around. Centered headline, two lines of copy, a white primary and a light orange secondary button, with a dark orange selling-point marquee running along the bottom.
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 Floating Tile CTA Banner to your project in your colors.
Where to use it
Call-to-action buttons for sign-ups, checkout, form submission and landing pages, whenever you need a primary action people want to click.
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-cta-tiles
mcp › Use 8pt MCP to call get_component("suiyun-cta-tiles")
Code
Source for Floating Tile CTA Banner. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ctg"><div class="x-ctg__dots" aria-hidden="true"></div><div class="x-ctg__glow" aria-hidden="true"></div><div class="x-ctg__tiles" aria-hidden="true"><span class="x-ctg__tile" style="left:8%;top:16%;--r:-12deg;animation-delay:-0.0s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg></span><span class="x-ctg__tile" style="left:76%;top:40%;--r:10deg;animation-delay:-0.9s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg></span><span class="x-ctg__tile" style="left:83%;top:14%;--r:14deg;animation-delay:-1.8s"><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></span><span class="x-ctg__tile" style="left:14%;top:42%;--r:-6deg;animation-delay:-2.7s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg></span><span class="x-ctg__tile" style="left:90%;top:52%;--r:-10deg;animation-delay:-3.6s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg></span><span class="x-ctg__tile" style="left:26%;top:22%;--r:8deg;animation-delay:-4.5s"><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></div><div class="x-ctg__in"><h2>构建，不设边界</h2><p>把基础设施的复杂度交给网络，一次部署，全球可用。现在就开始构建。</p><div class="x-ctg__btns"><a class="x-ctg__b1" href="#">开始构建</a><a class="x-ctg__b2" href="#">查看文档<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13.5 6.5 5.5 5.5-5.5 5.5"/></svg></a></div></div><div class="x-ctg__strip" aria-hidden="true"><div class="x-ctg__run"><span><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>抵御大规模攻击</span><span><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><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份感知的零信任访问</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg>久经考验的基础设施</span><span><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>抵御大规模攻击</span><span><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><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份感知的零信任访问</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg>久经考验的基础设施</span></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-ctg{position:relative;width:100%;height:520px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate}.x-ctg__dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,236,214,.34) 1px,transparent 1.3px);background-size:6px 6px;animation:x-ctg-shim 6s ease-in-out infinite}.x-ctg__glow{position:absolute;left:50%;bottom:-120px;z-index:-1;width:640px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#FFF6D8 0%,#FFD98A 34%,rgba(255,160,70,.5) 62%,rgba(255,93,29,0) 100%);transform:translateX(-50%);animation:x-ctg-breathe 5.5s ease-in-out infinite}.x-ctg__tile{position:absolute;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(255,255,255,.14);box-shadow:0 10px 24px -14px rgba(120,30,0,.6);transform:rotate(var(--r));animation:x-ctg-float 7s ease-in-out infinite}.x-ctg__tile svg{width:24px;height:24px}.x-ctg__in{position:relative;display:flex;flex-direction:column;align-items:center;padding:120px 24px 0;text-align:center}.x-ctg h2{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.015em}.x-ctg p{margin:22px 0 0;max-width:560px;font-size:16.5px;line-height:1.55;opacity:.95}.x-ctg__btns{display:flex;gap:10px;margin-top:32px}.x-ctg__btns a{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s,background .25s}.x-ctg__btns svg{width:15px;height:15px}.x-ctg__b1{background:#fff;color:#1d1d1d}.x-ctg__b2{background:rgba(255,255,255,.18);color:#fff}.x-ctg__btns a:hover{transform:translateY(-2px)}.x-ctg__b2:hover{background:rgba(255,255,255,.28)}.x-ctg__strip{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;overflow:hidden;background:rgba(214,64,8,.55)}.x-ctg__run{display:flex;width:max-content;animation:x-ctg-run 26s linear infinite}.x-ctg__run span{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:14.5px;white-space:nowrap}.x-ctg__run svg{width:16px;height:16px}@keyframes x-ctg-float{50%{transform:rotate(var(--r)) translateY(-12px)}}@keyframes x-ctg-run{to{transform:translateX(-50%)}}@keyframes x-ctg-shim{50%{opacity:.55}}@keyframes x-ctg-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-ctg{height:600px}.x-ctg__in{padding-top:130px}.x-ctg__btns{flex-direction:column;align-self:stretch}.x-ctg__btns a{justify-content:center}.x-ctg__tile{width:46px;height:46px}.x-ctg__tile svg{width:18px;height:18px}.x-ctg__tile:nth-child(n+5){display:none}}@media (prefers-reduced-motion:reduce){.x-ctg__tile,.x-ctg__run,.x-ctg__dots,.x-ctg__glow{animation:none}.x-ctg__btns a{transition:none}}Subscribe to Builder to see the full source.See pricing