Masonry Review Wall
介绍
四列瀑布流的用户短评墙：头像、昵称带蓝色认证徽章和身份标签，卡片进入视口时依次上浮出现，底部整体渐隐收尾，悬停卡片泛起紫色阴影；窄屏逐级降为三列、两列、单列。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Masonry Review Wall 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add masonry-review-wall
mcp › 使用 8pt MCP 调用 get_component("masonry-review-wall")
代码
Masonry Review Wall 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-mtw"><div class="mtw-cols"><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/6d997f2600a7576bfd84a10d.webp" alt=""><span><b>林一 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>独立开发者</small></span></figcaption><blockquote>看起来很棒，以后说不定能和我手上的项目打通，持续关注。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/7dc5926176d4c7788ac3c735.webp" alt=""><span><b>阿哲 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>前端工程师</small></span></figcaption><blockquote>一直不知道怎么跟 AI 描述我想要的界面，这下省事了。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/7bffbe53d93401f79120f082.webp" alt=""><span><b>苏禾 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>产品设计师</small></span></figcaption><blockquote>界面干净。现在 AI 做落地页真的越来越快，从想法到像样的成品只要一会儿。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/85c1685de05892218ba6d3c1.webp" alt=""><span><b>何夕 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>创业者</small></span></figcaption><blockquote>少花时间抠设计，多花时间上线。很喜欢这个方向。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/2404c9ac242003cf1eb790be.webp" alt=""><span><b>乔木 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>全栈开发</small></span></figcaption><blockquote>很有意思也很实用，已收藏并注册。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/2d0a132d491f9ae6656663bc.webp" alt=""><span><b>小鹿 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>独立开发者</small></span></figcaption><blockquote>这个工具太有用了，做得好。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/41368e4f27b7f52b695c4169.webp" alt=""><span><b>陈默 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>设计工程师</small></span></figcaption><blockquote>生成的网站总显得千篇一律，是因为缺好的参考。这个库正好补上。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/44b4dbd994e1459d22842378.webp" alt=""><span><b>一苇 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>学生</small></span></figcaption><blockquote>用了两天，提示词换到不同项目里也很稳。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/429d2952f66f7d5b097bcc44.webp" alt=""><span><b>南星 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>自由职业者</small></span></figcaption><blockquote>设计是最难的部分，谢谢你们。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/6d997f2600a7576bfd84a10d.webp" alt=""><span><b>木木 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>开发者</small></span></figcaption><blockquote>挺好的合集，准备试试。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/7dc5926176d4c7788ac3c735.webp" alt=""><span><b>冬青 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>产品经理</small></span></figcaption><blockquote>有了现成的设计和提示词，一天就能把项目搭起来。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/7bffbe53d93401f79120f082.webp" alt=""><span><b>Kai <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>工程师</small></span></figcaption><blockquote>这真的是给开发者的宝藏。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/85c1685de05892218ba6d3c1.webp" alt=""><span><b>岩岩 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>设计师</small></span></figcaption><blockquote>可以借鉴不少视觉元素到我的产品里。</blockquote></figure><figure class="mtw-c"><figcaption><img src="https://8pt.dev/api/media/2404c9ac242003cf1eb790be.webp" alt=""><span><b>若水 <svg class="ver" viewBox="0 0 24 24" width="14" height="14"><path d="M12 2l2.4 2.2 3.2-.4.9 3.1 2.9 1.5-1 3.1 1 3.1-2.9 1.5-.9 3.1-3.2-.4L12 22l-2.4-2.2-3.2.4-.9-3.1-2.9-1.5 1-3.1-1-3.1 2.9-1.5.9-3.1 3.2.4z" fill="#3B82F6"/><path d="M8.5 12.2l2.3 2.3 4.7-4.8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></b><small>独立开发者</small></span></figcaption><blockquote>刚看了网站，已经注册了。</blockquote></figure></div></div>
.x-mtw{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-mtw,.x-mtw *{box-sizing:border-box}.x-mtw a{color:inherit;text-decoration:none}.x-mtw button{font:inherit;cursor:pointer}.x-mtw{width:100%;max-width:1120px;margin:0 auto;color:var(--ink)}.x-mtw .mtw-cols{columns:4;column-gap:16px;max-height:760px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent)}.x-mtw .mtw-c{break-inside:avoid;margin:0 0 16px;background:#fff;border:1px solid #EDEDF0;border-radius:14px;padding:14px;box-shadow:0 4px 14px -10px rgba(16,16,24,.25);opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease,box-shadow .3s}.x-mtw .mtw-c.in{opacity:1;transform:none}.x-mtw .mtw-c:hover{box-shadow:0 14px 30px -16px rgba(124,58,237,.4)}.x-mtw figcaption{display:flex;align-items:center;gap:10px}.x-mtw figcaption img{width:36px;height:36px;border-radius:50%;object-fit:cover}.x-mtw figcaption span{display:flex;flex-direction:column}.x-mtw figcaption b{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700}.x-mtw figcaption small{font-size:11px;color:#8A8A94}.x-mtw blockquote{margin:12px 0 0;font-size:13px;line-height:1.7;color:#27272A}@media (max-width:1000px){.x-mtw .mtw-cols{columns:3}}@media (max-width:700px){.x-mtw .mtw-cols{columns:2}}@media (max-width:480px){.x-mtw .mtw-cols{columns:1;max-height:640px}}@media (prefers-reduced-motion:reduce){.x-mtw .mtw-c{opacity:1;transform:none;transition:none}}.x-mtw{max-width:none;padding:56px 5%;background-image:radial-gradient(rgba(16,16,24,.1) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-mtw{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const cards = [...root.querySelectorAll('.mtw-c')]; const timers = [];
const go = () => cards.forEach((c, i) => timers.push(setTimeout(() => c.classList.add('in'), i * 60)));
let io;
if ('IntersectionObserver' in window) { io = new IntersectionObserver(es => { if (es.some(e => e.isIntersecting)) { go(); io.disconnect(); } }, { threshold: 0.05 }); io.observe(root); } else go();
return () => { timers.forEach(clearTimeout); if (io) io.disconnect(); };
}订阅 Builder 查看完整源码。查看价格