Media Bento Grid
介绍
六宫格的能力便当布局：一张横跨两列的大图、一张跨两行的竖图，下面两小两宽。每张卡是满版画面加底部渐暗，悬停时画面缓慢放大、标题后的箭头前移。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Media Bento Grid 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add media-bento-grid
mcp › 使用 8pt MCP 调用 get_component("media-bento-grid")
代码
Media Bento Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzb"><div class="x-rzb__in" style="width:1000px;height:640px"><a class="x-rzb__c b1" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-product.webp)"></i><b>4K 级画面 <span>›</span></b><small>光线真实、细节清晰，文字也能准确呈现。</small></a><a class="x-rzb__c b2" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/h2.webp)"></i><b>可复用素材 <span>›</span></b><small>同一款产品、同一个场景和风格，在每条视频里保持一致。</small></a><a class="x-rzb__c b3" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/c2.webp)"></i><b>电影级运镜 <span>›</span></b><small>真实的动作、节奏和流畅的机位运动。</small></a><a class="x-rzb__c b4" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/h6.webp)"></i><b>逼真角色 <span>›</span></b><small>表情、声音和神态都自然。</small></a><a class="x-rzb__c b5" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/h8.webp)"></i><b>音乐、对白与音效 <span>›</span></b><small>用声音塑造每一场戏。</small></a><a class="x-rzb__c b6" href="#"><i style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/s4.webp)"></i><b>无限风格 <span>›</span></b><small>从超写实到动画，总有适合你的样子。</small></a></div></div>
.x-rzb{position:relative;flex:none}
.x-rzb__in{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:14px;font-family:var(--d-font,system-ui,sans-serif)}
.x-rzb__c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;border-radius:18px;overflow:hidden;isolation:isolate;background:#111;color:#fff;text-decoration:none}
.x-rzb__c>i{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.x-rzb__c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.85))}
.x-rzb__c b{font-size:18px;font-weight:700}.x-rzb__c b span{display:inline-block;color:#FF8A3D;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.x-rzb__c small{margin-top:4px;font-size:13px;color:#cfc9cc}
.x-rzb__c:hover>i,.x-rzb__c:focus-visible>i{transform:scale(1.06)}.x-rzb__c:hover b span,.x-rzb__c:focus-visible b span{transform:translateX(4px)}
.x-rzb__c:focus-visible{outline:2px solid #FF8A3D;outline-offset:2px}
.x-rzb__c.b1{grid-column:span 4}.x-rzb__c.b2{grid-column:span 2;grid-row:span 2}.x-rzb__c.b3,.x-rzb__c.b4{grid-column:span 2}.x-rzb__c.b5,.x-rzb__c.b6{grid-column:span 3}
@media (prefers-reduced-motion:reduce){.x-rzb__c>i,.x-rzb__c b span{transition:none}}const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格