Director Art Cards
Overview
Four feature cards drawn in pure CSS, staggered large and small: a twinkling starfield with dashed nodes, an orange dune horizon, a comet crossing the night sky, a pulsing sound wave and breathing lights. No images at all; made for a feature deep-dive section.
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 Director Art Cards to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
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 director-art-cards
mcp › Use 8pt MCP to call get_component("director-art-cards")
Code
Source for Director Art Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<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>One connected workflow</h4><p>Story, storyboard, characters, pacing, voice-over and captions, built as you go.</p></article> <article class="x-rzd__c d2"><span class="x-rzd__du"></span><h4>Every character and scene<br>stays consistent</h4><p>Characters stay recognizable, and scenes and brand elements stay consistent across episodes.</p></article> <article class="x-rzd__c d3"><span class="x-rzd__st"></span><span class="x-rzd__cm"></span><h4>Captions and sound<br>look just as good</h4><p>Dialogue becomes polished captions automatically, and every line can be styled on its own.</p></article> <article class="x-rzd__c d4"><h4>Fine-tune every detail on a multi-track timeline</h4><p>Track shots, tighten close-ups, adjust light and focus.</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();
…Subscribe to Builder to see the full source.See pricing