Trio Capability Cards
Overview
A headline with three white capability cards: an input with a colorful glow that types by itself, an editor preview where a dashed selection hops between headline and button with the cursor following, and a side menu whose highlight steps through each item.
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 Trio Capability Cards to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
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 trio-capability-cards
mcp › Use 8pt MCP to call get_component("trio-capability-cards")
Code
Source for Trio Capability Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<section class="x-trc"><div class="trc-h"><h2>一个平台，无限可能。</h2><p>能描述出来，就能做出来。从零开始创建、运行、管理整个产品和生意。</p></div><div class="trc-g"><article class="trc-c"><div class="tv tv1"><span class="tv1-h"></span><div class="tv1-in"><b class="tv1-t"></b><i></i></div></div><h3>你出想法，念成把它做出来</h3><p>用平常说话的方式描述需求，看着念成和你一起实时搭出可上线的软件。</p></article><article class="trc-c"><div class="tv tv2"><div class="tv2-w"><div class="tv2-tb"><span class="pv"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.7" 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><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg></div><div class="tv2-pg"><div class="tv2-sel s1"><b>让团队修复问题<br>快人一步</b><em>h1</em></div><p class="tv2-p">为研发团队打造：分派、跟踪、解决问题，不拖慢节奏。</p><span class="tv2-sel s2"><span class="tv2-btn">立即开始</span><em>button</em></span></div><span class="tv2-cur"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="#111"><path d="M5 3l6 17 2-7 7-2z"/></svg></span></div></div><h3>细调设计，一键发布</h3><p>反复打磨直到满意，然后直接发布，马上就能用起来。</p></article><article class="trc-c"><div class="tv tv3"><span class="tv3-h"></span><ul><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6 15l4-5 3 3 5-7"/></svg><span>数据分析</span></li><li class="on"><svg viewBox="0 0 24 24" width="16" height="16" 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></li><li><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="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></li><li><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6z"/></svg><span>安全</span></li><li><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="8" width="14" height="11" rx="3"/><path d="M12 4v4M9 13h.01M15 13h.01"/></svg><span>智能体集成</span></li><li><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="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg><span>收款</span></li><li><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="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg><span>搜索与 AI 收录</span></li></ul><span class="tv3-p"></span></div><h3>从头到尾，都能交给念成</h3><p>托管、登录、收款、各种连接，整套基础设施都替你照看好。</p></article></div></section>
.x-trc{--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-trc,.x-trc *{box-sizing:border-box}.x-trc a{color:inherit;text-decoration:none}.x-trc button{font:inherit;cursor:pointer;color:inherit}.x-trc img{display:block;max-width:100%}.x-trc{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}.x-trc .trc-h{max-width:560px;margin-bottom:44px}.x-trc h2{margin:0 0 14px;font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.15}.x-trc .trc-h p{margin:0;font-size:16px;line-height:1.6;color:var(--mut)}.x-trc .trc-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.x-trc .trc-c{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;padding-bottom:26px;transition:box-shadow .3s,transform .3s}.x-trc .trc-c:hover{box-shadow:0 20px 40px -24px rgba(0,0,0,.18);transform:translateY(-2px)}.x-trc h3{margin:0 22px 10px;font-size:16px;font-weight:600;letter-spacing:-.01em}.x-trc .trc-c p{margin:0 22px;font-size:14px;line-height:1.7;color:var(--mut)}.x-trc .tv{position:relative;height:290px;overflow:hidden;margin-bottom:22px}.x-trc .tv1-h{position:absolute;right:-60px;top:-80px;width:300px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,102,204,.45),rgba(76,125,255,.25),transparent);filter:blur(20px);animation:trcH 8s ease-in-out infinite alternate}@keyframes trcH{to{transform:translate(-30px,20px)}}.x-trc .tv1-in{position:absolute;left:24px;right:-30px;top:72px;height:170px;background:#fff;border-radius:18px;box-shadow:0 0 0 1px rgba(0,0,0,.04),-10px 10px 40px -8px rgba(76,125,255,.55),10px -6px 40px -10px rgba(255,102,204,.4);padding:16px 18px;font-size:22px;color:#B5B5B0}.x-trc .tv1-in i{display:inline-block;width:2px;height:24px;background:#888;vertical-align:-4px;animation:cmpB2 1s steps(1) infinite}@keyframes cmpB2{50%{opacity:0}}.x-trc .tv1-t{font-weight:400}.x-trc .tv2-w{position:absolute;left:20px;right:-1px;top:20px;bottom:-1px;background:#fff;border:1px solid var(--line);border-right:0;border-radius:14px 0 0 0;box-shadow:0 10px 30px -12px rgba(0,0,0,.15)}.x-trc .tv2-tb{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);color:#777}.x-trc .tv2-tb .pv{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#E8F0FF;color:#2F5BD3;font-size:12px;font-weight:500}.x-trc .tv2-pg{padding:26px 16px 0 18px}.x-trc .tv2-sel{position:relative;display:inline-block;padding:4px 6px;outline:1.5px dashed transparent;border-radius:4px;transition:outline-color .3s}.x-trc .tv2-sel em{position:absolute;right:-14px;top:-8px;font-style:normal;font-size:10px;font-weight:600;color:#fff;background:#3B6CF6;border-radius:999px;padding:1px 6px;opacity:0;transition:opacity .3s}.x-trc .tv2-sel.on{outline-color:#3B6CF6}.x-trc .tv2-sel.on em{opacity:1}.x-trc .tv2-sel b{font-size:22px;line-height:1.2;letter-spacing:-.02em;color:#3A3A38}.x-trc .tv2-p{margin:10px 6px 14px;font-size:12px;line-height:1.6;color:#B0B0AB}.x-trc .tv2-btn{display:inline-block;padding:8px 14px;border-radius:8px;background:#C9C9C4;color:#fff;font-size:13px;font-weight:500}.x-trc .tv2-cur{position:absolute;left:62%;top:44%;transition:left .9s cubic-bezier(.6,0,.2,1),top .9s cubic-bezier(.6,0,.2,1)}.x-trc .tv2-cur svg{stroke:#fff}.x-trc .tv3-h{position:absolute;left:-90px;top:-40px;width:200px;height:380px;background:radial-gradient(closest-side,rgba(255,122,26,.55),rgba(255,102,204,.25),transparent);filter:blur(18px)}.x-trc .tv3 ul{position:absolute;left:28px;top:20px;bottom:0;width:62%;margin:0;padding:10px 8px;list-style:none;background:rgba(255,255,255,.9);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}.x-trc .tv3 li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;margin-bottom:2px;border-radius:9px;font-size:13px;color:#55554F;transition:background .35s,color .35s}.x-trc .tv3 li svg{color:#8A8A85;flex:none}.x-trc .tv3 li.on{background:#EFEEE9;color:#1C1C1A}.x-trc .tv3 li:nth-child(n+6){opacity:.55}.x-trc .tv3 li:nth-child(7){opacity:.3}.x-trc .tv3-p{position:absolute;right:-1px;top:40px;width:30%;bottom:0;background:#F2F1EC;border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:10px 0 0 0}@media (max-width:900px){.x-trc .trc-g{grid-template-columns:1fr;max-width:520px}}@media (prefers-reduced-motion:reduce){.x-trc *,.x-trc *::before,.x-trc *::after{animation:none!important;transition:none!important}}.x-trc{padding:56px 4%;background-image:radial-gradient(rgba(28,28,26,.13) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-trc{width:1200px;max-width:100%;box-sizing:border-box}(root) => {const cl=[];const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const t=root.querySelector('.tv1-t'),words=['做一个线上花店…','做一个读书会报名页…','做一个家庭记账工具…'];let wi=0,ci=0,d=false,tm;
const ty=()=>{const w=words[wi];if(red){t.textContent=w;return}if(!d){t.textContent=w.slice(0,++ci);if(ci>=w.length){d=true;tm=setTimeout(ty,1500);return}}else{t.textContent=w.slice(0,--ci);if(ci<=0){d=false;wi=(wi+1)%words.length}}tm=setTimeout(ty,d?40:110)};ty();
const s1=root.querySelector('.s1'),s2=root.querySelector('.s2'),cur=root.querySelector('.tv2-cur');let st=0;
const sw=()=>{st^=1;s1.classList.toggle('on',!st);s2.classList.toggle('on',!!st);cur.style.left=st?'38%':'62%';cur.style.top=st?'78%':'44%'};sw();const i1=red?0:setInterval(sw,2600);
const lis=[...root.querySelectorAll('.tv3 li')];let a=1;const i2=red?0:setInterval(()=>{a=(a+1)%5;lis.forEach((l,i)=>l.classList.toggle('on',i===a))},1800);
return ()=>{clearTimeout(tm);clearInterval(i1);clearInterval(i2)}}Subscribe to Builder to see the full source.See pricing