Electric Border Pricing
Overview
Three pricing cards: the recommended tier stands out with a rotating warm orange light-streak border and outer glow while the other two stay as restrained dark cards. Cards lift slightly on hover and clicking a button switches it to Selected. Amounts are shown as samples; one column on narrow screens.
Taken from the page template Yanbai Independent Designer Portfolio. 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 Electric Border Pricing to your project in your colors.
Where to use it
SaaS pricing pages, upgrade dialogs, plan comparisons and monthly / yearly toggles.
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 electric-border-pricing
mcp › Use 8pt MCP to call get_component("electric-border-pricing")
Code
Source for Electric Border Pricing. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ebp"><div class="x-ebp__head"><h2>报价</h2><p>开工前先谈好一口价 · 金额为示意</p></div><div class="x-ebp__plans"><article class="x-ebp__plan"><div class="x-ebp__body"><h3>官网</h3><div class="x-ebp__amt"><b>¥2.8万</b><span>起</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>设计与开发</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>按需加入动效与 3D</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>内容可自行编辑</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>二到四周上线</li></ul><button type="button" class="x-ebp__pick">选这个</button></div></article><article class="x-ebp__plan x-ebp__plan--hot"><span class="x-ebp__ring" aria-hidden="true"></span><div class="x-ebp__body"><h3>长期合作</h3><div class="x-ebp__amt"><b>¥3.5万</b><span>每月</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>随时提需求</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每隔几天交付更新</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>排期优先</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>可随时暂停或结束</li></ul><button type="button" class="x-ebp__pick">选这个<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 6l6 6-6 6"/></svg></button></div></article><article class="x-ebp__plan"><div class="x-ebp__body"><h3>产品设计</h3><div class="x-ebp__amt"><b>¥4.2万</b><span>起</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>后台与 SaaS 产品</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>双平台移动应用</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>完整设计系统</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>可直接交付开发的原型</li></ul><button type="button" class="x-ebp__pick">选这个</button></div></article></div></div>
.x-ebp{box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;padding:30px 18px 18px;border-radius:26px;background:#1d1b19;color:#efe9de;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;box-shadow:0 0 0 1px rgba(239,233,222,.09),0 40px 100px -30px rgba(0,0,0,.8)}.x-ebp *,.x-ebp *::before,.x-ebp *::after{box-sizing:border-box}.x-ebp svg{width:1em;height:1em;flex:none}.x-ebp__head{padding:0 18px 22px}.x-ebp__head h2{margin:0;font-size:22px;font-weight:600}.x-ebp__head p{margin:6px 0 0;font-size:13px;color:#8f877c}.x-ebp__plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.x-ebp__plan{position:relative;border-radius:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.x-ebp__plan:hover{transform:translateY(-4px)}.x-ebp__body{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:26px 24px 22px;border-radius:20px;background:linear-gradient(180deg,#2a2725,#232120);box-shadow:inset 0 0 0 1px rgba(239,233,222,.09),inset 0 1px 0 rgba(255,255,255,.04)}.x-ebp__plan h3{margin:0;font-size:14px;font-weight:600}.x-ebp__amt{display:flex;align-items:baseline;gap:8px;margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid rgba(239,233,222,.09)}.x-ebp__amt b{font-size:38px;font-weight:600;font-variant-numeric:tabular-nums}.x-ebp__amt span{font-size:13px;color:#8f877c}.x-ebp__plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;font-size:13px;color:#cfc6ba}.x-ebp__plan li{display:flex;align-items:center;gap:10px}.x-ebp__plan li svg{color:#8f877c;font-size:14px}.x-ebp__pick{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;height:44px;border:0;border-radius:99px;background:#2f2c29;color:#efe9de;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09);transition:background .2s}.x-ebp__pick:hover{background:#3a3532}.x-ebp__plan--hot{box-shadow:0 0 34px -4px rgba(240,150,80,.55),0 0 80px -20px rgba(240,150,80,.5)}.x-ebp__plan--hot .x-ebp__body{inset:auto;margin:2px;height:calc(100% - 4px);border-radius:18px;background:linear-gradient(180deg,#2e2925,#24201d)}.x-ebp__plan--hot li svg{color:#f0b07a}.x-ebp__plan--hot .x-ebp__pick{background:linear-gradient(90deg,#f4c399,#fff3e4);color:#2a1d12;box-shadow:0 0 24px rgba(240,160,90,.4)}.x-ebp__ring{position:absolute;inset:0;border-radius:20px;overflow:hidden}.x-ebp__ring::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;background:conic-gradient(#f7b77c,#fff1de,#e3803f 30%,#3a2a1f 45%,#3a2a1f 55%,#ffd6ac 70%,#f7b77c);transform:translate(-50%,-50%) rotate(0deg);animation:x-ebp-spin 4s linear infinite}@keyframes x-ebp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width:760px){.x-ebp__plans{grid-template-columns:1fr}.x-ebp__amt b{font-size:28px}}@media (prefers-reduced-motion:reduce){.x-ebp__ring::before{animation:none}.x-ebp__plan{transition:none}}(root) => {
const plans = [...root.querySelectorAll('.x-ebp__plan')];
const onClick = e => {
const b = e.target.closest('.x-ebp__pick');
if (!b) return;
plans.forEach(p => { const pick = p.querySelector('.x-ebp__pick'); pick.firstChild.textContent = p.contains(b) ? '已选择' : '选这个'; });
};
root.addEventListener('click', onClick);
return () => root.removeEventListener('click', onClick);
}Subscribe to Builder to see the full source.See pricing