Auto Tab Showcase
介绍
整屏背景大图配左侧能力列表：当前项前面亮起橙色播放三角、展开一句说明，底部进度条走满就自动切到下一项，背景交叉淡入并缓慢推近。点任意一项立即切换，离开视口暂停。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Auto Tab Showcase 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add auto-tab-showcase
mcp › 使用 8pt MCP 调用 get_component("auto-tab-showcase")
代码
Auto Tab Showcase 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzt"><div class="x-rzt__in" style="width:1200px;height:640px"><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-recast.webp)"></i><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-product.webp)"></i><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-ad.webp)"></i><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-story.webp)"></i><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-social.webp)"></i><i class="x-rzt__bg" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/m-brand.webp)"></i> <h3 class="x-rzt__h">你能<span>做出什么</span></h3> <div class="x-rzt__l" role="tablist" aria-label="作品类型"><button type="button" role="tab" aria-selected="true"><b>换角重演</b><small>把任何人、任何东西换掉</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>产品短片</b><small>适合新品发布和吸睛的促销</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>广告创意</b><small>有转化力，绝不千篇一律</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>电影叙事</b><small>开场抓人，余味很长</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>社媒内容</b><small>让人忍不住停下滑动</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>品牌影片</b><small>更干净、更有电影感的质感</small><i></i></button></div> </div></div>
.x-rzt{position:relative;flex:none}
.x-rzt__in{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:20px;background:#000;font-family:var(--d-font,system-ui,sans-serif);color:#fff}
.x-rzt__bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.06);transition:opacity .9s,transform 6s linear}
.x-rzt__bg.on{opacity:1;transform:scale(1)}
.x-rzt__in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.25) 55%,transparent),linear-gradient(180deg,rgba(0,0,0,.6),transparent 22%)}
.x-rzt__h{position:absolute;left:0;right:0;top:34px;z-index:2;margin:0;text-align:center;font-size:44px;font-weight:200;letter-spacing:.14em}
.x-rzt__h span{color:#FF5A1F}
.x-rzt__l{position:absolute;left:56px;bottom:48px;z-index:2;width:560px}
.x-rzt__l button{position:relative;display:block;width:100%;padding:14px 0 14px 54px;border:0;border-top:1px solid rgba(255,255,255,.14);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.x-rzt__l button:first-child{border-top:0}
.x-rzt__l b{display:block;font-size:30px;font-weight:300;letter-spacing:.06em;color:rgba(255,255,255,.5);transition:color .3s}
.x-rzt__l small{display:block;max-height:0;overflow:hidden;font-size:15px;color:#eee;transition:max-height .5s cubic-bezier(.16,1,.3,1),margin .4s}
…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 查看完整源码。查看价格