Floating Icons CTA
Overview
On light gray, two clusters of tilted finance app icons float slowly up and down on either side of a two-part headline, a line of copy and a gray pill button. Good for topic entry points and vertical industry intro blocks.
Taken from the page template Banshi Design Reference Library Website. 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 Icons CTA to your project in your colors.
Where to use it
Background layers for heroes, login pages and launch pages: adds texture to large empty areas without competing with the content.
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 floating-icons-cta
mcp › Use 8pt MCP to call get_component("floating-icons-cta")
Code
Source for Floating Icons CTA. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-bfc"><section class="bs-fz"><div class="bs-fz__in"><span class="bs-fz__f" style="left:8%;top:6%;--r:-8deg;--d:0.00s"><span class="bs-ic " style="width:62px;height:62px;background:linear-gradient(145deg,#34d399,#059669)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></span></span><span class="bs-fz__f" style="left:20%;top:24%;--r:6deg;--d:0.37s"><span class="bs-ic " style="width:72px;height:72px;background:linear-gradient(145deg,#1e3a8a,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9 12 4l9 5M5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18"/></svg></span></span><span class="bs-fz__f" style="left:6%;top:44%;--r:-4deg;--d:0.74s"><span class="bs-ic " style="width:80px;height:80px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 9 12l4 3 7-9" stroke="#ef4444"/></svg></span></span><span class="bs-fz__f" style="left:22%;top:62%;--r:8deg;--d:1.11s"><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#111827,#374151)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h9M18 12v3M21 12v2"/></svg></span></span><span class="bs-fz__f" style="left:12%;top:80%;--r:-6deg;--d:1.48s"><span class="bs-ic " style="width:58px;height:58px;background:linear-gradient(145deg,#f43f5e,#be123c)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg></span></span><span class="bs-fz__f" style="left:86%;top:4%;--r:8deg;--d:1.85s"><span class="bs-ic " style="width:60px;height:60px;background:linear-gradient(145deg,#a3e635,#4d7c0f)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2.5"/><path d="M3 10h18"/></svg></span></span><span class="bs-fz__f" style="left:74%;top:22%;--r:-6deg;--d:2.22s"><span class="bs-ic " style="width:70px;height:70px;background:linear-gradient(145deg,#1e3a8a,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9 12 4l9 5M5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18"/></svg></span></span><span class="bs-fz__f" style="left:88%;top:42%;--r:4deg;--d:2.59s"><span class="bs-ic " style="width:78px;height:78px;background:linear-gradient(145deg,#f43f5e,#be123c)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg></span></span><span class="bs-fz__f" style="left:76%;top:62%;--r:-8deg;--d:2.96s"><span class="bs-ic " style="width:66px;height:66px;background:linear-gradient(145deg,#34d399,#059669)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></span></span><span class="bs-fz__f" style="left:86%;top:80%;--r:6deg;--d:3.33s"><span class="bs-ic " style="width:58px;height:58px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 9 12l4 3 7-9" stroke="#ef4444"/></svg></span></span> <div class="bs-fz__c"><h2 class="bs-fz__h"><span>在做金融产品？</span><br>金融专区看得更深。</h2> <p>投资、银行与数字资产类 App，连同实名认证之后、换个地区才能看到的流程。团队版与企业版可用。</p> <a class="bs-btn bs-btn--gray" href="#">进入金融专区</a></div></div></section></div>
.x-bfc{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bfc *{box-sizing:border-box;margin:0;padding:0}.x-bfc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bfc a{color:inherit;text-decoration:none}.x-bfc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bfc .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bfc .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bfc .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bfc .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bfc .bs-btn--dark{background:var(--ink);color:#fff}.x-bfc .bs-btn--dark:hover{background:#2a2a2e}.x-bfc .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bfc .bs-btn--gray:hover{background:#e2e2e5}.x-bfc .bs-btn svg{width:16px;height:16px}.x-bfc .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bfc .bs-ic svg{width:56%;height:56%}.x-bfc .bs-fz{background:var(--soft);padding:20px 24px 110px;overflow:hidden}.x-bfc .bs-fz__in{position:relative;width:100%;max-width:1000px;margin:0 auto;min-height:420px;display:flex;align-items:center;justify-content:center}.x-bfc .bs-fz__f{position:absolute;transform:rotate(var(--r));animation:xbfcFloat 6s ease-in-out infinite;animation-delay:var(--d)}.x-bfc .bs-fz__f .bs-ic{width:clamp(40px,5.4vw,72px)!important;height:clamp(40px,5.4vw,72px)!important}@keyframes xbfcFloat{50%{transform:rotate(var(--r)) translateY(-12px)}}.x-bfc .bs-fz__c{position:relative;z-index:2;text-align:center;max-width:440px}.x-bfc .bs-fz__h{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.2}.x-bfc .bs-fz__h span{color:#8a8a90}.x-bfc .bs-fz__c p{margin:18px auto 28px;font-size:14px;color:var(--mut);line-height:1.7;max-width:380px}.x-bfc .bs-fz__c .bs-btn{background:#e4e4e7}@media (max-width:720px){.x-bfc .bs-fz{padding:10px 16px 80px}.x-bfc .bs-fz__in{min-height:620px}.x-bfc .bs-fz__c{padding:0 8px}.x-bfc .bs-fz__f{display:none}.x-bfc .bs-fz__f:nth-child(1){display:block;left:4%!important;top:2%!important}.x-bfc .bs-fz__f:nth-child(2){display:block;left:32%!important;top:7%!important}.x-bfc .bs-fz__f:nth-child(6){display:block;left:60%!important;top:3%!important}.x-bfc .bs-fz__f:nth-child(8){display:block;left:84%!important;top:8%!important}.x-bfc .bs-fz__f:nth-child(4){display:block;left:10%!important;top:86%!important}.x-bfc .bs-fz__f:nth-child(3){display:block;left:42%!important;top:90%!important}.x-bfc .bs-fz__f:nth-child(9){display:block;left:72%!important;top:85%!important}}@media (prefers-reduced-motion:reduce){.x-bfc .bs-fz__f{animation:none}}.x-bfc .bs-fz{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:40px 24px}Subscribe to Builder to see the full source.See pricing