Fading Quote Wall
介绍
三列瀑布流的短评卡片墙，进入视口时卡片依次上浮出现，底部整体渐隐收尾；每张卡片带引号图标、头像与昵称，悬停轻微上浮。窄屏改为两列或单列。
拆自整页模板 澄榜 应用市场情报首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Fading Quote Wall 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add fading-quote-wall
mcp › 使用 8pt MCP 调用 get_component("fading-quote-wall")
代码
Fading Quote Wall 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-fqw"><div class="fqw-grid"><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“界面很顺手，接下来去试试 MCP 接入。”</blockquote><figcaption><img src="https://8pt.dev/api/media/3c5b1ba97e378a68f73c6a0d.webp" alt="">阿树</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“结构清楚，一眼就知道先看哪里。”</blockquote><figcaption><img src="https://8pt.dev/api/media/ada51831aaede86498f15296.webp" alt="">小满</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“这个真的值。”</blockquote><figcaption><img src="https://8pt.dev/api/media/a9194fb286237f5ecb1fa142.webp" alt="">南风</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“点子很妙，恭喜上线！”</blockquote><figcaption><img src="https://8pt.dev/api/media/590b44e37d3a08a2c3e7461b.webp" alt="">鹿鸣</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“我能分享给做应用的朋友吗？”</blockquote><figcaption><img src="https://8pt.dev/api/media/3c5b1ba97e378a68f73c6a0d.webp" alt="">七月</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“终于不用自己拉表格了。”</blockquote><figcaption><img src="https://8pt.dev/api/media/ada51831aaede86498f15296.webp" alt="">青禾</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“干得漂亮。”</blockquote><figcaption><img src="https://8pt.dev/api/media/a9194fb286237f5ecb1fa142.webp" alt="">木子</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“太强了。”</blockquote><figcaption><img src="https://8pt.dev/api/media/590b44e37d3a08a2c3e7461b.webp" alt="">西西</figcaption></figure><figure class="fqw-c"><svg class="fqw-q" viewBox="0 0 24 24" fill="currentColor"><path d="M7 7h4v4c0 3-1.5 5-4 6l-.8-1.4C7.6 14.8 8.2 13.6 8.3 12H7zm7 0h4v4c0 3-1.5 5-4 6l-.8-1.4c1.4-.8 2-2 2.1-3.6H14z"/></svg><blockquote>“第一次知道竞品是怎么收费的。”</blockquote><figcaption><img src="https://8pt.dev/api/media/3c5b1ba97e378a68f73c6a0d.webp" alt="">远山</figcaption></figure></div></div>
.x-fqw{--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-fqw,.x-fqw *{box-sizing:border-box}.x-fqw a{color:inherit;text-decoration:none}.x-fqw button{font:inherit;cursor:pointer}.x-fqw{width:100%;max-width:1120px;margin:0 auto;text-align:left}.x-fqw .fqw-grid{columns:3;column-gap:16px;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}.x-fqw .fqw-c{position:relative;break-inside:avoid;margin:0 0 16px;background:#fff;border-radius:16px;padding:18px 18px 16px;box-shadow:0 10px 30px -18px rgba(20,50,110,.45);opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}.x-fqw .fqw-c.in{opacity:1;transform:none}.x-fqw .fqw-c:hover{transform:translateY(-3px)}.x-fqw .fqw-q{position:absolute;right:16px;top:16px;width:18px;height:18px;color:#C7D2E4}.x-fqw blockquote{margin:0 26px 14px 0;font-size:14px;line-height:1.65;color:#1D2939}.x-fqw figcaption{display:flex;align-items:center;gap:8px;font-size:12px;color:#667085}.x-fqw figcaption img{width:24px;height:24px;border-radius:50%;object-fit:cover}@media (max-width:900px){.x-fqw .fqw-grid{columns:2}}@media (max-width:560px){.x-fqw .fqw-grid{columns:1}.x-fqw .fqw-c:nth-child(n+6){display:none}}@media (prefers-reduced-motion:reduce){.x-fqw .fqw-c{opacity:1;transform:none;transition:none}}.x-fqw{max-width:none;padding:56px 4%;background-image:radial-gradient(rgba(255,255,255,.25) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}(root) => {
const cards = [...root.querySelectorAll('.fqw-c')];
const timers = [];
const reveal = () => cards.forEach((c, i) => timers.push(setTimeout(() => c.classList.add('in'), i * 90)));
let io;
if ('IntersectionObserver' in window) {
io = new IntersectionObserver((es) => { if (es.some(e => e.isIntersecting)) { reveal(); io.disconnect(); } }, { threshold: 0.1 });
io.observe(root);
} else reveal();
return () => { timers.forEach(clearTimeout); if (io) io.disconnect(); };
}订阅 Builder 查看完整源码。查看价格