@conceptcraft/mindframes 0.1.10 → 0.1.12

package/dist/index.js

@@ -840,13 +840,13 @@ async function importPresentation(fileBuffer, fileName, options = {}) {
   return result;
 }
 async function listBrandings() {
-  return request("/api/branding");
+  return request("/api/cli/branding");
 }
 async function getBranding(id) {
   return request(`/api/branding/${id}`);
 }
 async function extractBranding(url, teamId) {
-  return request("/api/branding/extract", {
+  return request("/api/cli/branding/extract", {
     method: "POST",
     body: { url, teamId }
   });
@@ -992,6 +992,51 @@ async function generateSpeech(ttsRequest) {
     timestamps
   };
 }
+async function generateSpeechBatch(batchRequest) {
+  const apiUrl = getApiUrl();
+  if (!hasAuth()) {
+    throw new ApiError(
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
+      401,
+      2
+    );
+  }
+  const authHeaders = await getAuthHeaders();
+  let response;
+  try {
+    response = await fetch(`${apiUrl}/api/cli/tts/batch`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...authHeaders
+      },
+      body: JSON.stringify(batchRequest)
+    });
+  } catch (error2) {
+    throw new ApiError(
+      `Network error: ${error2 instanceof Error ? error2.message : "Unknown error"}`,
+      0,
+      5
+    );
+  }
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => "Unknown error");
+    let errorMessage;
+    try {
+      const errorJson = JSON.parse(errorText);
+      errorMessage = errorJson.error || errorJson.message || errorText;
+    } catch {
+      errorMessage = errorText;
+    }
+    throw new ApiError(errorMessage, response.status, response.status === 401 ? 2 : 1);
+  }
+  const result = await response.json();
+  result.results = result.results.map((r) => ({
+    ...r,
+    audioData: Buffer.from(r.audioData, "base64")
+  }));
+  return result;
+}
 async function getVoices() {
   return request("/api/cli/tts");
 }
