atris 3.22.0 → 3.24.0

package/atris.md

@@ -67,7 +67,7 @@ What you ship should not read as generated. The test: if someone said "an AI mad
 - **Refuse the wells** (named so you can): purple/indigo gradients, gradient-filled text, glassmorphism, Inter/Roboto defaults, claude-beige, neon-on-dark, hero-metric rows, identical card grids, eyebrow/tracked-caps labels, pulsing live-dots, em dashes.
 - **Commit to constraints.** One distinctive font, one accent hue, a small spacing scale. Taste is subtraction, not addition.
 - **Generate it right.** `atris deck` (slides), `atris deck from <doc.md> --html` (a web page from a plain doc, in the web app's design tokens), `atris site <dir>` (a whole markdown folder into a navigable site), and `atris recap --html` (a memory-updates page) all apply the system by default: own backgrounds and fonts, never the tool's stock template. Output as an AppBlock with `--block` to drop into a web app.
-- **Compound it.** A new tell becomes a project rule in `.atris/slop.rules.json` (`atris slop rules --add`), and a project's brand lives in `.atris/theme.json` (`atris theme create` builds your own by feel, or `atris theme init` scaffolds one) so every deck, page, and site is on-brand by default. The gate and the look grow per project instead of leaning on memory. Taste lives in code, not vibes.
+- **Compound it.** A new tell becomes a project rule in `.atris/slop.rules.json` (`atris slop rules --add`), and a project's brand lives in `.atris/theme.json` (`atris theme create` builds your own by feel, or `atris theme init` scaffolds one) so every deck, page, and site is on-brand by default, and one line of text becomes an on-brand image with `atris card` or a short video with `atris reel`. The gate and the look grow per project instead of leaning on memory. Taste lives in code, not vibes.
 
 ## voice
 

package/bin/atris.js

@@ -365,6 +365,8 @@ function showHelp() {
   console.log('  deck       - Generate a premium Google Slides deck from a content spec');
   console.log('  site       - Build a beautiful static site from a folder of markdown');
   console.log('  theme      - Brand themes: "theme create" builds your own by feel (deck/html/site)');
+  console.log('  card       - One line of text into an on-brand image (uses your theme)');
+  console.log('  reel       - One line of text into a short on-brand video (animated card)');
   console.log('  run        - Auto-chain plan→do→review (autonomous loop, auto-pushes)');
   console.log('  run logs   - Browse glass run logs (phase reasoning persisted to disk)');
   console.log('  run search - Search phase reasoning across all run logs');
@@ -830,7 +832,7 @@ if (command === '2' && ['fast', 'pro'].includes(String(firstCommandArg || '').to
 const knownCommands = ['init', 'log', 'now', 'radar', 'ctop', 'status', 'analytics', 'visualize', 'brain', 'brainstorm', 'autopilot', 'run', 'plan', 'do', 'review', 'release',
                        'activate', '_activate', 'agent', 'chat', 'fast', 'ax', 'console', 'serve', 'login', 'logout', 'whoami', 'switch', 'use', 'accounts', '_resolve', '_profile-email', '_switch-session', 'shell-init', 'update', 'upgrade', 'version', 'help', 'next', 'atris',
                        'clean', 'verify', 'search', 'skill', 'member', 'codex-goal', 'app', 'apps', 'learn', 'lesson', 'plugin', 'experiments', 'receipt', 'proof', 'openclaw', 'pull', 'push', 'live', 'align', 'terminal', 'computer', 'diff', 'business', 'sync', 'youtube',
-                       'ingest', 'query', 'lint', 'loop', 'pulse', 'task', 'mission', 'probe', 'worktree', 'aeo', 'slop', 'deck', 'site', 'theme', 'improve', 'xp', 'play', 'gm', 'x', 'recap',
+                       'ingest', 'query', 'lint', 'loop', 'pulse', 'task', 'mission', 'probe', 'worktree', 'aeo', 'slop', 'deck', 'site', 'theme', 'card', 'reel', 'improve', 'xp', 'play', 'gm', 'x', 'recap',
                        'gmail', 'calendar', 'twitter', 'slack', 'imessage', 'integrations', 'setup', 'clean-workspace', 'cw',
                        'fork', 'browse', 'publish', 'sleep', 'wake', 'feedback', 'errors', 'wiki', 'code-review', 'cr', 'soul', 'fleet', 'compile', 'spaceship'];
 
@@ -1364,6 +1366,16 @@ if (command === 'init') {
   Promise.resolve(require('../commands/theme').run(process.argv.slice(3)))
     .then((code) => process.exit(typeof code === 'number' ? code : 0))
     .catch((err) => { console.error(`\n✗ Error: ${err.message || err}`); process.exit(1); });
+} else if (command === 'card') {
+  // Card: one line of text into an on-brand image (uses your theme + the design system).
+  Promise.resolve(require('../commands/card').run(process.argv.slice(3)))
+    .then((code) => process.exit(typeof code === 'number' ? code : 0))
+    .catch((err) => { console.error(`\n✗ Error: ${err.message || err}`); process.exit(1); });
+} else if (command === 'reel') {
+  // Reel: one line of text into a short on-brand video (an animated card; frames via Chrome + ffmpeg).
+  Promise.resolve(require('../commands/reel').run(process.argv.slice(3)))
+    .then((code) => process.exit(typeof code === 'number' ? code : 0))
+    .catch((err) => { console.error(`\n✗ Error: ${err.message || err}`); process.exit(1); });
 } else if (command === 'aeo') {
   // AEO: AI Engine Optimization — credit-metered citation drafting against the customer workspace.
   Promise.resolve(require('../commands/aeo').run(process.argv.slice(3)))

package/commands/card.js

@@ -0,0 +1,121 @@
+// atris card — one line of text -> a beautiful, on-brand image (your theme).
+//
+//   atris card "Ship faster" --kind statement --theme brand --size og
+//   atris card "It just works" --kind quote --by "a happy user"
+//   atris card --kind stat --number "10x" --label "faster reviews"
+//
+// Writes an .html (always) and a .png (when headless Chrome is available).
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const { execFileSync, spawnSync } = require('child_process');
+const { buildCard, SIZES, KINDS } = require('../lib/card');
+
+function parseFlags(argv) {
+  const flags = {}; const pos = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--html-only') { flags.htmlOnly = true; continue; }
+    if (a.startsWith('--')) {
+      const key = a.slice(2);
+      const next = argv[i + 1];
+      if (next != null && !next.startsWith('--')) { flags[key] = next; i++; } else flags[key] = true;
+      continue;
+    }
+    pos.push(a);
+  }
+  return { flags, pos };
+}
+
+// find an installed Chrome/Chromium without adding a dependency
+function findChrome() {
+  if (process.env.CHROME_PATH && fs.existsSync(process.env.CHROME_PATH)) return process.env.CHROME_PATH;
+  const macApps = [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+  ];
+  for (const p of macApps) if (fs.existsSync(p)) return p;
+  for (const name of ['google-chrome', 'google-chrome-stable', 'chromium', 'chromium-browser', 'chrome']) {
+    const r = spawnSync('command', ['-v', name], { shell: true, encoding: 'utf8' });
+    if (r.status === 0 && r.stdout.trim()) return r.stdout.trim();
+  }
+  return null;
+}
+
+function renderPng(chrome, html, width, height, outPng) {
+  const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'atris-card-'));
+  const htmlFile = path.join(tmp, 'card.html');
+  fs.writeFileSync(htmlFile, html);
+  const args = [
+    '--headless=new', '--disable-gpu', '--hide-scrollbars',
+    '--force-device-scale-factor=2',
+    `--window-size=${width},${height}`,
+    '--virtual-time-budget=4000',
+    `--screenshot=${outPng}`,
+    `file://${htmlFile}`,
+  ];
+  execFileSync(chrome, args, { stdio: 'ignore', timeout: 60000 });
+  return fs.existsSync(outPng);
+}
+
+function run(argv) {
+  const { flags, pos } = parseFlags(argv);
+
+  if (pos[0] === 'help' || flags.help) {
+    console.log(`\n  atris card — one line of text into an on-brand image\n
+  atris card "Your headline" [--kind statement|quote|stat] [--theme <name>] [--size og|wide|square|story]
+  flags: --sub --kicker --by --number --label --brand --version --out <file.png> --html-only\n
+  examples:
+    atris card "Design that builds itself" --kicker "Atris v3.23.0" --theme brand
+    atris card "It just works." --kind quote --by "a founder" --size square
+    atris card --kind stat --number "1260" --label "tests, all green"\n`);
+    return 0;
+  }
+
+  const text = pos.join(' ').trim();
+  const kind = flags.kind || 'statement';
+  if (!KINDS.includes(kind)) { console.error(`  unknown kind "${kind}". try: ${KINDS.join(', ')}`); return 2; }
+  if (flags.size && !SIZES[flags.size]) { console.error(`  unknown size "${flags.size}". try: ${Object.keys(SIZES).join(', ')}`); return 2; }
+  if (kind === 'stat' && !flags.number && !text) { console.error('  stat cards need --number (e.g. --number "10x")'); return 2; }
+  if (kind !== 'stat' && !text) { console.error('  give the card some text: atris card "Your headline"'); return 2; }
+
+  const spec = {
+    kind, text, headline: text,
+    theme: flags.theme, size: flags.size,
+    sub: flags.sub, kicker: flags.kicker, by: flags.by,
+    number: flags.number, label: flags.label,
+    brand: flags.brand, version: flags.version,
+  };
+
+  let card;
+  try { card = buildCard(spec); }
+  catch (e) { console.error(`  could not build card: ${e.message}`); return 1; }
+
+  const base = (flags.out ? String(flags.out).replace(/\.png$/i, '') : `card-${kind}-${card.theme}-${card.size}`);
+  const outPng = path.resolve(`${base}.png`);
+  const outHtml = path.resolve(`${base}.html`);
+  fs.writeFileSync(outHtml, card.html);
+
+  if (flags.htmlOnly) {
+    console.log(`\n  ✓ ${card.kind} card (${card.width}x${card.height}, theme ${card.theme})\n    html: ${outHtml}\n    open it, or render a png with Chrome installed.\n`);
+    return 0;
+  }
+
+  const chrome = findChrome();
+  if (!chrome) {
+    console.log(`\n  ✓ wrote html: ${outHtml}\n    no Chrome found for png. open the html, or set CHROME_PATH and re-run.\n`);
+    return 0;
+  }
+  try {
+    renderPng(chrome, card.html, card.width, card.height, outPng);
+    console.log(`\n  ✓ ${card.kind} card, ${card.width}x${card.height}, theme ${card.theme}\n    ${outPng}\n`);
+    return 0;
+  } catch (e) {
+    console.log(`\n  ! png render failed (${e.message.split('\n')[0]})\n    html is ready: ${outHtml}\n`);
+    return 0;
+  }
+}
+
+module.exports = { run };

package/commands/reel.js

@@ -0,0 +1,128 @@
+// atris reel — one line of text into a short, on-brand video (an animated card).
+//
+//   atris reel "Ship faster" --theme brand --size square
+//   atris reel "It just works." --kind quote --by "a founder" --seconds 3
+//
+// Renders frames with headless Chrome (the same one `atris card` uses) and encodes
+// with ffmpeg. No new dependency. Falls back to a card image if either is missing.
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const { execFile, spawnSync } = require('child_process');
+const { promisify } = require('util');
+const pexec = promisify(execFile);
+const { buildReelFrame, reelFrames } = require('../lib/reel');
+const { SIZES, KINDS } = require('../lib/card');
+
+function parseFlags(argv) {
+  const flags = {}; const pos = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith('--')) {
+      const key = a.slice(2); const next = argv[i + 1];
+      if (next != null && !next.startsWith('--')) { flags[key] = next; i++; } else flags[key] = true;
+      continue;
+    }
+    pos.push(a);
+  }
+  return { flags, pos };
+}
+
+function findBin(macApps, names) {
+  for (const p of macApps) if (fs.existsSync(p)) return p;
+  for (const name of names) {
+    const r = spawnSync('command', ['-v', name], { shell: true, encoding: 'utf8' });
+    if (r.status === 0 && r.stdout.trim()) return r.stdout.trim();
+  }
+  return null;
+}
+const findChrome = () => (process.env.CHROME_PATH && fs.existsSync(process.env.CHROME_PATH))
+  ? process.env.CHROME_PATH
+  : findBin([
+      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+      '/Applications/Chromium.app/Contents/MacOS/Chromium',
+      '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+    ], ['google-chrome', 'google-chrome-stable', 'chromium', 'chromium-browser', 'chrome']);
+const findFfmpeg = () => findBin(['/opt/homebrew/bin/ffmpeg', '/usr/local/bin/ffmpeg', '/usr/bin/ffmpeg'], ['ffmpeg']);
+
+async function renderFrames(chrome, ts, spec, dir, w, h, onDone) {
+  const pad = (i) => String(i).padStart(4, '0');
+  let idx = 0; let done = 0;
+  async function worker() {
+    while (idx < ts.length) {
+      const i = idx++;
+      const { html } = buildReelFrame(spec, ts[i]);
+      const hf = path.join(dir, `f-${pad(i)}.html`);
+      const pf = path.join(dir, `f-${pad(i)}.png`);
+      fs.writeFileSync(hf, html);
+      await pexec(chrome, [
+        '--headless=new', '--disable-gpu', '--hide-scrollbars', '--force-device-scale-factor=1',
+        `--window-size=${w},${h}`, '--virtual-time-budget=2200',
+        `--user-data-dir=${path.join(dir, 'ud-' + i)}`,
+        `--screenshot=${pf}`, `file://${hf}`,
+      ], { timeout: 60000 });
+      onDone && onDone(++done, ts.length);
+    }
+  }
+  const conc = Math.min(5, ts.length);
+  await Promise.all(Array.from({ length: conc }, worker));
+}
+
+async function run(argv) {
+  const { flags, pos } = parseFlags(argv);
+  if (pos[0] === 'help' || flags.help) {
+    console.log(`\n  atris reel — one line of text into a short on-brand video\n
+  atris reel "Your headline" [--kind statement|quote|stat] [--theme <name>] [--size square|og|wide|story] [--seconds 2.6]
+  flags: --sub --kicker --by --number --label --brand --version --out <file.mp4>\n`);
+    return 0;
+  }
+
+  const text = pos.join(' ').trim();
+  const kind = flags.kind || 'statement';
+  if (!KINDS.includes(kind)) { console.error(`  unknown kind "${kind}". try: ${KINDS.join(', ')}`); return 2; }
+  const size = flags.size || 'square';
+  if (!SIZES[size]) { console.error(`  unknown size "${size}". try: ${Object.keys(SIZES).join(', ')}`); return 2; }
+  if (kind === 'stat' && !flags.number && !text) { console.error('  stat reels need --number'); return 2; }
+  if (kind !== 'stat' && !text) { console.error('  give the reel some text: atris reel "Your headline"'); return 2; }
+
+  const seconds = Math.max(1, Math.min(8, parseFloat(flags.seconds) || 2.6));
+  const fps = 20;
+  const spec = {
+    kind, text, headline: text, theme: flags.theme, size,
+    sub: flags.sub, kicker: flags.kicker, by: flags.by,
+    number: flags.number, label: flags.label, brand: flags.brand, version: flags.version,
+  };
+  const { w, h } = SIZES[size];
+  const base = flags.out ? String(flags.out).replace(/\.mp4$/i, '') : `reel-${kind}-${flags.theme || 'atris'}-${size}`;
+  const outMp4 = path.resolve(`${base}.mp4`);
+
+  const chrome = findChrome();
+  if (!chrome) { console.error('\n  no Chrome found to render frames. install Chrome or set CHROME_PATH.\n'); return 1; }
+  const ffmpeg = findFfmpeg();
+  if (!ffmpeg) { console.error('\n  no ffmpeg found to encode the video. install ffmpeg (brew install ffmpeg).\n'); return 1; }
+
+  const ts = reelFrames(seconds, fps);
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'atris-reel-'));
+  console.log(`\n  rendering ${ts.length} frames (${seconds}s, ${size})...`);
+  try {
+    await renderFrames(chrome, ts, spec, dir, w, h, (d, n) => {
+      if (d === n || d % 10 === 0) process.stdout.write(`\r  frames ${d}/${n}   `);
+    });
+    process.stdout.write('\n  encoding...\n');
+    await pexec(ffmpeg, [
+      '-y', '-framerate', String(fps), '-i', path.join(dir, 'f-%04d.png'),
+      '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', outMp4,
+    ]);
+  } catch (e) {
+    console.error(`\n  render failed: ${String(e.message).split('\n')[0]}`); return 1;
+  } finally {
+    try { fs.rmSync(dir, { recursive: true, force: true }); } catch {}
+  }
+
+  if (!fs.existsSync(outMp4)) { console.error('  no video produced'); return 1; }
+  console.log(`\n  ✓ ${kind} reel, ${w}x${h}, ${seconds}s, theme ${flags.theme || 'atris'}\n    ${outMp4}\n`);
+  return 0;
+}
+
+module.exports = { run, findChrome, findFfmpeg };

