Masonry Review Wall
Overview
A four-column masonry wall of short reviews: avatar, name with a blue verified badge and a role tag. Cards rise in one by one as they enter the viewport, the whole wall fades out at the bottom, and hovered cards get a purple shadow. Drops to three, two, then one column on narrower screens.
Taken from the page template Lingye Design Prompt Library 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 Masonry Review 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 masonry-review-wall
mcp › Use 8pt MCP to call get_component("masonry-review-wall")
Code
Source for Masonry Review Wall. Motion uses only transform and opacity and respects the Reduce motion setting.
<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(); };
}Subscribe to Builder to see the full source.See pricing