@@ -3019,14 +3064,14 @@ import chalk12 from "chalk";
 
 // src/commands/skill/generate-main-skill.ts
 function generateMainSkillContent(context) {
-  const { name, cmd: cmd2, displayName } = context;
-  const envPrefix = name.toUpperCase().replace(/-/g, "_");
+  const { name, cmd: cmd2 } = context;
+  const envPrefix = name.toUpperCase().replace(/[^A-Z0-9]/g, "_");
   return `---
 name: ${name}
-description: ${displayName} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${name}-video, ${name}-presentation) for detailed workflows.
+description: ${name} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${name}-video, ${name}-presentation) for detailed workflows.
 ---
 
-# ${displayName} CLI
+# ${name} CLI
 
 A comprehensive CLI for AI-powered content creation. Generate presentations, video assets, voiceovers, music, and search stock media - all from your terminal.
 
@@ -3377,10 +3422,10 @@ cat scenes.json | ${cmd2} video create -o product-demo/public
 
 # 3. Implement in Remotion (see ${name}-video skill)
 
-# 4. Render and add thumbnail
+# 4. Render and add thumbnail (version files: v1, v2, v3...)
 cd product-demo
-pnpm exec remotion render FullVideo
-${cmd2} video thumbnail out/FullVideo.mp4 --frame 60
+pnpm exec remotion render FullVideo out/FullVideo-v1.mp4
+${cmd2} video thumbnail out/FullVideo-v1.mp4 --frame 60
 \`\`\`
 
 ### Presentation from Research
@@ -3439,901 +3484,157 @@ ${cmd2} --version           # Version info
 }
 
 // src/commands/skill/rules/video/content.ts
-var VIDEO_RULE_CONTENTS = [
-  {
-    filename: "video-creation-guide.md",
-    content: `# Video Creation Guide
-
-### Related Skills
-
-Use these installed skills for implementation details:
-- \`remotion-best-practices\` \u2014 Remotion patterns and API
-- \`threejs-*\` skills \u2014 for R3F/WebGL (particles, 3D elements)
-
----
-
-## Core Rules
-
-Your task is not "making slideshows" \u2014 you are **simulating a real interface** that obeys cinematic physics.
-
-### Hard Constraints
-
-1. **No scene > 8 seconds** without cut or major action
-2. **No static pixels** \u2014 everything breathes, drifts, pulses
-3. **No linear interpolation** \u2014 use \`spring()\` physics
-4. **Scene overlap 15-20 frames** \u2014 no hard cuts
-5. **60 FPS mandatory** \u2014 30fps looks choppy
-6. **No screenshots for UI** \u2014 rebuild in React/CSS
-
----
-
-## Code Organization
-
-- Create separate files: \`Button.tsx\`, \`Window.tsx\`, \`Cursor.tsx\`
-- Use Zod schemas for props validation
-- Extract animation configs to constants
-
-\`\`\`tsx
-import { spring, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
-
-// ALWAYS use spring for element entrances
-// NEVER use magic numbers
-\`\`\`
+var THUMBNAIL_RULES = `Consider creating separate thumbnail component with Remotion (can be captured with remotion still, not used in actual video).
 
----
-
-## Aesthetics (Linear/Stripe Style)
-
-\`\`\`css
-/* Shadows - soft, expensive */
-box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
-
-/* Borders - thin, barely visible */
-border: 1px solid rgba(255,255,255,0.1);
-\`\`\`
-
-- Fonts: Inter or SF Pro
-- Never pure \`#000000\` \u2014 use \`#050505\`
-- Never pure \`#FFFFFF\` \u2014 use \`#F0F0F0\`
-
----
-
-## Self-Check Before Render
-
-- [ ] Camera rig wraps entire scene with drift/zoom
-- [ ] Every UI element uses 2.5D rotation entrance
-- [ ] Cursor moves in curves with overshoot
-- [ ] Lists/grids stagger (never appear all at once)
-- [ ] Background has moving orbs + vignette + noise
-- [ ] Something is moving on EVERY frame
-- [ ] Scene transitions overlap (no hard cuts)
-
-**If your video looks like PowerPoint with voiceover \u2014 START OVER.**
-`
-  },
-  {
-    filename: "animation-physics.md",
-    content: `# Animation Physics
-
-## Spring Configurations
-
-### Heavy UI (Modals, Sidebars)
-\`\`\`tsx
-config: { mass: 1, stiffness: 100, damping: 15 }
-\`\`\`
-
-### Light UI (Tooltips, Badges)
-\`\`\`tsx
-config: { mass: 0.6, stiffness: 180, damping: 12 }
-\`\`\`
-
-### Standard (Snappy)
-\`\`\`tsx
-config: { mass: 1, damping: 15, stiffness: 120 }
-\`\`\`
-
----
-
-## Staggering
-
-**NEVER show a list all at once.**
-
-\`\`\`tsx
-const STAGGER_FRAMES = 3; // 3-5 frames between items
-
-{items.map((item, i) => {
-  const delay = i * STAGGER_FRAMES;
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: { damping: 15, stiffness: 120 },
-  });
-
-  return (
-    <div style={{
-      opacity: progress,
-      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
-    }}>
-      {item}
-    </div>
-  );
-})}
-\`\`\`
-
----
-
-## Cursor Movement
-
-**Cursor NEVER moves in straight lines.**
-
-\`\`\`tsx
-const progress = spring({
-  frame: frame - startFrame,
-  fps,
-  config: { damping: 20, stiffness: 80 },
-});
-
-const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
-const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
-
-// THE ARC: Parabola that peaks mid-travel
-const arcHeight = 100;
-const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
-const cursorY = linearY - arcOffset;
-\`\`\`
-
----
-
-## Click Interaction
-
-\`\`\`tsx
-// On click:
-const cursorScale = isClicking ? 0.95 : 1;
-const buttonScaleX = isClicking ? 1.02 : 1;
-const buttonScaleY = isClicking ? 0.95 : 1;
-// Release both with spring
-\`\`\`
-
----
-
-## Timing Reference
-
-| Action | Frames (60fps) |
-|--------|----------------|
-| Element entrance | 15-20 |
-| Stagger gap | 3-5 |
-| Hold on key info | 45-60 |
-| Scene transition | 20-30 |
-| Fast interaction | 15-20 |
-`
-  },
-  {
-    filename: "scene-structure.md",
-    content: `# Scene Structure
-
-## SceneWrapper
-
-\`\`\`tsx
-<SceneWrapper
-  durationInFrames={300}
-  transitionType="slideLeft"
-  cameraMotion="panRight"
->
-  <FeatureLayer />
-  <CursorLayer />
-  <ParticleLayer />
-</SceneWrapper>
-\`\`\`
-
----
+**High-CTR principles:**
+- Expressive faces (emotion, not neutral) boost CTR 20-30%
+- High contrast, bold colors (yellow, orange stand out)
+- Simple: 3 main elements max (face + text + 1 visual)
+- Mobile-first: readable at 320px width (70% of views)
+- Minimal text: 3-5 words, bold legible fonts (60-80px)
+- Rule of thirds composition
 
-## Layer Structure (Z-Index)
+**Specs:** 1280x720, <2MB, 16:9 ratio
 
-| Layer | Z-Index |
-|-------|---------|
-| Background orbs | 0 |
-| Vignette | 1 |
-| UI Base | 10 |
-| UI Elements | 20 |
-| Overlays | 30 |
-| Text/Captions | 40 |
-| Cursor | 50 |
-
----
-
-## Case Study: SaaS Task Tracker
-
-### Scene 1: "The Hook" (~5s)
-
-1. Dark background (\`#0B0C10\`), grid drifting
-2. Scattered circles magnetically attract \u2192 morph into logo
-3. Logo expands \u2192 becomes sidebar navigation
-
-### Scene 2: "Micro-Interaction" (~6s)
-
-1. Modal "Create Issue" appears
-2. Text types character by character (non-uniform speed)
-3. \`CMD + K\` hint glows, keys animate
-4. Cursor flies to "Save" in arc, slows on approach
-
-### Scene 3: "The Connection" (~5s)
-
-1. Task card grabbed, scales 1.05, shadow deepens
-2. Other cards spread apart
-3. **Match Cut:** Zoom into avatar \u2192 color fills screen \u2192 becomes mobile notification background
-
----
-
-## Composition
-
-\`\`\`tsx
-<AbsoluteFill>
-  <MovingBackground />
-  <Vignette />
-  <CameraRig>
-    <Sequence from={0} durationInFrames={100}>
-      <Scene1 />
-    </Sequence>
-    <Sequence from={85} durationInFrames={150}>  {/* 15 frame overlap! */}
-      <Scene2 />
-    </Sequence>
-  </CameraRig>
-  <Audio src={music} volume={0.3} />
-</AbsoluteFill>
-\`\`\`
-`
-  },
-  {
-    filename: "scene-transitions.md",
-    content: `# Scene Transitions
-
-**No FadeIn/FadeOut.** Only contextual transitions.
-
----
-
-## Types
-
-### 1. Object Persistence
-Same chart transforms (data, color, scale) while UI changes around it.
-
-### 2. Mask Reveal
-Button expands to screen size via SVG \`clipPath\`.
-
-### 3. Speed Ramps
-Scene A accelerates out, Scene B starts fast then slows.
-
----
-
-## Match Cut Example
-
-\`\`\`
-Scene A: Zoom into avatar
-         \u2193
-Avatar color fills screen
-         \u2193
-Scene B: That color IS the notification background
-\`\`\`
-
----
-
-## Overlapping Sequences (CRITICAL)
-
-\`\`\`tsx
-<Sequence from={0} durationInFrames={100}>
-  <SceneOne />
-</Sequence>
-<Sequence from={85} durationInFrames={150}>  {/* 15 frames early! */}
-  <SceneTwo />
-</Sequence>
-\`\`\`
-
----
-
-## TransitionSeries
-
-\`\`\`tsx
-import { TransitionSeries, linearTiming } from '@remotion/transitions';
-import { slide } from '@remotion/transitions/slide';
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={100}>
-    <SceneOne />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition
-    presentation={slide({ direction: 'from-bottom' })}
-    timing={linearTiming({ durationInFrames: 20 })}
-  />
-  <TransitionSeries.Sequence durationInFrames={150}>
-    <SceneTwo />
-  </TransitionSeries.Sequence>
-</TransitionSeries>
-\`\`\`
-`
-  },
-  {
-    filename: "polish-effects.md",
-    content: `# Polish Effects
-
-## Reflection (Glass Glint)
-
-Diagonal gradient sweeps every 5 seconds.
-
-\`\`\`tsx
-const cycleFrame = frame % 300;
-const sweepProgress = interpolate(cycleFrame, [0, 60], [-100, 200], {
-  extrapolateRight: 'clamp',
-});
-\`\`\`
-
----
-
-## Background Breathing
-
-Background is NEVER static.
-
-\`\`\`tsx
-const orb1X = Math.sin(frame / 60) * 200;
-const orb1Y = Math.cos(frame / 80) * 100;
-\`\`\`
-
----
-
-## Typewriter Effect
-
-\`\`\`tsx
-const charIndex = Math.floor(frame / 3);
-const showCursor = Math.floor(frame / 15) % 2 === 0;
-
-<span>
-  {text.slice(0, charIndex)}
-  {showCursor && <span>|</span>}
-</span>
-\`\`\`
-
----
-
-## Vignette & Noise
-
-\`\`\`tsx
-// Noise
-<AbsoluteFill style={{
-  backgroundImage: 'url(/noise.png)',
-  opacity: 0.03,
-  mixBlendMode: 'overlay',
-}} />
-
-// Vignette
-<AbsoluteFill style={{
-  background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%)',
-}} />
-\`\`\`
-`
-  },
-  {
-    filename: "advanced-techniques.md",
-    content: `# Advanced Techniques
-
-## Audio-Reactive
-
-- **Kick:** \`scale(1.005)\` pulse
-- **Snare:** Trigger scene changes
-- **Hi-hats:** Cursor flicker, particle shimmer
-
----
-
-## Motion Blur (Fake)
-
-\`\`\`tsx
-// Trail: Render 3-4 copies with opacity 0.3, 1-frame delay
-
-// Or drop shadow for fast movement:
-filter: \`drop-shadow(\${velocityX * 0.5}px \${velocityY * 0.5}px 10px rgba(0,0,0,0.3))\`
-\`\`\`
-
----
-
-## 3D Perspective
-
-\`\`\`tsx
-<div style={{ perspective: '1000px' }}>
-  <div style={{
-    transform: 'rotateX(5deg) rotateY(10deg)',
-    transformStyle: 'preserve-3d',
-  }}>
-    {/* Your UI */}
-  </div>
-</div>
-\`\`\`
-
----
-
-## Kinetic Typography
-
-### Masked Reveal
-\`\`\`tsx
-<div style={{ overflow: 'hidden', height: 80 }}>
-  <h1 style={{
-    transform: \`translateY(\${interpolate(progress, [0, 1], [100, 0])}%)\`,
-  }}>
-    INTRODUCING
-  </h1>
-</div>
-\`\`\`
-
-### Keyword Animation
-Animate keywords, not whole sentences.
-`
-  },
-  {
-    filename: "remotion-config.md",
-    content: `# Remotion Configuration
-
-## FPS & Resolution
-
-- **60 FPS mandatory** \u2014 30fps looks choppy
-- **1920\xD71080** Full HD
-- **Center:** \`{x: 960, y: 540}\`
-
----
-
-## Timing
-
-- 1 second = 60 frames
-- Fast interaction = 15-20 frames
-- No scene > 8 seconds without action
-
----
-
-## Entry-Action-Exit Structure
-
-| Phase | Duration |
-|-------|----------|
-| Entry | 0.0s - 0.5s |
-| Action | 0.5s - (duration - 1s) |
-| Exit | last 1s |
-
----
-
-## Font Loading
-
-\`\`\`tsx
-const [handle] = useState(() => delayRender());
-
-useEffect(() => {
-  document.fonts.ready.then(() => {
-    continueRender(handle);
-  });
-}, [handle]);
-\`\`\`
-
----
-
-## Zod Schema
-
-\`\`\`tsx
-export const SceneSchema = z.object({
-  titleText: z.string(),
-  buttonColor: z.string(),
-  cursorPath: z.array(z.object({ x: z.number(), y: z.number() })),
-});
-\`\`\`
-
----
-
-## SaaS Video Kit Components
-
-| Component | Purpose |
-|-----------|---------|
-| \`MockWindow\` | macOS window with traffic lights |
-| \`SmartCursor\` | Bezier curves + click physics |
-| \`NotificationToast\` | Slide in, wait, slide out |
-| \`TypingText\` | Typewriter with cursor |
-| \`Placeholder\` | For logos/icons |
-
----
-
-## Code Rules
-
-1. No \`transition: all 0.3s\` \u2014 use \`interpolate()\` or \`spring()\`
-2. Use \`AbsoluteFill\` for layout
-3. No magic numbers \u2014 extract to constants
-`
-  },
-  {
-    filename: "elite-production.md",
-    content: `# Elite Production
-
-For Stripe/Apple/Linear quality.
-
----
-
-## Global Lighting Engine
-
-\`\`\`tsx
-const lightSource = { x: 0.2, y: -0.5 };
-const gradientAngle = Math.atan2(lightSource.y, lightSource.x) * (180 / Math.PI);
-
-<button style={{
-  background: \`linear-gradient(\${gradientAngle}deg, rgba(255,255,255,0.1) 0%, transparent 50%)\`,
-  borderTop: '1px solid rgba(255,255,255,0.15)',
-  boxShadow: \`\${-lightSource.x * 20}px \${-lightSource.y * 20}px 40px rgba(0,0,0,0.3)\`,
-}} />
-\`\`\`
-
----
-
-## Noise & Dithering
-
-Every background needs noise overlay (opacity 0.02-0.05). Prevents YouTube banding.
-
----
-
-## React Three Fiber
-
-For particles, 3D globes \u2014 use WebGL via \`@remotion/three\`, not CSS 3D.
-
-\`\`\`tsx
-import { ThreeCanvas } from '@remotion/three';
-
-<AbsoluteFill>
-  <HtmlUI />
-  <ThreeCanvas>
-    <Particles />
-  </ThreeCanvas>
-</AbsoluteFill>
-\`\`\`
-
-See \`threejs-*\` skills for implementation.
-
----
-
-## Virtual Camera Rig
-
-Move camera, not elements:
-
-\`\`\`tsx
-const CameraProvider = ({ children }) => {
-  const frame = useCurrentFrame();
-  const panX = interpolate(frame, [0, 300], [0, -100]);
-  const zoom = interpolate(frame, [0, 300], [1, 1.05]);
-
-  return (
-    <div style={{
-      transform: \`translateX(\${panX}px) scale(\${zoom})\`,
-      transformOrigin: 'center',
-    }}>
-      {children}
-    </div>
-  );
-};
-\`\`\`
-
----
-
-## Motion Rules
-
-- **Overshoot:** Modal scales to 1.02, settles to 1.0
-- **Overlap:** Scene B starts 15 frames before Scene A ends
-`
-  },
-  {
-    filename: "known-issues.md",
-    content: `# Known Issues & Fixes
-
-## 1. Music Ends Before Video Finishes
-
-**Problem:** Music duration is shorter than video duration, causing awkward silence at the end.
-
-**Solution:** Loop music in Remotion using the \`loop\` prop:
-
-\`\`\`tsx
-import { Audio } from 'remotion';
-
-<Audio src={musicSrc} volume={0.3} loop />
-\`\`\`
-
-**How it works:**
-- Music automatically loops to fill video duration
-- Set volume to 0.3 (30% - less loud than voice)
-- Add fade out at the end for smooth ending
-
----
+Can capture: \`pnpm exec remotion still ThumbnailScene out/thumb.png\`
+`;
+var MOTION_DESIGN_GUIDELINES = `# Motion Design Principles
 
-## 2. Music Transitions Sound Abrupt
+**Core Philosophy:** "Atomic, Kinetic Construction" - nothing is static. Elements arrive and leave via physics-based transitions.
 
-**Problem:** Music cuts harshly when scenes change or video ends.
+## Design System Approach
 
-**Fix in Remotion:**
-\`\`\`tsx
-import { interpolate, Audio } from 'remotion';
+**Separate content from logic:**
+- Theme object: colors (primary, accent, background, text), fonts, corner radiuses in config
+- Scene object: define by duration in frames and content type, not timecodes
+- Avoid hardcoding: colors, text, data values can be passed via props or config file
 
-// Fade music in/out at scene boundaries
-const musicVolume = interpolate(
-  frame,
-  [0, 30, totalFrames - 60, totalFrames],
-  [0, 0.3, 0.3, 0],
-  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
-);
+## Animation Physics (Spring-Based)
 
-<Audio src={music} volume={musicVolume} />
-\`\`\`
+**Spring Pop:**
+- UI cards, bubbles, logos "pop" with bounce
+- \`spring()\` function works well: low mass (0.5), moderate damping (10-12), high stiffness (100-200)
+- Spring value can map to scale (0 to 1) and opacity (0 to 1)
+- Consider \`transform-origin\` placement (center for bubbles, top for dropdowns)
 
----
+**Kinetic Typography:**
+- Text entering line-by-line or word-by-word (not all at once)
+- Can split text into arrays, stagger with delays (index * 5 frames)
+- \`interpolate()\` works for opacity [0,1] and translateY [20px, 0px] - slide up
+- Cubic easing works well for slide-up motion
 
-## 3. Scene Transitions Too Harsh
-
-**Problem:** Scenes change abruptly without smooth transitions.
-
-**Fix:** Use \`@remotion/transitions\` with overlapping:
-\`\`\`tsx
-import { TransitionSeries, springTiming } from '@remotion/transitions';
-import { slide } from '@remotion/transitions/slide';
-import { fade } from '@remotion/transitions/fade';
-
-<TransitionSeries>
-  <TransitionSeries.Sequence durationInFrames={sceneA.frames}>
-    <SceneA />
-  </TransitionSeries.Sequence>
-  <TransitionSeries.Transition
-    presentation={slide({ direction: 'from-right' })}
-    timing={springTiming({ config: { damping: 20 } })}
-  />
-  <TransitionSeries.Sequence durationInFrames={sceneB.frames}>
-    <SceneB />
-  </TransitionSeries.Sequence>
-</TransitionSeries>
-\`\`\`
+**Constructed UI:**
+- Building UI from HTML/CSS divs works better than screenshots
+- If user shares project: study actual UI components (buttons, cards, modals) and implement pixel-perfect recreations - match colors, fonts, shadows, border-radius
+- Bar charts: can animate height/width from 0% to target
+- Line charts: can animate SVG path \`stroke-dashoffset\`
+- Donut charts: can animate \`stroke-dasharray\` of SVG circle
+- Numbers: counter component interpolating from 0 to target over 30-60 frames
 
----
+## Visual Composition
 
-## 4. Voiceover Lacks Energy
-
-**Problem:** Voiceover sounds flat/monotone.
-
-**Fix:** Pass \`voiceSettings\` in scenes JSON:
-\`\`\`json
-{
-  "scenes": [...],
-  "voice": "Kore",
-  "voiceSettings": {
-    "style": 0.6,
-    "stability": 0.4,
-    "speed": 0.95
-  }
-}
-\`\`\`
+**Background Ambience:**
+- Static backgrounds feel flat - consider faint dots/patterns
+- Slow oscillation works well: \`Math.sin(frame / 100)\` applied to position/rotation for "floating" effect
+- Parallax adds depth: background moves slower than foreground
 
-- \`style\`: 0.5-0.7 for more expressive delivery
-- \`stability\`: 0.3-0.5 for more variation
-- \`speed\`: 0.9-1.0 slightly slower = more impactful
+**SVG Handling:**
+- Inline SVGs allow control of fill color via theme (better than img tags)
+- Chat bubbles can be constructed with SVG paths or heavy border-radius
+- Animating bubble "tail" separately adds polish
 
----
+**Scene Transitions:**
+- Scenes can slide or camera can "pan" to new area
+- Slide-out approach: Scene A \`translateX\` 0% to -100%, Scene B 100% to 0%
+- Spatial pan approach: place scenes on giant canvas, animate parent container transform
 
-## 5. Video Duration Mismatch
+## Suggested Component Architecture
 
-**Problem:** Brief says 30-45s but video is 20s (because scene duration = voiceover duration).
+Consider these reusable patterns:
+- KineticText: text, delay, style props - handles word-splitting and stagger
+- SmartCard: container with Spring Pop entry and glassmorphism styles
+- AnimatedCounter: from, to, duration props - number ticking
+- ProgressBar/ChartElement: percentage, color props - growth animation from 0
 
-**Fixes:**
-1. **Slow voice:** Use \`speed: 0.85\` in voiceSettings
-2. **Add padding in Remotion:** Hold last frame, add breathing room
-\`\`\`tsx
-// Add 30 frames (0.5s) padding after voiceover ends
-const paddedDuration = voiceoverFrames + 30;
-\`\`\`
-3. **Brief should note:** "Duration based on voiceover length"
+**Motion Blur (optional):** Can simulate by stretching element in direction of movement on fast transitions.
+`;
+var SVG_ANIMATION_GUIDELINES = `# SVG Line Animation (Write-On Effect)
 
----
+**Core Concept:** "Invisible Ink Rule" - lines draw in (don't fade in), as if hand-drawn in real-time.
 
-## 6. Not Using Project UI Components
+**Animation approach:**
+- Setting \`pathLength="1"\` on SVG path elements normalizes length
+- Animating \`strokeDashoffset\` from 1 (hidden) to 0 (drawn) creates write-on effect
+- \`strokeDasharray: 1\` with interpolate \`[1, 0]\` over 20-30 frames works well
+- \`stroke-linecap="round"\` creates friendly hand-drawn look
 
-**Problem:** Generic UI instead of pixel-perfect project components.
+**Draw & vanish sequence:**
+- Draw in: 20 frames (offset 1\u21920)
+- Hold: 10 frames
+- Draw out: fade opacity or continue offset
 
-**Fix:** In Phase 1 Discovery:
-1. Find project's actual components (buttons, cards, modals, inputs)
-2. Copy their styles/structure into Remotion components
-3. Match colors, fonts, shadows, border-radius exactly
+**Reusable component pattern:**
+- Props: path data (d), color, width, delay, type (underline/spark/circle/arrow)
+- Pre-defined path dictionaries work better than generating random coordinates
+- Positioning with top/left/scale/rotation props for text accents
+`;
+var ASSET_USAGE_GUIDELINES = `# Asset Usage & Optimization
 
-\`\`\`tsx
-// DON'T: Generic button
-<button style={{ background: 'blue' }}>Click</button>
+**For project-specific videos:** Study the project first - extract logos, colors, fonts, actual UI components. Recreate components pixel-perfect in Remotion (match exact colors, shadows, border-radius, fonts). Use project's actual branding and design system for authentic look.
 
-// DO: Match project's actual button
-<button style={{
-  background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
-  borderRadius: 8,
-  padding: '12px 24px',
-  boxShadow: '0 4px 14px rgba(99, 102, 241, 0.4)',
-  border: '1px solid rgba(255,255,255,0.1)',
-}}>Click</button>
-\`\`\`
+**CLI provides flexible asset search** - images and videos can be used creatively throughout compositions.
 
----
+**Video assets (from CLI video search):**
+- Full-screen backgrounds (with overlays/text)
+- Embedded in UI cards or windows alongside text
+- Picture-in-picture style elements
+- Background layers with reduced opacity
+- Transitional footage between scenes
 
-## 7. Missing Physics & Lighting
+**Image assets (from CLI image search):**
+- Scene backgrounds (static or with animation)
+- Embedded elements within compositions
+- UI component content (cards, panels)
+- Layered for depth and parallax effects
 
-**Problem:** Video feels flat, no depth or motion.
+**Dynamic backgrounds (Three.js/WebGL):**
+- Three.js/React Three Fiber for performance-optimized animated backgrounds
+- Particle systems, procedural gradients, geometric patterns
+- SVG animations for abstract shapes and patterns
+- WebGL shaders for dynamic effects
+- Combines well with static assets for depth
 
-**Checklist:**
-- [ ] Global light source defined (affects all shadows/gradients)
-- [ ] Camera rig with subtle drift/zoom
-- [ ] Spring physics on ALL entrances (no linear)
-- [ ] Staggered animations (never all at once)
-- [ ] Background orbs/particles moving
-- [ ] Noise overlay (opacity 0.02-0.05)
-- [ ] Vignette for depth
-`
-  }
-];
+**Best approach:** Mix CLI assets (images/videos) with generated elements (Three.js, SVG) for rich, performant compositions.
+`;
 
 // src/commands/skill/generate-video-skill.ts
 function generateVideoSkillContent(context) {
-  const { name, cmd: cmd2, displayName } = context;
+  const { name, cmd: cmd2 } = context;
   return `---
 name: ${name}-video
 description: Use when user asks to create videos (product demos, explainers, social content, promos). Handles video asset generation, Remotion implementation, and thumbnail embedding.
 ---
 
