Paywall Flow Strip
介绍
三台手机依次展示欢迎页、提问页与付费墙，上方步骤标签用箭头串起，当前步骤自动轮换并让对应手机轻微上浮，悬停可手动定位。适合讲解引导流程与收费设计。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Paywall Flow Strip 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add paywall-flow-strip
mcp › 使用 8pt MCP 调用 get_component("paywall-flow-strip")
代码
Paywall Flow Strip 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-pfs"><div class="pfs-sky"><div class="pfs-app"><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><b>轻食记</b><span>— 屏</span></div><div class="pfs-steps"><span class="pfs-lab">欢迎页</span><i class="pfs-arr">→</i><span class="pfs-lab">提问</span><i class="pfs-arr">→</i><span class="pfs-lab">付费墙</span></div><div class="pfs-row"><div class="pfs-ph"><div class="ph-notch"></div><div class="pfs-scr s1"><img src="https://8pt.dev/api/media/bb261f7dbeedbc68bf1caabb.webp" alt=""><b>轻松记录每一餐</b><span></span><span></span><div class="pfs-btn">开始</div></div></div><div class="pfs-ph"><div class="ph-notch"></div><div class="pfs-scr s2"><b>你的目标是？</b><small>为你定制计划</small><div class="pfs-opt">减脂</div><div class="pfs-opt">保持</div><div class="pfs-opt on">增肌</div><div class="pfs-btn">下一步</div></div></div><div class="pfs-ph pfs-pw"><div class="ph-notch"></div><div class="ph-scr"><b>解锁全部计划</b><span class="ph-sub">让目标更快达成</span><div class="ph-ring"><i></i><em>—</em></div><div class="ph-rows"><span></span><span></span><span></span></div><div class="ph-plan on">年度 · 示意价</div><div class="ph-plan">月度</div><div class="ph-btn">继续</div></div></div></div></div></div>
.x-pfs{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-pfs,.x-pfs *{box-sizing:border-box}.x-pfs a{color:inherit;text-decoration:none}.x-pfs button{font:inherit;cursor:pointer}.x-pfs{width:100%;max-width:980px;margin:0 auto;text-align:left}.x-pfs .pfs-sky{border-radius:20px;overflow:hidden;background:#CFE4FB url(https://8pt.dev/api/media/8d6547efdad29210b7d11a4e.webp) center/cover;padding:56px 6% 0;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.x-pfs .pfs-app{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:5px 14px 5px 6px;font-size:13px;box-shadow:0 4px 14px -6px rgba(30,70,140,.3)}.x-pfs .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center}.x-pfs .ic svg{width:12px;height:12px}.x-pfs .pfs-app b{font-weight:600}.x-pfs .pfs-app>span:not(.ic){color:#98A2B3;padding-left:8px;border-left:1px solid var(--line)}.x-pfs .pfs-steps{display:grid;grid-template-columns:118px 24px 118px 24px 118px;gap:8px;align-items:center;margin:22px 0 10px;justify-items:center}.x-pfs .pfs-lab{font-size:11px;color:#475467;background:rgba(255,255,255,.85);padding:4px 10px;border-radius:999px;transition:all .3s}.x-pfs .pfs-lab.on{background:var(--ink);color:#fff}.x-pfs .pfs-arr{font-style:normal;font-size:11px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:#475467}.x-pfs .pfs-row{display:grid;grid-template-columns:repeat(3,118px);gap:40px;align-items:start;height:236px;overflow:hidden}.x-pfs .pfs-ph{position:relative;width:118px;height:250px;border-radius:22px;background:#0E1116;padding:5px;box-shadow:0 18px 40px -16px rgba(14,17,22,.45);transition:transform .4s ease}.x-pfs .pfs-ph.on{transform:translateY(-8px)}.x-pfs .pfs-ph .ph-notch{position:absolute;top:9px;left:50%;width:34px;height:8px;margin-left:-17px;border-radius:6px;background:#0E1116;z-index:2}.x-pfs .pfs-scr{height:100%;border-radius:18px;background:#fff;padding:22px 9px 9px;display:flex;flex-direction:column;gap:6px;overflow:hidden;font-size:8px}.x-pfs .pfs-scr b{font-size:10px;font-weight:600}.x-pfs .pfs-scr small{font-size:7px;color:#98A2B3}.x-pfs .s1 img{width:100%;height:92px;object-fit:cover;border-radius:10px}.x-pfs .s1 span{height:5px;border-radius:3px;background:#EEF1F6}.x-pfs .pfs-opt{border:1px solid var(--line);border-radius:6px;padding:5px 7px;color:#475467}.x-pfs .pfs-opt.on{background:var(--ink);color:#fff;border-color:var(--ink)}.x-pfs .pfs-btn{margin-top:auto;text-align:center;color:#fff;background:#0E1116;border-radius:7px;padding:5px 0}@media (max-width:640px){.x-pfs .pfs-steps{grid-template-columns:86px 18px 86px 18px 86px;gap:4px}.x-pfs .pfs-row{grid-template-columns:repeat(3,86px);gap:22px;height:180px}.x-pfs .pfs-row>div{transform:scale(.73);transform-origin:top left}.x-pfs .pfs-row>div.on{transform:scale(.73) translateY(-8px)}.x-pfs .pfs-sky{min-height:0;padding-top:36px}}@media (prefers-reduced-motion:reduce){.x-pfs *{transition:none!important}}.x-pfs .pfs-pw{position:relative;width:118px;height:236px;border-radius:22px;background:#0E1116;padding:5px;box-shadow:0 18px 40px -16px rgba(14,17,22,.45)}.x-pfs .pfs-pw .ph-notch{position:absolute;top:9px;left:50%;width:34px;height:8px;margin-left:-17px;border-radius:6px;background:#0E1116;z-index:2}.x-pfs .pfs-pw .ph-scr{height:100%;border-radius:18px;background:#fff;padding:22px 9px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}.x-pfs .pfs-pw b{font-size:10px;font-weight:600;color:#0E1116}.x-pfs .pfs-pw .ph-sub{font-size:7px;color:#98A2B3}.x-pfs .pfs-pw .ph-ring{position:relative;width:46px;height:46px;border-radius:50%;background:conic-gradient(#2F6BEA 0 68%,#E6E8EE 0);display:grid;place-items:center;margin:3px 0}.x-pfs .pfs-pw .ph-ring i{position:absolute;inset:6px;border-radius:50%;background:#fff}.x-pfs .pfs-pw .ph-ring em{position:relative;font-style:normal;font-size:9px;font-weight:600}.x-pfs .pfs-pw .ph-rows{width:100%;display:grid;gap:3px}.x-pfs .pfs-pw .ph-rows span{height:5px;border-radius:3px;background:#EEF1F6}.x-pfs .pfs-pw .ph-rows span:nth-child(2){width:80%}.x-pfs .pfs-pw .ph-plan{width:100%;font-size:7px;padding:4px 6px;border:1px solid #E6E8EE;border-radius:6px;color:#475467}.x-pfs .pfs-pw .ph-plan.on{border-color:#2F6BEA;color:#2F6BEA;background:#EEF4FF}.x-pfs .pfs-pw .ph-btn{margin-top:auto;width:100%;text-align:center;font-size:8px;color:#fff;background:#0E1116;border-radius:7px;padding:5px 0}.x-pfs{max-width:none;padding:64px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-pfs .pfs-sky{max-width:860px;margin:0 auto}(root) => {
const labs = [...root.querySelectorAll('.pfs-lab')];
const phs = [...root.querySelectorAll('.pfs-row > div')];
let i = 2;
const show = (k) => { labs.forEach((l, j) => l.classList.toggle('on', j === k)); phs.forEach((p, j) => p.classList.toggle('on', j === k)); };
show(i);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const id = reduce ? 0 : setInterval(() => { i = (i + 1) % 3; show(i); }, 1800);
const onEnter = (e) => { const k = phs.indexOf(e.currentTarget); if (k > -1) { i = k; show(k); } };
phs.forEach(p => p.addEventListener('mouseenter', onEnter));
return () => { clearInterval(id); phs.forEach(p => p.removeEventListener('mouseenter', onEnter)); };
}订阅 Builder 查看完整源码。查看价格