package/lib/card.js

@@ -0,0 +1,120 @@
+// atris card — turn one line of text into a beautiful, on-brand image.
+// Pure: spec -> self-contained HTML string. Reuses the design system: the same
+// themes as deck/site/html (incl. your .atris/theme.json brand), one accent,
+// Fraunces display, restraint. Render to PNG with headless Chrome (commands/card.js).
+//
+// Kinds: statement (kicker + headline + sub), quote (quote + attribution),
+//        stat (big number + label). Sizes: og, wide, square, story.
+
+const { mergedThemes } = require('./theme');
+const { THEMES: HTML_THEMES, rich, esc } = require('./html-render');
+
+const SIZES = {
+  og: { w: 1200, h: 630 },      // OpenGraph / link card
+  wide: { w: 1920, h: 1080 },   // slide / banner
+  square: { w: 1080, h: 1080 }, // feed
+  story: { w: 1080, h: 1920 },  // story / reel
+};
+const KINDS = ['statement', 'quote', 'stat'];
+
+const plainLen = (s) => String(s == null ? '' : s).replace(/\*\*/g, '').length;
+const clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+
+// shrink a display line so long text still fits the card
+function fit(base, text, refChars) {
+  return Math.round(base * clamp(refChars / Math.max(plainLen(text), 1), 0.5, 1));
+}
+
+function fontStack(name, fallback) {
+  return `'${String(name || fallback).replace(/'/g, '')}', '${fallback}', ${fallback === 'Fraunces' ? 'Georgia, serif' : 'system-ui, sans-serif'}`;
+}
+
+function buildCard(spec = {}, opts = {}) {
+  const size = SIZES[spec.size] || SIZES.og;
+  const themes = opts.themes || mergedThemes(HTML_THEMES, opts.root || process.cwd());
+  const theme = themes[spec.theme] || HTML_THEMES.atris;
+  const c = theme.color;
+  const f = theme.fonts || {};
+  const kind = KINDS.includes(spec.kind) ? spec.kind : 'statement';
+  const u = Math.min(size.w, size.h);
+
+  const pad = Math.round(u * 0.088);
+  const px = {
+    kicker: Math.round(u * 0.030),
+    sub: Math.round(u * 0.040),
+    foot: Math.round(u * 0.028),
+    rule: Math.round(u * 0.010),
+    gap: Math.round(u * 0.030),
+  };
+
+  const brand = spec.brand || 'Atris';
+  const version = spec.version || '';
+  const display = fontStack(f.display, 'Fraunces');
+  const body = fontStack(f.body, 'Outfit');
+  const grotesk = "'Space Grotesk', system-ui, sans-serif";
+  const monoFont = "'IBM Plex Mono', ui-monospace, monospace";
+
+  const foot = `<div class="foot"><span class="mark">${esc(brand)}</span>${version ? `<span class="ver">${esc(version)}</span>` : ''}</div>`;
+  const kickerHtml = spec.kicker ? `<div class="kicker">${rich(spec.kicker)}</div>` : '';
+  const subHtml = spec.sub ? `<p class="sub">${rich(spec.sub)}</p>` : '';
+
+  let main = '';
+  let extraCss = '';
+  if (kind === 'quote') {
+    const text = spec.text || spec.headline || 'Your quote here';
+    const qSize = fit(Math.round(u * 0.090), text, 64);
+    main = `<div class="rule"></div>
+      <div class="qmark">&ldquo;</div>
+      <blockquote class="qtext">${rich(text)}</blockquote>
+      ${spec.by ? `<div class="by">${rich(spec.by)}</div>` : ''}`;
+    extraCss = `
+      .qmark{font-family:${display};color:${c.accent};font-size:${Math.round(u * 0.20)}px;line-height:.6;height:${Math.round(u * 0.10)}px}
+      .qtext{font-family:${display};font-weight:600;font-size:${qSize}px;line-height:1.08;letter-spacing:-1px;margin:${px.gap}px 0}
+      .by{font-family:${monoFont};font-size:${px.foot}px;color:${c.soft}}`;
+  } else if (kind === 'stat') {
+    const number = spec.number || spec.headline || '42';
+    const numSize = fit(Math.round(u * 0.34), number, 6);
+    main = `<div class="rule"></div>
+      ${kickerHtml}
+      <div class="big">${rich(number)}</div>
+      ${spec.label ? `<div class="statlabel">${rich(spec.label)}</div>` : ''}
+      ${subHtml}`;
+    extraCss = `
+      .big{font-family:${grotesk};font-weight:600;color:${c.accent};font-size:${numSize}px;line-height:.92;letter-spacing:-2px}
+      .statlabel{font-family:${display};font-weight:600;font-size:${Math.round(u * 0.058)}px;color:${c.ink};margin-top:${Math.round(px.gap * 0.5)}px}`;
+  } else {
+    const headline = spec.headline || spec.text || 'Your headline here';
+    const hSize = fit(Math.round(u * 0.135), headline, 34);
+    main = `<div class="rule"></div>
+      ${kickerHtml}
+      <h1 class="headline">${rich(headline)}</h1>
+      ${subHtml}`;
+    extraCss = `
+      .headline{font-family:${display};font-weight:600;font-size:${hSize}px;line-height:1.02;letter-spacing:-1.5px}`;
+  }
+
+  const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Outfit:wght@400;500;600&family=Space+Grotesk:wght@500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{width:${size.w}px;height:${size.h}px;overflow:hidden}
+  body{background:${c.bg};color:${c.ink};font-family:${body};-webkit-font-smoothing:antialiased}
+  .card{width:${size.w}px;height:${size.h}px;padding:${pad}px;display:flex;flex-direction:column;justify-content:center;position:relative}
+  .rule{width:${Math.round(u * 0.085)}px;height:${px.rule}px;background:${c.accent};border-radius:${px.rule}px;margin-bottom:${Math.round(px.gap * 0.9)}px}
+  .kicker{font-family:${monoFont};font-size:${px.kicker}px;letter-spacing:2px;color:${c.soft};margin-bottom:${Math.round(px.gap * 0.6)}px}
+  .sub{font-size:${px.sub}px;line-height:1.4;color:${c.soft};margin-top:${px.gap}px;max-width:88%}
+  .foot{position:absolute;left:${pad}px;right:${pad}px;bottom:${pad}px;display:flex;align-items:baseline;justify-content:space-between}
+  .mark{font-family:${display};font-weight:600;font-size:${Math.round(u * 0.034)}px}
+  .ver{font-family:${monoFont};font-size:${px.foot}px;color:${c.soft};letter-spacing:1px}
+  .accent{color:${c.accent}}
+  ${extraCss}
+</style></head>
+<body><div class="card">${main}${foot}</div></body></html>`;
+
+  return { html, width: size.w, height: size.h, kind, theme: spec.theme || 'atris', size: spec.size || 'og' };
+}
+
+module.exports = { buildCard, SIZES, KINDS };

package/lib/reel.js

@@ -0,0 +1,52 @@
+// atris reel — a card, animated. A reel is the card from lib/card.js rendered at
+// progress t in [0,1]: each element fades and rises in on a staggered schedule.
+// Pure: (spec, t) -> HTML for that single frame. commands/reel.js screenshots the
+// frames (same Chrome as card) and ffmpeg-encodes them. No new dependency.
+
+const { buildCard } = require('./card');
+
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+const easeOutCubic = (p) => 1 - Math.pow(1 - clamp01(p), 3);
+// reveal progress of an element whose window is [a,b], at global time t
+const win = (t, a, b) => easeOutCubic((t - a) / (b - a));
+
+// staggered reveal windows by element class. A kind only has some of these;
+// overriding a class that isn't present is harmless.
+const STAGGER = [
+  ['.rule', 0.00, 0.16],
+  ['.kicker', 0.10, 0.30],
+  ['.qmark', 0.10, 0.30],
+  ['.headline', 0.18, 0.46],
+  ['.qtext', 0.20, 0.50],
+  ['.big', 0.16, 0.46],
+  ['.statlabel', 0.34, 0.58],
+  ['.sub', 0.40, 0.62],
+  ['.by', 0.46, 0.66],
+  ['.foot', 0.58, 0.80],
+];
+
+// CSS that places every element at its reveal state for time t (one-shot, no loops)
+function revealCss(t, dist = 16) {
+  const tt = clamp01(t);
+  let css = '';
+  for (const [sel, a, b] of STAGGER) {
+    const p = win(tt, a, b);
+    css += `${sel}{opacity:${p.toFixed(3)};transform:translateY(${((1 - p) * dist).toFixed(2)}px)}`;
+  }
+  return css;
+}
+
+// HTML for a single reel frame at time t. Reuses the card, appends the reveal styles.
+function buildReelFrame(spec, t, opts = {}) {
+  const card = buildCard(spec, opts);
+  const overrides = `<style id="reel">${revealCss(t)}</style>`;
+  return { html: card.html.replace('</head>', `${overrides}</head>`), width: card.width, height: card.height };
+}
+
+// the list of t values for a reel of `seconds` at `fps` (>=2 frames)
+function reelFrames(seconds = 2.6, fps = 20) {
+  const n = Math.max(2, Math.round(seconds * fps));
+  return Array.from({ length: n }, (_, i) => i / (n - 1));
+}
+
+module.exports = { buildReelFrame, revealCss, reelFrames, win, STAGGER };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atris",
-  "version": "3.22.0",
+  "version": "3.24.0",
   "main": "bin/atris.js",
   "bin": {
     "atris": "bin/atris.js",