-# ${displayName} Video Creation CLI
-
-Create professional product videos directly from your terminal. The CLI generates AI-powered video assets (voiceover, music, images, stock videos) and provides tools for Remotion-based video production with React Three Fiber.
-
-**Stack:** Remotion (React video framework) + React Three Fiber (R3F) + Three.js for 3D/WebGL, particles, shaders, lighting.
-
-We create **elite product videos** (Stripe, Apple, Linear quality) using physics-based animation, dynamic lighting, and pixel-perfect UI components rebuilt from the real project \u2014 never boring screenshots or static images.
-
-**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
-
----
-
-## CRITICAL: Professional Composition Rules
-
-**These rules are MANDATORY for all marketing/product videos:**
-
-### \u274C NEVER DO:
-1. **Walls of text** - No dense paragraphs or lists longer than 3 lines
-2. **Flying/floating cards** - No random floating animations across the screen
-3. **Stretched layouts** - No elements awkwardly stretched to fill space
-4. **Truncated text** - Never show "Text that gets cut off..."
-5. **Information overload** - Max 1-2 key points visible at once
-6. **Amateur motion** - No PowerPoint-style "fly in from left/right"
-
-### \u2705 ALWAYS DO:
-1. **Hierarchy first** - One clear focal point per scene (headline OR stat OR visual, not all)
-2. **Breathing room** - Generous whitespace (min 100px padding around elements)
-3. **Purposeful motion** - Cards appear with subtle spring (0-20px translateY), not fly across screen
-4. **Readable text** - Max 2-3 lines per card, 24px+ font size
-5. **Grid alignment** - Use invisible grid (3-column or 4-column layout)
-6. **Professional entrance** - Elements fade + slight translate (15px max), hold for 2-3s, then exit
-
-### Composition Examples:
-
-**\u274C BAD - Wall of Text:**
-\`\`\`tsx
-// DON'T: 10 bullet points crammed in a card
-<Card>
-  <ul>
-    {[...10items].map(item => <li>{item.longText}...</li>)}
-  </ul>
-</Card>
-\`\`\`
-
-**\u2705 GOOD - Single Focus:**
-\`\`\`tsx
-// DO: One headline, one supporting stat
-<AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
-  <h1 style={{ fontSize: 72, marginBottom: 40 }}>12 hours wasted</h1>
-  <p style={{ fontSize: 28, opacity: 0.7 }}>per week on manual tasks</p>
-</AbsoluteFill>
-\`\`\`
-
-**\u274C BAD - Flying Cards:**
-\`\`\`tsx
-// DON'T: Cards flying from random positions
-<Card style={{
-  transform: \`translateX(\${interpolate(progress, [0,1], [-500, 0])}px)\` // Flies from left
-}} />
-\`\`\`
-
-**\u2705 GOOD - Subtle Entrance:**
-\`\`\`tsx
-// DO: Gentle spring entrance with minimal movement
-const progress = spring({ frame: frame - startFrame, fps, config: { damping: 20, stiffness: 100 }});
-<Card style={{
-  opacity: progress,
-  transform: \`translateY(\${interpolate(progress, [0,1], [15, 0])}px)\` // Subtle 15px drop
-}} />
-\`\`\`
-
-### Layout Grid System:
-
-**Use 12-column grid (like Bootstrap):**
-\`\`\`tsx
-const GRID = {
-  columns: 12,
-  gutter: 40,
-  padding: 120 // Edge padding
-};
-
-// Center 6 columns for main content
-const contentWidth = (1920 - (GRID.padding * 2) - (GRID.gutter * 5)) / 2;
-\`\`\`
+# ${name} Video Creation CLI
 
-**Positioning anchors:**
-- **Top-left:** Brand logo, context (10% from edges)
-- **Center:** Primary headline/stat/demo (50% transform)
-- **Bottom:** CTA or tagline (10% from bottom)
-- **Never:** Random floating between these zones
+Generate video assets (voiceover, music, images, stock videos) and render with Remotion.
 
 ---
 
 ## Prerequisites
 
-Before using this skill, ensure you have:
-
-1. **Load related skills:**
-   \`\`\`
-   remotion-best-practices
-   threejs-fundamentals
-   \`\`\`
-
-2. **Authenticate:**
-   \`\`\`bash
-   ${cmd2} login
-   \`\`\`
-
-3. **Remotion installed** (if creating videos):
-   \`\`\`bash
-   pnpm install remotion @remotion/cli
-   \`\`\`
-
----
-
-## Video Creation Workflow
-
-### Phase 0: Load Skills (MANDATORY)
-
-Before ANY video work, invoke these skills:
-\`\`\`
-remotion-best-practices
-threejs-fundamentals
-\`\`\`
-
-### Phase 1: Discovery
-
-Explore current directory silently:
-- Understand what the product does (README, docs, code)
-- Find branding: logo, colors, fonts
-- Find UI components to copy into Remotion (buttons, cards, modals, etc.) \u2014 rebuild pixel-perfect, no screenshots
-
-### Phase 2: Video Brief
-
-Present a brief outline (scenes \u22648s each, duration, assets found) and get user approval before production.
-
-### Phase 3: Production
-
-1. **Generate audio assets** - \`${cmd2} video create\` with scenes JSON
-   - IMPORTANT: Music is generated LAST after all voiceover/audio to ensure exact duration match
-2. **Scaffold OUTSIDE project** - \`cd .. && ${cmd2} video init my-video\`
-3. **Copy assets + UI components** from project into video project
-4. **Implement** - follow rules below
-
-### Phase 4: Render & Thumbnail (REQUIRED)
-
+**Authenticate:**
 \`\`\`bash
-# 1. Render the video (with voiceover and music already included)
-pnpm exec remotion render FullVideo
-
-# 2. ALWAYS embed thumbnail before delivering
-${cmd2} video thumbnail out/FullVideo.mp4 --frame 60
+${cmd2} login
 \`\`\`
 
-**Note:** Remotion videos include per-scene voiceovers and background music baked in during render.
-
 ---
 
-## Asset Generation
+## Video Creation Workflow
+
+### 1. Generate Assets
 
-Generate voiceover, music, and visual assets for each scene:
+Generate voiceover, music, and visual assets:
 
 \`\`\`bash
 cat <<SCENES | ${cmd2} video create --output ./public
@@ -4342,99 +3643,83 @@ cat <<SCENES | ${cmd2} video create --output ./public
     { 
       "name": "Hook", 
       "script": "Watch how we transformed this complex workflow into a single click.",
-      "imageQuery": "modern dashboard interface dark theme",
-      "videoQuery": "abstract tech particles animation"
+      "imageQuery": "modern dashboard interface dark theme"
     },
     { 
       "name": "Demo", 
-      "script": "Our AI analyzes your data in real-time, surfacing insights that matter.",
-      "imageQuery": "data visualization charts analytics"
-    },
-    { 
-      "name": "CTA", 
-      "script": "Start your free trial today. No credit card required.",
-      "imageQuery": "call to action button modern"
+      "script": "Our AI analyzes your data in real-time, surfacing insights that matter."
     }
   ],
-  "voice": "Kore",
-  "voiceSettings": {
-    "style": 0.6,
-    "stability": 0.4,
-    "speed": 0.95
-  },
-  "musicPrompt": "upbeat corporate, positive energy, modern synth"
+  "voice": "Kore"
 }
 SCENES
 \`\`\`
 
 **Output:**
-- \`public/audio/Hook.mp3\` - scene voiceovers
-- \`public/audio/music.mp3\` - background music (30s max)
-- \`public/video-manifest.json\` - timing and metadata
-- Stock images/videos (if requested)
+- \`public/audio/*.wav\` - scene voiceovers
+- \`public/audio/music.mp3\` - background music
+- \`public/video-manifest.json\` - timing, metadata, timeline
 
----
+### 2. Initialize Remotion (MANDATORY)
 
-## Core Video Rules
+Scaffold the template and copy assets:
 
-${VIDEO_RULE_CONTENTS.map((rule) => rule.content).join("\n\n---\n\n")}
+\`\`\`bash
+cd .. && ${cmd2} video init my-video
+cd my-video
+# Assets are now in public/ directory
+\`\`\`
+
+### 3. Render Video
 
-## Useful Commands
+**IMPORTANT:** Always version output files to avoid overwriting. Check existing files and increment version:
+- First render: \`out/video-v1.mp4\`
+- Re-render: \`out/video-v2.mp4\`, \`out/video-v3.mp4\`, etc.
 
+**For landscape videos (16:9):**
 \`\`\`bash
-# Generate video assets
-${cmd2} video create < scenes.json
-cat scenes.json | ${cmd2} video create --output ./public
+pnpm exec remotion render FullVideo out/video-v1.mp4
+\`\`\`
 
-# Initialize Remotion project
-${cmd2} video init my-video
+**For vertical videos (9:16) with captions:**
+\`\`\`bash
+pnpm exec remotion render CaptionedVideo out/tiktok-v1.mp4 \\
+  --props='{"timeline":'$(cat public/video-manifest.json | jq -c .timeline)',"showCaptions":true}'
+\`\`\`
 
-# Embed thumbnail
-${cmd2} video thumbnail out/video.mp4 --frame 60
+### 4. Generate & Inject Thumbnail
 
-# Search for stock assets
-${cmd2} images search "mountain landscape" --limit 10
-${cmd2} videos search "ocean waves" --limit 5
+${THUMBNAIL_RULES}
 
-# Generate audio
-${cmd2} audio generate "Your script here" --voice Kore
-${cmd2} music generate "upbeat corporate" --duration 30
+\`\`\`bash
+${cmd2} video thumbnail out/video.mp4 --image out/thumb.png
 \`\`\`
 
 ---
 
-## Best Practices
-
-1. **Keep scenes under 8 seconds** without cuts or major action
-2. **Use spring physics** for all animations, never linear
-3. **Rebuild UI components** in React/CSS, no screenshots
-4. **Test with thumbnail embedding** before delivering
-5. **Music volume at 30%** (30-40% less loud than voice)
-6. **Read all video rules** in Phase 0 before implementation
+${MOTION_DESIGN_GUIDELINES}
 
 ---
 
-## Troubleshooting
+${SVG_ANIMATION_GUIDELINES}
+
+---
 
-If you encounter issues:
-- Check authentication: \`${cmd2} whoami\`
-- Verify asset generation: check \`video-manifest.json\`
-- Voiceover flat: increase style (0.5-0.7), decrease stability (0.3-0.5)
-- Duration mismatch: adjust \`voiceSettings.speed\` or add padding in Remotion
+${ASSET_USAGE_GUIDELINES}
 
-For detailed troubleshooting, see "Known Issues" section above.
+---
 `;
 }
 
 // src/commands/skill/generate-presentation-skill.ts
 function generatePresentationSkillContent(context) {
-  const { name, cmd: cmd2, displayName } = context;
+  const { name, cmd: cmd2 } = context;
   return `---
 name: ${name}-presentation
 description: Use when user asks to create presentations (slides, decks, pitch decks). Generates AI-powered presentations with structured content and professional design.
 ---
 
-# ${displayName} Presentation CLI
+# ${name} Presentation Creation CLI
 
 Create professional presentations (slides, decks, pitch decks) directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content. Also supports searching for stock images and videos.
 
@@ -4701,9 +3986,10 @@ function getSupportedEditorNames() {
 // src/commands/skill/index.ts
 var SKILL_TYPES = ["main", "video", "presentation"];
 var skillContext = {
-  name: brand.name,
   cmd: brand.commands[0],
-  displayName: brand.displayName
+  pkg: brand.packageName,
+  url: brand.apiUrl,
+  name: brand.displayName
 };
 var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skills for AI coding assistants`).addHelpText(
   "after",
@@ -4835,7 +4121,8 @@ skillCommand.command("uninstall").description(`Remove ${brand.displayName} skill
 import { Command as Command15 } from "commander";
 import ora8 from "ora";
 import { writeFile as writeFile2 } from "fs/promises";
-var generateCommand = new Command15("generate").description("Generate speech from text").requiredOption("-t, --text <text>", "Text to convert to speech").requiredOption("-o, --output <path>", "Output file path").option("-v, --voice <voice>", "Voice name or ID (e.g., Kore, Rachel, alloy)").option("-p, --provider <provider>", "Provider: gemini, elevenlabs, openai").option("-m, --model <model>", "Model (provider-specific)").option("-s, --speed <speed>", "Speech speed 0.25-4.0 (default: 1.0)").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var DEFAULT_ELEVENLABS_VOICE_ID = "21m00Tcm4TlvDq8ikWAM";
+var generateCommand = new Command15("generate").description("Generate speech from text (uses ElevenLabs)").requiredOption("-t, --text <text>", "Text to convert to speech").requiredOption("-o, --output <path>", "Output file path").option("--voice-id <voiceId>", `ElevenLabs voice ID (default: ${DEFAULT_ELEVENLABS_VOICE_ID})`).option("-m, --model <model>", "Model (provider-specific)").option("-s, --speed <speed>", "Speech speed 0.25-4.0 (default: 1.0)").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora8("Generating speech...").start() : null;
   let speed;
@@ -4848,11 +4135,13 @@ var generateCommand = new Command15("generate").description("Generate speech fro
     }
   }
   try {
+    const voiceId = options.voiceId || DEFAULT_ELEVENLABS_VOICE_ID;
     const result = await generateSpeech({
       text: options.text,
       options: {
-        provider: options.provider,
-        voice: options.voice,
+        provider: "elevenlabs",
+        // Currently only ElevenLabs is supported
+        voiceId,
         model: options.model,
         speed
       }
@@ -4885,31 +4174,28 @@ var generateCommand = new Command15("generate").description("Generate speech fro
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var voicesCommand = new Command15("voices").description("List available voices").option("-p, --provider <provider>", "Filter by provider: gemini, elevenlabs, openai").option("-f, --format <format>", "Output format: human, json", "human").action(async (options) => {
+var voicesCommand = new Command15("voices").description("List available voices (currently only ElevenLabs)").option("-f, --format <format>", "Output format: human, json", "human").action(async (options) => {
   const spinner = options.format === "human" ? ora8("Fetching voices...").start() : null;
   try {
     const result = await getVoices();
     spinner?.stop();
+    const provider = "elevenlabs";
     if (options.format === "json") {
-      if (options.provider) {
-        const providerVoices = result.voices[options.provider];
-        printJson(providerVoices || []);
-      } else {
-        printJson(result.voices);
-      }
+      const providerVoices = result.voices[provider];
+      printJson(providerVoices || []);
       return;
     }
-    const providers = options.provider ? [options.provider] : ["gemini", "elevenlabs", "openai"];
-    for (const provider of providers) {
-      const voices = result.voices[provider];
-      if (!voices || voices.length === 0) continue;
-      console.log();
-      console.log(`${provider.toUpperCase()} Voices:`);
-      console.log("-".repeat(50));
-      for (const voice of voices) {
-        console.log(`  ${voice.name} (${voice.id})`);
-        console.log(`    ${voice.description}`);
-      }
+    const voices = result.voices[provider];
+    if (!voices || voices.length === 0) {
+      info("No ElevenLabs voices available");
+      return;
+    }
+    console.log();
+    console.log(`ELEVENLABS Voices:`);
+    console.log("-".repeat(50));
+    for (const voice of voices) {
+      console.log(`  ${voice.name} (${voice.id})`);
+      console.log(`    ${voice.description}`);
     }
   } catch (err) {
     spinner?.stop();
@@ -5288,6 +4574,13 @@ function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, time
     const proportion = wordCount / totalWords;
     const durationInSeconds = totalDuration * proportion;
     const durationInFrames = Math.round(durationInSeconds * fps);
+    const chars = text.split("");
+    const charDuration = durationInSeconds / chars.length;
+    const approximateTimestamps = {
+      characters: chars,
+      characterStartTimesSeconds: chars.map((_, i) => i * charDuration),
+      characterEndTimesSeconds: chars.map((_, i) => (i + 1) * charDuration)
+    };
     const section = {
       id: index + 1,
       text,
@@ -5295,7 +4588,9 @@ function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, time
       startTime: currentTime,
       endTime: currentTime + durationInSeconds,
       durationInSeconds,
-      durationInFrames
+      durationInFrames,
+      timestamps: approximateTimestamps
+      // Always include timestamps (approximate if needed)
     };
     currentTime += durationInSeconds;
     return section;
@@ -5322,6 +4617,13 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
     const endTime = characterEndTimesSeconds[Math.min(endCharIndex, characterEndTimesSeconds.length - 1)] || startTime + 1;
     const durationInSeconds = endTime - startTime;
     const durationInFrames = Math.round(durationInSeconds * fps);
+    const sectionTimestamps = {
+      characters: characters.slice(startCharIndex, endCharIndex + 1),
+      characterStartTimesSeconds: characterStartTimesSeconds.slice(startCharIndex, endCharIndex + 1).map((t) => t - startTime),
+      // Make relative to section start
+      characterEndTimesSeconds: characterEndTimesSeconds.slice(startCharIndex, endCharIndex + 1).map((t) => t - startTime)
+      // Make relative to section start
+    };
     results.push({
       id: i + 1,
       text: sectionText,
@@ -5329,7 +4631,9 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
       startTime,
       endTime,
       durationInSeconds,
-      durationInFrames
+      durationInFrames,
+      timestamps: sectionTimestamps
+      // Add section-specific timestamps
     });
   }
   return results;
@@ -5354,6 +4658,64 @@ async function readStdin2() {
 function toFilename(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
+function createTimelineFromScenes(scenes) {
+  const timeline = {
+    shortTitle: "Video",
+    elements: [],
+    audio: [],
+    text: []
+  };
+  let zoomIn = true;
+  scenes.forEach((scene) => {
+    const startMs = scene.startTime * 1e3;
+    const endMs = scene.endTime * 1e3;
+    const durationMs = scene.durationInSeconds * 1e3;
+    if (scene.imagePath) {
+      timeline.elements.push({
+        startMs,
+        endMs,
+        imageUrl: scene.imagePath,
+        enterTransition: "blur",
+        exitTransition: "blur",
+        animations: [{
+          type: "scale",
+          from: zoomIn ? 1.3 : 1,
+          to: zoomIn ? 1 : 1.3,
+          startMs: 0,
+          endMs: durationMs
+        }]
+      });
+      zoomIn = !zoomIn;
+    } else if (scene.videoPath) {
+      timeline.elements.push({
+        startMs,
+        endMs,
+        videoUrl: scene.videoPath,
+        enterTransition: "blur",
+        exitTransition: "blur",
+        animations: []
+      });
+    }
+    if (scene.audioPath) {
+      timeline.audio.push({
+        startMs,
+        endMs,
+        audioUrl: scene.audioPath
+      });
+    }
+    if (scene.timestamps) {
+      timeline.text.push({
+        startMs,
+        endMs,
+        text: scene.text,
+        position: "bottom",
+        animations: [],
+        timestamps: scene.timestamps
+      });
+    }
+  });
+  return timeline;
+}
 async function downloadFile3(url, outputPath) {
   if (url.startsWith("data:")) {
     const matches = url.match(/^data:[^;]+;base64,(.+)$/);
@@ -5383,7 +4745,7 @@ function getExtension(url) {
   }
   return "jpg";
 }
-var createCommand2 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var createCommand3 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing...").start() : null;
   try {
@@ -5428,21 +4790,27 @@ var createCommand2 = new Command19("create").description("Create video assets (v
         info(`Processing ${scenesInput.scenes.length} scenes...`);
         spinner?.start();
       }
+      const ttsRequests = scenesInput.scenes.map((scene, i) => ({
+        text: scene.script,
+        id: `scene-${i}`
+      }));
+      if (spinner) spinner.text = "Generating speech for all scenes...";
+      const batchResult = await generateSpeechBatch({
+        texts: ttsRequests,
+        options: {
+          voice,
+          voiceSettings: scenesInput.voiceSettings
+        }
+      });
+      totalCost += batchResult.totalCost;
       let currentTime = 0;
       for (let i = 0; i < scenesInput.scenes.length; i++) {
         const scene = scenesInput.scenes[i];
         const filename = toFilename(scene.name);
-        if (spinner) spinner.text = `[${scene.name}] Generating speech...`;
-        const ttsResult = await generateSpeech({
-          text: scene.script,
-          options: {
-            voice,
-            voiceSettings: scenesInput.voiceSettings
-          }
-        });
+        const ttsResult = batchResult.results[i];
+        if (spinner) spinner.text = `[${scene.name}] Saving audio...`;
         const audioPath = join2(audioDir, `${filename}.${ttsResult.format}`);
         await writeFile5(audioPath, ttsResult.audioData);
-        totalCost += ttsResult.cost;
         const durationInSeconds = ttsResult.duration;
         const durationInFrames = Math.round(durationInSeconds * DEFAULT_FPS);
         const sceneData = {
@@ -5454,7 +4822,9 @@ var createCommand2 = new Command19("create").description("Create video assets (v
           endTime: currentTime + durationInSeconds,
           durationInSeconds,
           durationInFrames,
-          audioPath: `audio/${filename}.${ttsResult.format}`
+          audioPath: `audio/${filename}.${ttsResult.format}`,
+          timestamps: ttsResult.timestamps
+          // Character-level timestamps for captions
         };
         if (scene.imageQuery) {
           if (spinner) spinner.text = `[${scene.name}] Searching image...`;
@@ -5578,66 +4948,93 @@ var createCommand2 = new Command19("create").description("Create video assets (v
         spinner?.start();
       }
     }
-    const musicDuration = Math.min(30, Math.ceil(totalDuration));
+    if (spinner) spinner.text = "Creating timeline...";
+    const timeline = createTimelineFromScenes(scenes);
+    const videoEndTimeMs = Math.max(
+      timeline.audio.length > 0 ? Math.max(...timeline.audio.map((a) => a.endMs)) : 0,
+      timeline.text.length > 0 ? Math.max(...timeline.text.map((t) => t.endMs)) : 0,
+      timeline.elements.length > 0 ? Math.max(...timeline.elements.map((e) => e.endMs)) : 0
+    );
+    const actualVideoDuration = videoEndTimeMs / 1e3;
+    const musicDuration = Math.min(30, Math.ceil(actualVideoDuration));
     console.log(`[Music Generation] Requesting music:`, {
       prompt: musicPrompt,
       requestedDuration: musicDuration,
-      totalAudioDuration: totalDuration
-    });
-    if (spinner) spinner.text = "Generating music...";
-    let musicResult = await generateMusic({
-      prompt: musicPrompt,
-      duration: musicDuration
-    });
-    if (musicResult.status !== "completed" && musicResult.status !== "failed") {
-      if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
-      musicResult = await pollForCompletion(
-        () => checkMusicStatus(musicResult.requestId),
-        60,
-        2e3
-      );
-    }
-    if (musicResult.status === "failed") {
-      spinner?.stop();
-      error(`Music generation failed: ${musicResult.error || "Unknown error"}`);
-      process.exit(EXIT_CODES.GENERAL_ERROR);
-    }
-    const musicPath = join2(audioDir, "music.mp3");
-    if (musicResult.audioUrl) {
-      await downloadFile3(musicResult.audioUrl, musicPath);
-    }
-    totalCost += musicResult.cost || 0;
-    const actualMusicDuration = musicResult.duration || musicDuration;
-    console.log(`[Music Generation] Received music:`, {
-      requestedDuration: musicDuration,
-      returnedDuration: musicResult.duration,
-      actualUsedDuration: actualMusicDuration,
       totalAudioDuration: totalDuration,
-      difference: actualMusicDuration - totalDuration,
-      audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
+      actualVideoDuration,
+      timelineDurationMs: videoEndTimeMs
     });
-    const musicInfo = {
-      path: "audio/music.mp3",
-      duration: actualMusicDuration,
-      prompt: musicPrompt,
-      cost: musicResult.cost || 0
-    };
-    if (format === "human") {
-      spinner?.stop();
-      success(`Music: ${musicPath} (${musicInfo.duration}s)`);
-      if (actualMusicDuration < totalDuration) {
-        warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${totalDuration.toFixed(1)}s).`);
-        warn(`Consider using audio looping or extending music in Remotion.`);
+    let musicInfo;
+    if (musicDuration < 3) {
+      if (format === "human") {
+        spinner?.stop();
+        warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
+        warn(`Skipping music generation...`);
+        spinner?.start();
+      }
+    } else {
+      try {
+        if (spinner) spinner.text = "Generating music...";
+        let musicResult = await generateMusic({
+          prompt: musicPrompt,
+          duration: musicDuration
+        });
+        if (musicResult.status !== "completed" && musicResult.status !== "failed") {
+          if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
+          musicResult = await pollForCompletion(
+            () => checkMusicStatus(musicResult.requestId),
+            60,
+            2e3
+          );
+        }
+        if (musicResult.status === "failed") {
+          throw new Error(musicResult.error || "Unknown error");
+        }
+        const musicPath = join2(audioDir, "music.mp3");
+        if (musicResult.audioUrl) {
+          await downloadFile3(musicResult.audioUrl, musicPath);
+        }
+        totalCost += musicResult.cost || 0;
+        const actualMusicDuration = musicResult.duration || musicDuration;
+        console.log(`[Music Generation] Received music:`, {
+          requestedDuration: musicDuration,
+          returnedDuration: musicResult.duration,
+          actualUsedDuration: actualMusicDuration,
+          totalAudioDuration: totalDuration,
+          difference: actualMusicDuration - totalDuration,
+          audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
+        });
+        musicInfo = {
+          path: "audio/music.mp3",
+          duration: actualMusicDuration,
+          prompt: musicPrompt,
+          cost: musicResult.cost || 0
+        };
+        if (format === "human") {
+          spinner?.stop();
+          success(`Music: ${musicPath} (${musicInfo.duration}s)`);
+          if (actualMusicDuration < actualVideoDuration) {
+            warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
+            warn(`Consider using audio looping or extending music in Remotion.`);
+          }
+          spinner?.start();
+        }
+      } catch (musicError) {
+        spinner?.stop();
+        warn(`Music generation failed: ${musicError.message}`);
+        warn(`Continuing without background music...`);
+        if (spinner && format === "human") spinner?.start();
       }
-      spinner?.start();
     }
     if (spinner) spinner.text = "Writing manifest...";
-    const totalDurationInFrames = Math.round(totalDuration * DEFAULT_FPS);
+    const totalDurationInFrames = Math.round(actualVideoDuration * DEFAULT_FPS);
     const manifest = {
       music: musicInfo,
       images: allImages,
       videos: allVideos,
       scenes,
+      timeline,
+      // Include Remotion timeline in manifest
       totalDurationInFrames,
       fps: DEFAULT_FPS,
       totalCost,
@@ -5666,7 +5063,7 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       ].filter(Boolean).join(", ");
       info(`  - ${scene.name}: ${scene.durationInSeconds.toFixed(1)}s [${assets}]`);
     }
