Auto Tab Showcase
Overview
A full-bleed background image with a capability list on the left. The active item shows an orange play triangle and a one-line description; when the progress bar fills it moves to the next item while the background crossfades and slowly zooms in. Click any item to jump; it pauses off-screen.
Taken from the page template Ranzhen AI Video Studio 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 Auto Tab Showcase to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
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 auto-tab-showcase
mcp › Use 8pt MCP to call get_component("auto-tab-showcase")
Code
Source for Auto Tab Showcase. Motion uses only transform and opacity and respects the Reduce motion setting.
<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">What you<span>can make</span></h3> <div class="x-rzt__l" role="tablist" aria-label="Work type"><button type="button" role="tab" aria-selected="true"><b>Recast</b><small>Swap out anyone, anything</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>Product short</b><small>Great for launches and eye-catching promos</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>Ad creative</b><small>Converts, and never looks like everyone else</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>Cinematic storytelling</b><small>Hooks you fast, stays with you</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>Social content</b><small>Stops the scroll</small><i></i></button><button type="button" role="tab" aria-selected="false"><b>Brand film</b><small>Cleaner, more cinematic texture</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();
…Subscribe to Builder to see the full source.See pricing