Typing Search Marquee
Overview
A left-aligned question-style headline with a long gray paragraph, a search term below that types out, deletes and rotates, and at the bottom a slowly scrolling gallery of interface screenshots alternating phone and web cards, pausing on hover.
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 Typing Search Marquee 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 typing-search-marquee
mcp › Use 8pt MCP to call get_component("typing-search-marquee")
Code
Source for Typing Search Marquee. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-bts"><section class="bs-sm"><div class="bs-wrap"> <h2 class="bs-sm__h">设计调研，曾经要花半天。<br>现在，搜一下就够了。</h2> <p class="bs-sm__p">每位设计师都有那样一个文件夹：<br>存了几百张截图，<br>需要时偏偏找不到那一张。</p> <div class="bs-sm__q"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10.5" cy="11.5" r="6"/><path d="m20 21-5.2-5.2M18 2.5v4M16 4.5h4"/></svg><span class="bs-sm__typed" data-q='顺手的新手引导|让人想升级的付费页|清爽的空状态|一眼看懂的数据看板'>顺手的新手引导</span><i class="bs-sm__caret"></i></div> </div> <div class="bs-sm__view"><div class="bs-sm__track"><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7" fill="#f97316" stroke="none"/><path d="M9 11c1 1 2 1 3 0M13 11c1 1 2 1 3 0" stroke="#7c2d12"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar s"></div><div class="bs-ph__hero" style="background:#f9731622"><span style="width:58%;aspect-ratio:1;border-radius:50%;background:#f97316;display:block"></span></div><div class="bs-ph__bar d m"></div><div class="bs-ph__bar"></div><div class="bs-ph__bar s"></div><div class="bs-ph__btn"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><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="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__hero" style="flex:0 0 32%;background:linear-gradient(160deg,#7c3aed,#111)"></div><div class="bs-ph__bar d m"></div><div class="bs-ph__plan on"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__plan"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__btn" style="background:#7c3aed"></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#27272a,#09090b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bub">你好，想从哪里开始？</div><div class="bs-ph__bub me">先看看新手引导</div><div class="bs-ph__bub">好的，帮你挑了几种做法</div><div class="bs-ph__bub me">第二种不错</div><div class="bs-ph__bar" style="height:20px;border-radius:999px;margin-top:auto"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z M4 7.5l8 4.5 8-4.5 M12 12v9"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m" style="height:14px;background:#111"></div><div class="bs-ph__bars"><i style="height:40%;background:#111"></i><i style="height:65%;background:#111"></i><i style="height:50%;background:#111"></i><i style="height:85%;background:#111"></i><i style="height:60%;background:#111"></i><i style="height:95%;background:#16a34a"></i><i style="height:70%;background:#111"></i></div><div class="bs-ph__row"><b style="background:#e0e7ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fee2e2"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar" style="height:20px;border-radius:8px"></div><div class="bs-ph__row"><b style="background:#fde68a"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bfdbfe"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fecdd3"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bbf7d0"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#e9d5ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7" fill="#f97316" stroke="none"/><path d="M9 11c1 1 2 1 3 0M13 11c1 1 2 1 3 0" stroke="#7c2d12"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar s"></div><div class="bs-ph__hero" style="background:#f9731622"><span style="width:58%;aspect-ratio:1;border-radius:50%;background:#f97316;display:block"></span></div><div class="bs-ph__bar d m"></div><div class="bs-ph__bar"></div><div class="bs-ph__bar s"></div><div class="bs-ph__btn"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><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="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__hero" style="flex:0 0 32%;background:linear-gradient(160deg,#7c3aed,#111)"></div><div class="bs-ph__bar d m"></div><div class="bs-ph__plan on"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__plan"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__btn" style="background:#7c3aed"></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#27272a,#09090b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bub">你好，想从哪里开始？</div><div class="bs-ph__bub me">先看看新手引导</div><div class="bs-ph__bub">好的，帮你挑了几种做法</div><div class="bs-ph__bub me">第二种不错</div><div class="bs-ph__bar" style="height:20px;border-radius:999px;margin-top:auto"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z M4 7.5l8 4.5 8-4.5 M12 12v9"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m" style="height:14px;background:#111"></div><div class="bs-ph__bars"><i style="height:40%;background:#111"></i><i style="height:65%;background:#111"></i><i style="height:50%;background:#111"></i><i style="height:85%;background:#111"></i><i style="height:60%;background:#111"></i><i style="height:95%;background:#16a34a"></i><i style="height:70%;background:#111"></i></div><div class="bs-ph__row"><b style="background:#e0e7ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fee2e2"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar" style="height:20px;border-radius:8px"></div><div class="bs-ph__row"><b style="background:#fde68a"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bfdbfe"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fecdd3"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bbf7d0"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#e9d5ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></div></div></div></div> </section></div>
.x-bts{--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-bts *{box-sizing:border-box;margin:0;padding:0}.x-bts{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-bts a{color:inherit;text-decoration:none}.x-bts button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bts .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bts .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bts .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-bts .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bts .bs-btn--dark{background:var(--ink);color:#fff}.x-bts .bs-btn--dark:hover{background:#2a2a2e}.x-bts .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bts .bs-btn--gray:hover{background:#e2e2e5}.x-bts .bs-btn svg{width:16px;height:16px}.x-bts .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-bts .bs-ic svg{width:56%;height:56%}.x-bts .bs-ph{position:relative;width:100%;aspect-ratio:9/19.5;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 18px 40px -24px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;gap:8px;font-size:9px;color:#111}.x-bts .bs-ph__sb{display:flex;justify-content:space-between;font-weight:600;font-size:8px}.x-bts .bs-ph__sb i{display:inline-block;width:18px;height:6px;border-radius:2px;background:#111;margin-left:3px}.x-bts .bs-ph__bar{height:6px;border-radius:3px;background:#ececef}.x-bts .bs-ph__bar.s{width:45%}.x-bts .bs-ph__bar.m{width:70%}.x-bts .bs-ph__bar.d{background:#1a1a1e}.x-bts .bs-ph__hero{flex:1;border-radius:14px;display:grid;place-items:center}.x-bts .bs-ph__btn{height:22px;border-radius:999px;background:#111;margin-top:auto}.x-bts .bs-ph__row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f2}.x-bts .bs-ph__row b{width:20px;height:20px;border-radius:6px;flex:none}.x-bts .bs-ph__row span{flex:1;display:flex;flex-direction:column;gap:4px}.x-bts .bs-ph__plan{border:1.5px solid #ececef;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}.x-bts .bs-ph__plan.on{border-color:#111}.x-bts .bs-ph__bub{max-width:78%;padding:6px 8px;border-radius:10px;background:#f1f1f3;font-size:8.5px;line-height:1.4}.x-bts .bs-ph__bub.me{align-self:flex-end;background:#2563eb;color:#fff}.x-bts .bs-ph__bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding:8px 0}.x-bts .bs-ph__bars i{flex:1;border-radius:4px 4px 0 0;background:#111}.x-bts .bs-site{position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}.x-bts .bs-site__nav{position:absolute;left:5%;right:5%;top:5%;display:flex;justify-content:space-between}.x-bts .bs-site__nav i{display:block;height:3px;width:14%;border-radius:2px;background:currentColor;opacity:.5}.x-bts .bs-site__t{position:absolute;left:0;right:0;text-align:center;font-weight:700;letter-spacing:-.02em;line-height:1.15}.x-bts .bs-site--wave{background:radial-gradient(120% 90% at 70% 30%,#3b1d8f,#0b0618 70%);color:#fff}.x-bts .bs-site--wave svg{position:absolute;inset:0;width:100%;height:100%}.x-bts .bs-site--wave .bs-site__t{bottom:16%;font-family:Georgia,"Noto Serif CJK SC",serif;font-weight:400;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--float{background:#fff;color:#111}.x-bts .bs-site--float .bs-site__t{top:38%;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--float .bs-site__t em{font-style:normal;color:#ec4899}.x-bts .bs-site--float b{position:absolute;width:11%;aspect-ratio:1;border-radius:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}.x-bts .bs-site--gal{background:#0e0e10;color:#fff}.x-bts .bs-site--gal b{position:absolute;width:9%;aspect-ratio:3/4;border-radius:2px}.x-bts .bs-site--gal .bs-site__t{top:40%;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--gal .bs-site__pill{position:absolute;left:50%;top:62%;width:16%;height:7%;margin-left:-8%;border-radius:99px;background:#fff}.x-bts .bs-sm{padding:110px 0 120px;overflow:hidden}.x-bts .bs-sm__h{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.25}.x-bts .bs-sm__p{margin-top:40px;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.3;color:#8a8a90}.x-bts .bs-sm__q{display:flex;align-items:center;gap:14px;margin-top:64px;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;min-height:44px}.x-bts .bs-sm__q svg{width:30px;height:30px;flex:none}.x-bts .bs-sm__caret{width:2px;height:1.1em;background:#111;animation:xbtsBlink 1s steps(1) infinite}@keyframes xbtsBlink{50%{opacity:0}}.x-bts .bs-sm__view{margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.x-bts .bs-sm__track{display:flex;gap:16px;width:max-content;animation:xbtsMarq 60s linear infinite;padding:14px 0}.x-bts .bs-sm__view:hover .bs-sm__track{animation-play-state:paused}@keyframes xbtsMarq{to{transform:translateX(-50%)}}.x-bts .bs-sm__c{position:relative;flex:none;height:420px;background:var(--soft);border-radius:28px;display:grid;place-items:center;padding:28px}.x-bts .bs-sm__c--ph{width:240px}.x-bts .bs-sm__c--site{width:420px}.x-bts .bs-sm__in{width:100%}.x-bts .bs-sm__c--ph .bs-sm__in{width:170px}.x-bts .bs-sm__badge{position:absolute;left:16px;top:16px;z-index:2}@media (max-width:720px){.x-bts .bs-sm{padding:72px 0 80px}.x-bts .bs-sm__c{height:320px;padding:20px;border-radius:22px}.x-bts .bs-sm__c--ph{width:190px}.x-bts .bs-sm__c--ph .bs-sm__in{width:130px}.x-bts .bs-sm__c--site{width:300px}}@media (prefers-reduced-motion:reduce){.x-bts .bs-sm__track{animation:none}.x-bts .bs-sm__caret{animation:none}}.x-bts .bs-sm__view{contain:inline-size}.x-bts .bs-sm{padding:56px 0}.x-bts .bs-sm__p{margin-top:24px}.x-bts .bs-sm__q{margin-top:36px}.x-bts .bs-sm__view{margin-top:28px}.x-bts .bs-sm__c{height:340px}.x-bts .bs-sm__c--ph{width:200px}.x-bts .bs-sm__c--ph .bs-sm__in{width:140px}.x-bts .bs-sm__c--site{width:360px}(root) => {
const el = (root.classList && root.classList.contains('x-bts')) ? root : (root.querySelector('.x-bts') || root);
const out = el.querySelector('.bs-sm__typed');
const qs = (out.getAttribute('data-q') || '').split('|');
const RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
let qi = 0, ci = qs[0].length, del = true, tm = 0;
const step = () => {
const q = qs[qi];
if (del) { ci--; if (ci <= 0) { del = false; qi = (qi + 1) % qs.length; } }
else { ci++; if (ci >= qs[qi].length) { del = true; out.textContent = qs[qi]; tm = setTimeout(step, 2200); return; } }
…Subscribe to Builder to see the full source.See pricing