Film Strip Carousel
介绍
上下两排橙色齿孔的胶片色带，里面是自动横向推进的 16:9 新品卡片：画面上压一行倾斜大字，悬停时卡片描出橙色光圈、标题变色并暂停播放；左右箭头到头自动隐藏。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Film Strip Carousel 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add film-strip-carousel
mcp › 使用 8pt MCP 调用 get_component("film-strip-carousel")
代码
Film Strip Carousel 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzf"><div class="x-rzf__in" style="width:900px;height:300px"> <button class="x-rzf__a p" type="button" aria-label="上一张"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></button> <div class="x-rzf__t"><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/c3.webp)"><em>绘梦 5.5</em></span><b>绘梦 5.5</b><small>连续 100 轮修改，画面始终一致</small></a><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/s3.webp)"><em>故事短片</em></span><b>故事短片</b><small>为任何平台做出高转化的故事视频</small></a><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/c7.webp)"><em>电影镜头</em></span><b>电影镜头</b><small>导演级控制，内置专业调色</small></a><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/p6.webp)"><em>动效设计</em></span><b>动效设计</b><small>让每一帧都动起来</small></a><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/h6.webp)"><em>AI 数字分身</em></span><b>AI 数字分身</b><small>创建数字人，再跟上热点</small></a><a class="x-rzf__c" href="#"><span class="x-rzf__im" style="background-image:url(https://8pt.dev/assets/tpl/ranzhen/c1.webp)"><em>重演挑战赛</em></span><b>重演挑战赛</b><small>让它火起来，看看获奖作品</small></a></div> <button class="x-rzf__a n" type="button" aria-label="下一张"><svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg></button> </div></div>
.x-rzf{position:relative;flex:none}
.x-rzf__in{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;align-items:center;padding:22px 0;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#1a0904,#3b1306 50%,#1d0904);font-family:var(--d-font,system-ui,sans-serif);color:#fff;box-sizing:border-box}
.x-rzf__in::before,.x-rzf__in::after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,rgba(255,90,31,.6) 0 13px,transparent 13px 27px)}
.x-rzf__in::before{top:6px}.x-rzf__in::after{bottom:6px}
.x-rzf__t{display:flex;gap:16px;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 20px;scroll-padding:0 20px}
.x-rzf__t::-webkit-scrollbar{display:none}
.x-rzf__c{flex:none;width:250px;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#1d0c07,#2b1008);box-shadow:0 0 0 1px rgba(255,120,60,.2);color:inherit;text-decoration:none;transition:box-shadow .3s}
.x-rzf__im{position:relative;display:block;aspect-ratio:16/9;background:center/cover no-repeat}
.x-rzf__im em{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:italic 900 26px/1 Impact,"Arial Narrow",var(--d-font,sans-serif);color:#FF5A1F;text-shadow:0 2px 0 #4a1102,0 0 18px rgba(0,0,0,.6)}
.x-rzf__c b{display:block;padding:12px 14px 0;font-size:14.5px;font-weight:600;transition:color .25s}
.x-rzf__c small{display:block;padding:2px 14px 14px;font-size:12px;color:#a9948c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-rzf__c:hover,.x-rzf__c:focus-visible{outline:0;box-shadow:0 0 0 2px #FF5A1F,0 0 26px rgba(255,90,31,.4)}.x-rzf__c:hover b,.x-rzf__c:focus-visible b{color:#FF8A3D}
…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 查看完整源码。查看价格