-    info(`Music: ${musicInfo.path} (${musicInfo.duration}s)`);
+    info(`Music: ${musicInfo?.path} (${musicInfo?.duration}s)`);
     info(`Manifest: ${manifestPath}`);
     console.log();
     info(`Total cost: $${totalCost.toFixed(4)}`);
@@ -5791,9 +5188,6 @@ var initCommand = new Command19("init").description("Create a new Remotion video
         ).replace(
           /export const VIDEO_HEIGHT = 1080;/,
           "export const VIDEO_HEIGHT = 1920; // TikTok 9:16"
-        ).replace(
-          /export const VIDEO_FPS = 60;/,
-          "export const VIDEO_FPS = 30; // TikTok standard"
         );
         await writeFile5(constantsPath, constantsContent, "utf-8");
         if (format === "human") {
@@ -5824,7 +5218,7 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     if (options.type === "tiktok") {
       info("Format: TikTok/Reels/Shorts (1080x1920 @ 30fps)");
     } else {
-      info("Format: Landscape (1920x1080 @ 60fps)");
+      info("Format: Landscape (1920x1080 @ 30fps)");
     }
     console.log();
     info("Next steps:");
@@ -5982,10 +5376,10 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2).addCommand(thumbnailCommand);
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
 // src/index.ts
-var VERSION = "0.1.10";
+var VERSION = "0.1.12";
 var program = new Command20();
 var cmdName = brand.commands[0];
 program.name(cmdName).description(brand.description).version(VERSION, "-v, --version", "Show version number").option("--debug", "Enable debug logging").option("--no-color", "Disable colored output").configureOutput({