Director Art Cards
介绍
四张纯 CSS 画出来的功能卡，一大一小交错排布：闪烁星空配虚线节点、橙色沙丘地平线、划过夜空的彗星、跳动的声波和呼吸光点。不用任何图片，适合放在「功能详解」区。
拆自整页模板 燃帧 AI 视频创作首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Director Art Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add director-art-cards
mcp › 使用 8pt MCP 调用 get_component("director-art-cards")
代码
Director Art Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-rzd"><div class="x-rzd__in" style="width:1000px;height:620px"> <article class="x-rzd__c d1"><span class="x-rzd__st"></span><div class="x-rzd__nd"><i></i><svg viewBox="0 0 80 14" preserveAspectRatio="none" aria-hidden="true"><path d="M0 7 C20 0 20 14 40 7 S60 0 80 7"/></svg><i></i></div><h4>一条连贯的工作流</h4><p>故事、分镜、角色、节奏、配音和字幕，边做边搭好。</p></article> <article class="x-rzd__c d2"><span class="x-rzd__du"></span><h4>每个角色和场景<br>都保持一致</h4><p>人物始终认得出来，场景与品牌元素跨集统一。</p></article> <article class="x-rzd__c d3"><span class="x-rzd__st"></span><span class="x-rzd__cm"></span><h4>字幕和声音<br>一样好看</h4><p>对白自动变成精致字幕，每一句都能单独调样式。</p></article> <article class="x-rzd__c d4"><h4>在多轨时间线上精修每个细节</h4><p>追镜头、收紧特写、调整光线和焦点。</p><div class="x-rzd__wv" aria-hidden="true"><i style="--h:10px;--dl:-0.00s"></i><i style="--h:18px;--dl:-0.13s"></i><i style="--h:26px;--dl:-0.26s"></i><i style="--h:14px;--dl:-0.39s"></i><i style="--h:34px;--dl:-0.52s"></i><i style="--h:22px;--dl:-0.65s"></i><i style="--h:40px;--dl:-0.78s"></i><i style="--h:16px;--dl:-0.91s"></i><i style="--h:30px;--dl:-1.04s"></i><i style="--h:12px;--dl:-1.17s"></i><i style="--h:24px;--dl:-1.30s"></i><i style="--h:36px;--dl:-1.43s"></i><i style="--h:18px;--dl:-1.56s"></i><i style="--h:28px;--dl:-1.69s"></i><i style="--h:10px;--dl:-1.82s"></i><i style="--h:32px;--dl:-1.95s"></i><i style="--h:20px;--dl:-2.08s"></i><i style="--h:14px;--dl:-2.21s"></i><i style="--h:26px;--dl:-2.34s"></i><i style="--h:38px;--dl:-2.47s"></i></div><span class="x-rzd__dot"></span></article> </div></div>
.x-rzd{position:relative;flex:none}
.x-rzd__in{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:1fr 1fr;gap:20px;font-family:var(--d-font,system-ui,sans-serif);color:#fff}
.x-rzd__c{position:relative;display:flex;flex-direction:column;justify-content:center;padding:34px 38px;border-radius:24px;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.x-rzd__c h4{margin:0;font-size:25px;font-weight:500;line-height:1.25}.x-rzd__c p{margin:10px 0 0;max-width:420px;font-size:14px;color:#cfc9cc}
.x-rzd__c.d1{grid-column:span 3;background:radial-gradient(120% 80% at 60% 40%,rgba(130,90,170,.35),transparent 60%),#07060b}
.x-rzd__c.d2{grid-column:span 2;background:radial-gradient(120% 50% at 50% 100%,#c2450f,transparent 60%),linear-gradient(180deg,#050303,#250b03)}
.x-rzd__c.d3{grid-column:span 2;background:linear-gradient(160deg,#0c1630,#1d2647 50%,#4b3420)}
.x-rzd__c.d4{grid-column:span 3;background:radial-gradient(100% 70% at 30% 100%,#a3360b,transparent 65%),#050303}
.x-rzd__st{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#ddd,transparent),radial-gradient(1.5px 1.5px at 55% 30%,#fff,transparent),radial-gradient(1px 1px at 75% 60%,#eee,transparent),radial-gradient(1px 1px at 90% 15%,#fff,transparent),radial-gradient(1px 1px at 42% 88%,#ccc,transparent);background-size:200px 150px;opacity:.75;animation:x-rzd-tw 6s ease-in-out infinite alternate}
@keyframes x-rzd-tw{to{opacity:.3}}
.x-rzd__nd{display:flex;align-items:center;width:112px;margin-bottom:18px}
.x-rzd__nd i{flex:none;width:13px;height:13px;border-radius:50%;background:#fff}
…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 查看完整源码。查看价格