@opendirectory.dev/skills 0.1.60 → 0.1.62

package/skills/vid-motion-graphics/references/scene-library.md

@@ -0,0 +1,504 @@
+# Scene Library — vid-motion-graphics
+
+6 scene types with complete HTML/CSS templates. Read this before generating any HTML in Step 3.
+
+Each template shows the HTML structure and required CSS classes. Apply colors and fonts from the chosen style preset (`references/style-presets.md`).
+
+---
+
+## Timing Architecture (read this first)
+
+All scene timing is driven by `window.renderFrame(t)` — a pure JS function called by Playwright once per frame. It computes `opacity`/`transform` directly from the millisecond timestamp. No CSS `@keyframes`, no `animation-delay`, no Web Animations API seeking.
+
+**Why renderFrame instead of CSS animations:**
+CSS `@keyframes` `currentTime` seeking is silently ignored for backward seeks in Chromium. A 12s animation finishes during `waitUntil: 'networkidle'` (Google Fonts CDN), so all frames capture the final state. The renderFrame approach is deterministic: same `t` → same output, always.
+
+**Scene CSS base (apply to ALL scenes):**
+```css
+.scene {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px;
+  opacity: 0;          /* start hidden — renderFrame sets opacity per frame */
+  will-change: opacity, transform;
+}
+```
+
+**renderFrame helpers (include verbatim in every HTML):**
+```javascript
+window.__videoReady = false;
+window.TOTAL_DURATION_MS = N * 1000; // total duration in ms
+
+function lerp(a, b, p) { return a + (b - a) * p; }
+function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+function easeOutCubic(t) { return 1 - Math.pow(1 - clamp(t, 0, 1), 3); }
+
+// Returns {opacity, ty} for scene window [startMs, endMs)
+function sceneState(t, startMs, endMs) {
+  if (t < startMs || t >= endMs) return { opacity: 0, ty: 0 };
+  const prog = (t - startMs) / (endMs - startMs);
+  if (prog < 0.10) {
+    const p = easeOutCubic(prog / 0.10);
+    return { opacity: p, ty: lerp(24, 0, p) };
+  }
+  if (prog < 0.85) return { opacity: 1, ty: 0 };
+  const p = (prog - 0.85) / 0.15;
+  return { opacity: 1 - p, ty: lerp(0, -12, p) };
+}
+
+function applySceneState(el, state) {
+  el.style.opacity = state.opacity;
+  el.style.transform = state.ty !== 0 ? `translateY(${state.ty.toFixed(2)}px)` : '';
+}
+
+window.renderFrame = function(t) {
+  // Scene 1: 0ms → scene1DurMs
+  applySceneState(document.querySelector('.scene-1'), sceneState(t, 0, scene1EndMs));
+  // Scene 2: scene1EndMs → scene2EndMs
+  applySceneState(document.querySelector('.scene-2'), sceneState(t, scene1EndMs, scene2EndMs));
+  // ... repeat per scene
+};
+
+// Preview rAF loop — stopped by Playwright before frame capture
+let __previewActive = false;
+let __previewRafId = null;
+window.__stopPreview = function() {
+  __previewActive = false;
+  if (__previewRafId !== null) { cancelAnimationFrame(__previewRafId); __previewRafId = null; }
+};
+
+document.fonts.ready.then(() => {
+  window.renderFrame(0);
+  window.__videoReady = true;
+  __previewActive = true;
+  const startTime = performance.now();
+  function previewTick() {
+    if (!__previewActive) return;
+    const elapsed = performance.now() - startTime;
+    if (elapsed < window.TOTAL_DURATION_MS) {
+      window.renderFrame(elapsed);
+      __previewRafId = requestAnimationFrame(previewTick);
+    } else {
+      window.renderFrame(window.TOTAL_DURATION_MS - 1);
+      __previewActive = false;
+    }
+  }
+  __previewRafId = requestAnimationFrame(previewTick);
+});
+```
+
+**Timing math for N scenes of D seconds each:**
+```
+scene 1: startMs = 0,             endMs = D*1000
+scene 2: startMs = D*1000,        endMs = D*2000
+scene N: startMs = (N-1)*D*1000,  endMs = N*D*1000
+```
+
+Within each scene's `[startMs, endMs)` window:
+- Enter: first 10% → opacity 0→1, translateY 24px→0 (easeOutCubic)
+- Hold: 10%–85% → opacity 1, no transform
+- Exit: 85%–100% → opacity 1→0, translateY 0→-12px
+
+---
+
+## 1. title-card
+
+Large headline with optional eyebrow label and subtext. Best for scene 1 (hook/intro) or final scene.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner title-card">
+    <div class="eyebrow">Q4 2024</div>
+    <h1 class="headline">Revenue Grew 85%</h1>
+    <p class="subtext">Fastest quarter in company history</p>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.title-card {
+  text-align: center;
+  max-width: 900px;
+}
+.title-card .eyebrow {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 20px;
+}
+.title-card .headline {
+  font-family: var(--font-display);
+  font-size: clamp(72px, 10vw, 120px);
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.0;
+  letter-spacing: -0.03em;
+}
+.title-card .subtext {
+  font-family: var(--font-body);
+  font-size: 22px;
+  color: var(--text-muted);
+  margin-top: 24px;
+  line-height: 1.5;
+}
+```
+
+**Omit eyebrow or subtext if not needed** — the headline stands alone fine.
+
+---
+
+## 2. stat-reveal
+
+Oversized number + label. Best for a single metric that needs maximum impact.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner stat-reveal">
+    <div class="stat-number">$4.2M</div>
+    <div class="stat-label">New ARR this quarter</div>
+    <div class="stat-context">vs $2.3M same period last year</div>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.stat-reveal {
+  text-align: center;
+}
+.stat-reveal .stat-number {
+  font-family: var(--font-display);
+  font-size: clamp(120px, 18vw, 200px);
+  font-weight: 800;
+  color: var(--accent);
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+}
+.stat-reveal .stat-label {
+  font-family: var(--font-body);
+  font-size: 28px;
+  font-weight: 500;
+  color: var(--text);
+  margin-top: 20px;
+  letter-spacing: -0.01em;
+}
+.stat-reveal .stat-context {
+  font-family: var(--font-body);
+  font-size: 18px;
+  color: var(--text-muted);
+  margin-top: 12px;
+}
+```
+
+**Omit `.stat-context` if not needed.**
+
+---
+
+## 3. bullet-list
+
+2–4 short bullet points. Best for listing factors, drivers, or steps. Bullets animate in staggered within scene's keyframe window.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner bullet-list">
+    <h2 class="list-title">3 Drivers of Growth</h2>
+    <ul class="bullets">
+      <li class="bullet bullet-1">
+        <span class="bullet-marker">01</span>
+        <span class="bullet-text">Enterprise deals +120%</span>
+      </li>
+      <li class="bullet bullet-2">
+        <span class="bullet-marker">02</span>
+        <span class="bullet-text">Churn dropped to 1.2%</span>
+      </li>
+      <li class="bullet bullet-3">
+        <span class="bullet-marker">03</span>
+        <span class="bullet-text">Price increase fully absorbed</span>
+      </li>
+    </ul>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.bullet-list {
+  max-width: 800px;
+  width: 100%;
+}
+.bullet-list .list-title {
+  font-family: var(--font-display);
+  font-size: 52px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 40px;
+  letter-spacing: -0.02em;
+}
+.bullet-list .bullets {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.bullet-list .bullet {
+  display: flex;
+  align-items: baseline;
+  gap: 20px;
+  opacity: 0; /* renderFrame sets per-bullet opacity */
+  will-change: opacity;
+}
+.bullet-list .bullet-marker {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  color: var(--accent);
+  letter-spacing: 0.05em;
+  min-width: 28px;
+}
+.bullet-list .bullet-text {
+  font-family: var(--font-body);
+  font-size: 32px;
+  font-weight: 500;
+  color: var(--text);
+  line-height: 1.2;
+}
+```
+
+**Stagger bullets in renderFrame:**
+Add a `bulletOpacity()` helper and drive bullets from within `window.renderFrame`:
+
+```javascript
+function bulletOpacity(sceneProgress, showAtProg) {
+  if (sceneProgress < showAtProg) return 0;
+  if (sceneProgress < showAtProg + 0.06) return (sceneProgress - showAtProg) / 0.06;
+  if (sceneProgress < 0.85) return 1;
+  return clamp(1 - (sceneProgress - 0.85) / 0.15, 0, 1);
+}
+
+// Inside window.renderFrame(t), for a bullet-list scene (e.g. 6000ms–9000ms):
+const sProgress = clamp((t - startMs) / (endMs - startMs), 0, 1);
+const staggerOffsets = [0.10, 0.28, 0.46]; // scene-progress when each bullet appears
+['.bullet-1', '.bullet-2', '.bullet-3'].forEach((cls, i) => {
+  const el = document.querySelector(cls);
+  if (el) el.style.opacity = bulletOpacity(sProgress, staggerOffsets[i]);
+});
+```
+
+Bullet 1 appears at 10% into scene, bullet 2 at 28%, bullet 3 at 46%. All fade out with the scene exit at 85%.
+
+---
+
+## 4. split-screen
+
+Left column: text/context. Right column: large number or metric. Side-by-side contrast.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner split-screen">
+    <div class="split-left">
+      <div class="split-label">Before</div>
+      <div class="split-value dim">200 req/s</div>
+      <div class="split-desc">Legacy system capacity</div>
+    </div>
+    <div class="split-divider"></div>
+    <div class="split-right">
+      <div class="split-label accent">After</div>
+      <div class="split-value">2,000 req/s</div>
+      <div class="split-desc">Post-migration capacity</div>
+    </div>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.split-screen {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+  padding: 80px;
+}
+.split-left,
+.split-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+}
+.split-divider {
+  width: 1px;
+  height: 200px;
+  background: var(--divider);
+  margin: 0 40px;
+  flex-shrink: 0;
+}
+.split-label {
+  font-family: var(--font-body);
+  font-size: 13px;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+.split-label.accent { color: var(--accent); }
+.split-value {
+  font-family: var(--font-display);
+  font-size: clamp(60px, 9vw, 96px);
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.03em;
+  line-height: 1.0;
+}
+.split-value.dim { opacity: 0.35; }
+.split-desc {
+  font-family: var(--font-body);
+  font-size: 18px;
+  color: var(--text-muted);
+}
+```
+
+---
+
+## 5. quote-card
+
+Large pull quote with attribution. Best for testimonials, founder quotes, or key insights.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner quote-card">
+    <div class="quote-mark">"</div>
+    <blockquote class="quote-text">
+      This tool saved us 20 hours a week and paid for itself on day one.
+    </blockquote>
+    <div class="quote-attribution">
+      <span class="quote-name">Sarah Chen</span>
+      <span class="quote-role">Head of Engineering, Acme Corp</span>
+    </div>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.quote-card {
+  max-width: 860px;
+  text-align: center;
+  position: relative;
+}
+.quote-card .quote-mark {
+  font-family: var(--font-display);
+  font-size: 120px;
+  line-height: 0.6;
+  color: var(--accent);
+  margin-bottom: 24px;
+  display: block;
+}
+.quote-card .quote-text {
+  font-family: var(--font-display);
+  font-size: clamp(32px, 5vw, 52px);
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+  font-style: normal;
+}
+.quote-card .quote-attribution {
+  margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.quote-card .quote-name {
+  font-family: var(--font-body);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text);
+}
+.quote-card .quote-role {
+  font-family: var(--font-body);
+  font-size: 15px;
+  color: var(--text-muted);
+}
+```
+
+---
+
+## 6. cta-card
+
+Final scene: brand name + call to action + URL or handle. Always the last scene.
+
+**HTML:**
+```html
+<div class="scene scene-N">
+  <div class="scene-inner cta-card">
+    <div class="cta-brand">Acme</div>
+    <div class="cta-divider"></div>
+    <p class="cta-message">See the full Q4 report</p>
+    <div class="cta-url">acme.com/q4-2024</div>
+  </div>
+</div>
+```
+
+**CSS:**
+```css
+.cta-card {
+  text-align: center;
+  align-items: center;
+  gap: 0;
+}
+.cta-card .cta-brand {
+  font-family: var(--font-display);
+  font-size: 72px;
+  font-weight: 700;
+  color: var(--text);
+  letter-spacing: -0.04em;
+}
+.cta-card .cta-divider {
+  width: 48px;
+  height: 3px;
+  background: var(--accent);
+  margin: 28px auto;
+}
+.cta-card .cta-message {
+  font-family: var(--font-body);
+  font-size: 26px;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+.cta-card .cta-url {
+  font-family: var(--font-mono);
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--accent);
+  letter-spacing: -0.01em;
+}
+```
+
+---
+
+## Scene Selection Guide
+
+| Content type | Recommended scene type |
+|---|---|
+| Hook / opening | title-card |
+| Single metric / number | stat-reveal |
+| Multiple points / list | bullet-list |
+| Before vs after / two values | split-screen |
+| Testimonial / quote | quote-card |
+| Final / CTA / contact | cta-card |
+
+**Max 6 scenes per video.** Beyond 6, the message fragments. If the brief has more than 6 ideas, consolidate similar points or promote the top 5 with a summary CTA.

package/skills/vid-motion-graphics/references/style-presets.md

@@ -0,0 +1,202 @@
+# Style Presets — vid-motion-graphics
+
+5 motion-optimized style presets. Each includes CSS tokens, font stack, Google Fonts CDN link, and animation personality.
+
+Read this file before generating any HTML in Step 3.
+
+---
+
+## 1. kinetic-dark (default)
+
+**Feel:** High-energy. Electric yellow on near-black. Tight grotesque. Fast-in, slow-hold.
+**Best for:** Product launches, growth metrics, startup content.
+
+```css
+/* Font CDN */
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+
+:root {
+  --bg:           #0A0A0A;
+  --text:         #FAFAFA;
+  --text-muted:   #888888;
+  --accent:       #F5FF00;
+  --accent-dim:   rgba(245,255,0,0.15);
+  --divider:      rgba(255,255,255,0.10);
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body:    'DM Sans', sans-serif;
+  --font-mono:    'Space Grotesk', monospace;
+}
+```
+
+**Data palette:** `['#F5FF00', '#60A5FA', '#4ADE80', '#F87171', '#A78BFA']`
+
+**Animation feel:**
+- In: `translateY(24px) → 0, opacity 0 → 1` over first 8% of scene
+- Hold: static for 80% of scene
+- Out: `translateY(-12px), opacity → 0` over last 12% of scene
+- Easing: `cubic-bezier(0.22, 1, 0.36, 1)` for in, `linear` for out
+
+---
+
+## 2. editorial-light
+
+**Feel:** Refined. Ink on paper. Serif display. Long hold, gentle crossfade.
+**Best for:** Thought leadership, executive communications, annual reports.
+
+```css
+/* Font CDN */
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
+
+:root {
+  --bg:           #FAFAF8;
+  --text:         #111111;
+  --text-muted:   #777777;
+  --accent:       #111111;
+  --accent-dim:   rgba(17,17,17,0.08);
+  --divider:      rgba(0,0,0,0.10);
+  --font-display: 'Playfair Display', serif;
+  --font-body:    'Source Serif 4', serif;
+  --font-mono:    'Source Serif 4', monospace;
+}
+```
+
+**Data palette:** `['#111111', '#3B82F6', '#16A34A', '#DC2626', '#7C3AED']`
+
+**Animation feel:**
+- In: `opacity 0 → 1` only, over first 10% of scene (no transform)
+- Hold: static for 85% of scene
+- Out: `opacity → 0` over last 5% of scene
+- Easing: `ease-in-out` throughout
+
+---
+
+## 3. data-pulse
+
+**Feel:** Terminal/dashboard. Deep navy, electric blue, monospaced. Scan-line entrance.
+**Best for:** Technical metrics, engineering announcements, SaaS dashboards.
+
+```css
+/* Font CDN */
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500&display=swap" rel="stylesheet">
+
+:root {
+  --bg:           #050B1A;
+  --text:         #E8F4FF;
+  --text-muted:   #4A7FA5;
+  --accent:       #00C2FF;
+  --accent-dim:   rgba(0,194,255,0.12);
+  --divider:      rgba(0,194,255,0.15);
+  --font-display: 'IBM Plex Mono', monospace;
+  --font-body:    'IBM Plex Sans', sans-serif;
+  --font-mono:    'IBM Plex Mono', monospace;
+}
+```
+
+**Data palette:** `['#00C2FF', '#4ADE80', '#F5FF00', '#F87171', '#A78BFA']`
+
+**Animation feel:**
+- In: `translateX(-8px) → 0, opacity 0 → 1` with slight stagger on text lines
+- Hold: static with subtle `box-shadow` pulse on accent elements
+- Out: `opacity → 0, translateX(8px)` — slide out opposite direction
+- Easing: `steps(4)` for entrance (scan-line effect), `linear` for exit
+
+---
+
+## 4. bold-type
+
+**Feel:** Brutalist typographic. White bg, black/red, maximum weight. Slam in.
+**Best for:** Announcements, milestones, provocative statements.
+
+```css
+/* Font CDN */
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+
+:root {
+  --bg:           #FFFFFF;
+  --text:         #000000;
+  --text-muted:   #555555;
+  --accent:       #FF2B00;
+  --accent-dim:   rgba(255,43,0,0.10);
+  --divider:      #000000;
+  --font-display: 'Bebas Neue', sans-serif;
+  --font-body:    'Inter', sans-serif;
+  --font-mono:    'Inter', monospace;
+}
+```
+
+**Data palette:** `['#FF2B00', '#000000', '#1D4ED8', '#16A34A', '#9333EA']`
+
+**Animation feel:**
+- In: `scale(1.08) → 1, opacity 0 → 1` over first 5% of scene (slam)
+- Hold: static for 90% of scene
+- Out: `scale(0.96), opacity → 0` over last 5% of scene (snap)
+- Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` for in (overshoot), `linear` for out
+
+---
+
+## 5. minimal-clean
+
+**Feel:** Warm, refined. Off-white, ink-warm neutrals, thin serif display. Gentle rise.
+**Best for:** People-focused content, hiring, testimonials, brand storytelling.
+
+```css
+/* Font CDN */
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
+
+:root {
+  --bg:           #F5F4F0;
+  --text:         #1A1A18;
+  --text-muted:   #8A8A82;
+  --accent:       #1A1A18;
+  --accent-dim:   rgba(26,26,24,0.06);
+  --divider:      rgba(26,26,24,0.12);
+  --font-display: 'Cormorant Garamond', serif;
+  --font-body:    'Jost', sans-serif;
+  --font-mono:    'Jost', monospace;
+}
+```
+
+**Data palette:** `['#1A1A18', '#6366F1', '#16A34A', '#CA8A04', '#DC2626']`
+
+**Animation feel:**
+- In: `translateY(32px) → 0, opacity 0 → 1` over first 12% of scene
+- Hold: static for 80% of scene
+- Out: `opacity → 0` only (no transform) over last 8%
+- Easing: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` throughout
+
+---
+
+## renderFrame Timing Quick Reference
+
+All scene timing is computed in `window.renderFrame(t)` (milliseconds). No CSS `@keyframes`.
+
+For a scene at `[startMs, endMs)`:
+```javascript
+const prog = (t - startMs) / (endMs - startMs); // 0.0 → 1.0
+// Enter:  prog 0.00–0.10 → opacity 0→1, translateY 24px→0 (easeOutCubic)
+// Hold:   prog 0.10–0.85 → opacity 1, no transform
+// Exit:   prog 0.85–1.00 → opacity 1→0, translateY 0→-12px
+// Hidden: t < startMs or t >= endMs → opacity 0
+```
+
+**Example — 3 scenes, 3s each, 9s total:**
+```javascript
+// scene 1: 0ms–3000ms  | scene 2: 3000ms–6000ms  | scene 3: 6000ms–9000ms
+window.renderFrame = function(t) {
+  applySceneState(document.querySelector('.scene-1'), sceneState(t, 0,    3000));
+  applySceneState(document.querySelector('.scene-2'), sceneState(t, 3000, 6000));
+  applySceneState(document.querySelector('.scene-3'), sceneState(t, 6000, 9000));
+};
+```
+
+**Animation feel by preset (all implemented in sceneState/easing):**
+
+| Preset | Enter transform | Enter easing | Exit transform |
+|---|---|---|---|
+| kinetic-dark | translateY(24px)→0 | easeOutCubic | translateY(0→-12px) |
+| editorial-light | opacity only | ease-in-out | opacity only |
+| data-pulse | translateX(-8px)→0 | easeOutCubic | translateX(0→8px) |
+| bold-type | scale(1.08)→1 | easeOutCubic (overshoot) | scale(1→0.96) |
+| minimal-clean | translateY(32px)→0 | easeOutCubic | opacity only |
+
+Adapt `sceneState()` or add a style-specific `enterTransform`/`exitTransform` param to match the preset's feel.