Paywall Flow Strip
Overview
Three phones show a welcome screen, a question screen and a paywall in turn, with step tags joined by arrows above. The current step rotates on its own and lifts its phone slightly; hover to pick one. Good for explaining onboarding flows and paywall design.
Taken from the page template Chengbang App Market Intelligence 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 Paywall Flow Strip to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
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 paywall-flow-strip
mcp › Use 8pt MCP to call get_component("paywall-flow-strip")
Code
Source for Paywall Flow Strip. Motion uses only transform and opacity and respects the Reduce motion setting.
<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)); };
}Subscribe to Builder to see the full source.See pricing