Fading Quote Wall
Overview
A three-column masonry wall of short review cards: cards rise in one by one on entering the viewport and the wall fades out at the bottom. Each card has a quote icon, avatar and name, and lifts slightly on hover. Two columns or one on narrow screens.
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 Fading Quote Wall 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 fading-quote-wall
mcp › Use 8pt MCP to call get_component("fading-quote-wall")
Code
Source for Fading Quote Wall. Motion uses only transform and opacity and respects the Reduce motion setting.
<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(); };
}Subscribe to Builder to see the full source.See pricing