vueseq 0.1.2 → 0.2.0

package/README.md

@@ -15,48 +15,97 @@ Render Vue components with GSAP animations to video. Write standard Vue + GSAP c
 - ✅ **Simple CLI** - One command to render your video
 - ✅ **Programmatic API** - Integrate into your build pipeline
 - ✅ **Full GSAP Power** - All easing, timelines, and plugins work
+- ✅ **Parallel Rendering** - Distributed capture across CPU cores (20x faster)
+- ✅ **In-Browser Capture** - Zero-copy absolute performance
+- ✅ **Auto-Scaling** - Automatically utilizes all available CPU cores
+- ✅ **WebCodecs Encoding** - Hardware-accelerated H.264 encoding, no FFmpeg required
 
 ## Demo
 
-
-
 https://github.com/user-attachments/assets/84d01c02-4b4f-4d86-879e-720a7e367967
 
-
-
-*This video was rendered with VueSeq from [examples/HelloWorld.vue](./examples/HelloWorld.vue)*
+_This video was rendered with VueSeq from [examples/Showcase.vue](./examples/Showcase.vue)_
 
 ## What Can You Build?
 
 **Your app. As a video. Using your actual components.**
 
-Install VueSeq into your Vue project and create stunning videos that perfectly match your brand—because they *are* your brand. No recreating UIs in After Effects. No screen recording artifacts. Just your components, animated with GSAP, rendered to pixel-perfect video.
+Install VueSeq into your Vue project and create stunning videos that perfectly match your brand—because they _are_ your brand. No recreating UIs in After Effects. No screen recording artifacts. Just your components, animated with GSAP, rendered to pixel-perfect video.
 
 ### 🎬 App Showcases & Demos
+
 Create promotional videos using your real UI components. Product tours, feature walkthroughs, "What's New in v2.0" announcements—all with your exact design system, your exact colors, your exact components.
 
 ### 📱 Social Media Content
+
 Generate short-form videos for Twitter, LinkedIn, Instagram. Show off a feature in 15 seconds. Your followers see your actual product, not a mockup.
 
-### 📚 Documentation & Tutorials  
+### 📚 Documentation & Tutorials
+
 Animate how your features work. Show state transitions, user flows, component interactions. Embed videos in your docs that never go stale—regenerate them when your UI changes.
 
 ### 📊 Data Visualizations
+
 Animated charts, dashboards, infographics. Watch your bar charts grow, your line graphs draw, your data come alive.
 
+### 🎓 Educational Videos
+
+Create animated explainers, course content, and training materials. Complex concepts become clear with step-by-step animated infographics and interactive walkthroughs.
+
 ### 🎨 Design System Demos
-Showcase your component library in motion. Let designers and developers *see* how components animate, transition, and interact.
+
+Showcase your component library in motion. Let designers and developers _see_ how components animate, transition, and interact.
 
 ---
 
 **The idea is simple:** If you can build it in Vue, you can render it to video. One command. Deterministic output. Every time.
 
+## Integration Modes
+
+### 🔌 Add to Your Existing App
+
+Install VueSeq into your Vue project and create videos using your existing components and design system. Import your buttons, cards, charts—anything you've already built. Your videos will match your app perfectly because they _are_ your app.
+
+```bash
+npm install vueseq
+# Create a video component that imports your existing components
+npx vueseq src/videos/ProductDemo.vue -o demo.mp4
+```
+
+### 🤖 Programmatic / AI-Generated Videos
+
+Use the API to generate videos programmatically. Perfect for:
+
+- **AI pipelines**: Generate videos from LLM-created storyboards
+- **Automated content**: Create personalized videos at scale
+- **CI/CD integration**: Regenerate demo videos on every release
+
+```javascript
+import { renderToMp4 } from 'vueseq'
+
+await renderToMp4({
+  input: '/path/to/GeneratedVideo.vue',
+  output: 'output.mp4',
+})
+```
+
+### 📦 Standalone Projects
+
+Create a dedicated video project from scratch. Ideal for marketing teams, content creators, or anyone who wants to produce videos without an existing Vue app.
+
+```bash
+mkdir my-video && cd my-video
+npm init -y && npm install vueseq
+# Create your video component and render
+npx vueseq Video.vue -o video.mp4
+```
 
 ## Philosophy
 
-VueSeq is intentionally minimal. We bundle only the essentials: **Vue**, **GSAP**, **Playwright**, and **Vite**.
+VueSeq is intentionally minimal. We bundle only the essentials: **Vue**, **GSAP**, **Playwright**, **Vite**, and **Mediabunny** (for WebCodecs-based encoding).
 
 We don't include CSS frameworks (Tailwind, UnoCSS, etc.) because:
+
 - Every developer has their preferred styling approach
 - Your project likely already has styling configured
 - Video components are self-contained—vanilla CSS works great
@@ -73,10 +122,7 @@ npm install vueseq
 ### Requirements
 
 - Node.js 18+
-- FFmpeg (for video encoding)
-  - macOS: `brew install ffmpeg`
-  - Ubuntu/Debian: `sudo apt install ffmpeg`
-  - Windows: Download from [ffmpeg.org](https://ffmpeg.org/download.html)
+- A modern Chromium browser (Playwright will download this automatically)
 
 ## Quick Start
 
@@ -95,25 +141,29 @@ const textRef = ref(null)
 
 onMounted(() => {
   const tl = gsap.timeline()
-  
-  tl.from(boxRef.value, { 
-    x: -200, 
-    opacity: 0, 
+
+  tl.from(boxRef.value, {
+    x: -200,
+    opacity: 0,
     duration: 1,
-    ease: 'power2.out'
+    ease: 'power2.out',
   })
-  
-  tl.from(textRef.value, {
-    y: 50,
-    opacity: 0,
-    duration: 0.8,
-    ease: 'back.out'
-  }, '-=0.3')
-  
+
+  tl.from(
+    textRef.value,
+    {
+      y: 50,
+      opacity: 0,
+      duration: 0.8,
+      ease: 'back.out',
+    },
+    '-=0.3',
+  )
+
   tl.to(boxRef.value, {
     rotation: 360,
     duration: 2,
-    ease: 'elastic.out(1, 0.3)'
+    ease: 'elastic.out(1, 0.3)',
   })
 })
 </script>
@@ -162,6 +212,15 @@ span {
 npx vueseq examples/HelloWorld.vue -o examples/hello.mp4
 ```
 
+### 3. Parallel Rendering (Recommended for Speed)
+
+For complex animations or long videos, use parallel rendering to utilize all CPU cores:
+
+```bash
+npx vueseq examples/Showcase.vue --parallel
+```
+*Automatically detects CPU cores and scales accordingly (e.g., 60s for a 20min render).*
+
 That's it! Duration is auto-detected from your timeline. Your video will be rendered at 1920x1080, 30fps.
 
 ## CLI Options
@@ -175,6 +234,12 @@ Options:
   -f, --fps      Frames per second (default: 30)
   -w, --width    Video width in pixels (default: 1920)
   -H, --height   Video height in pixels (default: 1080)
+  --parallel     Use parallel rendering (multi-process) [Recommended]
+  --workers      Number of workers (default: auto-detected, use with --parallel)
+  --optimized    Use optimized single-page in-browser capture
+  --gpu-backend  Force GPU backend: vulkan, metal, d3d11, software (default: auto)
+  --monitor-memory Log memory usage
+  -v, --version  Show version number
   --help         Show help message
 ```
 
@@ -193,41 +258,39 @@ npx vueseq examples/Showcase.vue -d 10 -o examples/partial.mp4
 # 4K at 60fps
 npx vueseq examples/HelloWorld.vue -f 60 -w 3840 -H 2160 -o examples/hello-4k.mp4
 
-# Square for social media
-npx vueseq examples/HelloWorld.vue -w 1080 -H 1080 -o examples/hello-square.mp4
+# Max Performance (Parallel + Auto-Scaling)
+npx vueseq examples/Showcase.vue --parallel -o examples/showcase.mp4
+
+# Dedicated Optimized Single-Page (Low Specs)
+npx vueseq examples/Showcase.vue --optimized -o examples/showcase.mp4
+
+# Force Vulkan Backend
+npx vueseq examples/Showcase.vue --gpu-backend vulkan --parallel
+
+# 4K at 60fps
+npx vueseq examples/HelloWorld.vue -f 60 -w 3840 -H 2160 -o examples/hello-4k.mp4
 ```
 
 ## Programmatic API
 
 ```javascript
-import { renderToMp4, renderFrames, encodeVideo } from 'vueseq'
+import { renderToMp4, isWebCodecsSupported } from 'vueseq'
+
+// Check if WebCodecs is supported
+const supported = await isWebCodecsSupported()
 
-// Render directly to MP4
+// Render directly to MP4 (WebCodecs encoding)
 await renderToMp4({
   input: '/path/to/MyVideo.vue',
-  duration: 5,
+  duration: 5, // Optional: auto-detected from timeline if not provided
   fps: 30,
   width: 1920,
   height: 1080,
   output: './output.mp4',
   onProgress: ({ frame, total, percent }) => {
     console.log(`Rendering: ${percent}%`)
-  }
-})
-
-// Or render frames separately for custom processing
-const { framesDir, totalFrames, cleanup } = await renderFrames({
-  input: '/path/to/MyVideo.vue',
-  duration: 5,
-  fps: 30,
-  width: 1920,
-  height: 1080
+  },
 })
-
-// Process frames here...
-
-await encodeVideo({ framesDir, output: './output.mp4', fps: 30 })
-await cleanup()
 ```
 
 ## How It Works
@@ -238,9 +301,9 @@ VueSeq uses GSAP's deterministic timeline control:
 2. **Playwright** opens it in headless Chrome
 3. For each frame, GSAP's `globalTimeline.seek(time)` jumps to the exact moment
 4. **Screenshot** captures the frame
-5. **FFmpeg** encodes all frames to video
+5. **WebCodecs API** (via Mediabunny) encodes frames to video with hardware acceleration
 
-This is deterministic because `seek()` applies all GSAP values synchronously—given the same time, you get the exact same DOM state every time.
+This is deterministic because `seek()` applies all GSAP values synchronously—given the same time, you get the exact same DOM state every time. The WebCodecs API provides hardware-accelerated H.264 encoding without requiring FFmpeg.
 
 ## Multi-Scene Videos
 
@@ -249,16 +312,16 @@ For longer videos with multiple scenes, use nested GSAP timelines:
 ```javascript
 onMounted(() => {
   const master = gsap.timeline()
-  
+
   master.add(createIntro())
-  master.add(createMainContent(), '-=0.5')  // Overlap for smooth transition
+  master.add(createMainContent(), '-=0.5') // Overlap for smooth transition
   master.add(createOutro())
 })
 
 function createIntro() {
   const tl = gsap.timeline()
   tl.from('.title', { opacity: 0, duration: 1 })
-  tl.to({}, { duration: 2 })  // Hold
+  tl.to({}, { duration: 2 }) // Hold
   tl.to('.scene-intro', { opacity: 0, duration: 0.5 })
   return tl
 }

package/bin/cli.js

@@ -2,78 +2,109 @@
 
 /**
  * VueSeq CLI
- * 
+ *
  * Render Vue + GSAP components to video.
- * 
+ *
  * Usage:
  *   vueseq <Video.vue> [options]
- * 
+ *
  * Example:
  *   vueseq MyAnimation.vue -d 5 -o my-video.mp4
  */
 
 import { parseArgs } from 'node:util'
 import { resolve, extname } from 'node:path'
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 
 // Show help text
 function showHelp() {
-    console.log(`
+  console.log(`
 VueSeq - Render Vue + GSAP components to video
 
 USAGE:
   vueseq <Video.vue> [options]
 
 OPTIONS:
-  -o, --output   Output file (default: ./output.mp4)
-  -d, --duration Duration in seconds (auto-detected if not specified)
-  -f, --fps      Frames per second (default: 30)
-  -w, --width    Video width in pixels (default: 1920)
-  -H, --height   Video height in pixels (default: 1080)
-  --help         Show this help message
+  -o, --output      Output file (default: ./output.mp4)
+  -d, --duration    Duration in seconds (auto-detected if not specified)
+  -f, --fps         Frames per second (default: 30)
+  -w, --width       Video width in pixels (default: 1920)
+  -H, --height      Video height in pixels (default: 1080)
+  --gpu-backend     GPU backend: auto, vulkan, egl, metal, d3d11, software (default: auto)
+  --optimized       Use optimized in-browser capture (eliminates PNG overhead)
+  --parallel        Use parallel frame capture with multiple browser pages
+  --workers         Number of parallel workers (default: auto-detected cores)
+  --monitor-memory  Log memory usage during rendering
+  --benchmark       Compare original vs optimized render methods
+  -v, --version     Show version number
+  --help            Show this help message
 
 EXAMPLE:
   npx vueseq examples/HelloWorld.vue -o examples/hello.mp4
-  npx vueseq examples/Showcase.vue -w 1280 -H 720 -f 60 -o examples/showcase.mp4
+  npx vueseq examples/HelloWorld.vue --optimized -o examples/hello.mp4
+  npx vueseq examples/Showcase.vue --parallel --workers 4 --monitor-memory
+
+GPU DIAGNOSTICS:
+  node test-gpu.js              # Run full GPU diagnostics
+  node test-gpu.js --benchmark  # Include render benchmarks
 `)
 }
 
 // Parse command line arguments
 const { values, positionals } = parseArgs({
-    allowPositionals: true,
-    options: {
-        output: { type: 'string', short: 'o', default: './output.mp4' },
-        duration: { type: 'string', short: 'd' },
-        fps: { type: 'string', short: 'f', default: '30' },
-        width: { type: 'string', short: 'w', default: '1920' },
-        height: { type: 'string', short: 'H', default: '1080' },
-        help: { type: 'boolean' }
-    }
+  allowPositionals: true,
+  options: {
+    output: { type: 'string', short: 'o', default: './output.mp4' },
+    duration: { type: 'string', short: 'd' },
+    fps: { type: 'string', short: 'f', default: '30' },
+    width: { type: 'string', short: 'w', default: '1920' },
+    height: { type: 'string', short: 'H', default: '1080' },
+    'gpu-backend': { type: 'string', default: 'auto' },
+    optimized: { type: 'boolean', default: false },
+    parallel: { type: 'boolean', default: false },
+    workers: { type: 'string' },
+    'monitor-memory': { type: 'boolean', default: false },
+    benchmark: { type: 'boolean', default: false },
+    version: { type: 'boolean', short: 'v' },
+    help: { type: 'boolean' },
+  },
 })
 
+// Show version if requested
+if (values.version) {
+  try {
+    const pkgPath = new URL('../package.json', import.meta.url)
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
+    console.log(`vueseq v${pkg.version}`)
+  } catch (e) {
+    console.error('Error reading version:', e.message)
+  }
+  process.exit(0)
+}
+
 // Show help if requested
 if (values.help) {
-    showHelp()
-    process.exit(0)
+  showHelp()
+  process.exit(0)
 }
 
 // Validate input file
 const input = positionals[0]
 if (!input) {
-    console.error('Error: Please specify a .vue file\n')
-    showHelp()
-    process.exit(1)
+  console.error('Error: Please specify a .vue file\n')
+  showHelp()
+  process.exit(1)
 }
 
 const inputPath = resolve(input)
 if (!existsSync(inputPath)) {
-    console.error(`Error: File not found: ${inputPath}`)
-    process.exit(1)
+  console.error(`Error: File not found: ${inputPath}`)
+  process.exit(1)
 }
 
 if (extname(inputPath) !== '.vue') {
-    console.error('Error: Input must be a .vue file')
-    process.exit(1)
+  console.error('Error: Input must be a .vue file')
+  process.exit(1)
 }
 
 // Parse duration if provided
@@ -81,13 +112,13 @@ let duration = null
 let durationAuto = false
 
 if (values.duration) {
-    duration = parseFloat(values.duration)
-    if (isNaN(duration) || duration <= 0) {
-        console.error('Error: Duration must be a positive number')
-        process.exit(1)
-    }
+  duration = parseFloat(values.duration)
+  if (isNaN(duration) || duration <= 0) {
+    console.error('Error: Duration must be a positive number')
+    process.exit(1)
+  }
 } else {
-    durationAuto = true
+  durationAuto = true
 }
 
 // Parse numeric options
@@ -96,59 +127,134 @@ const width = parseInt(values.width)
 const height = parseInt(values.height)
 
 if (isNaN(fps) || fps <= 0) {
-    console.error('Error: FPS must be a positive number')
-    process.exit(1)
+  console.error('Error: FPS must be a positive number')
+  process.exit(1)
 }
 
 if (isNaN(width) || width <= 0 || isNaN(height) || height <= 0) {
-    console.error('Error: Width and height must be positive numbers')
-    process.exit(1)
+  console.error('Error: Width and height must be positive numbers')
+  process.exit(1)
 }
 
 // Import renderer and start rendering
 try {
-    const { renderToMp4 } = await import('../src/renderer/encode.js')
-    const { getTimelineDuration } = await import('../src/renderer/render.js')
-
-    // Auto-detect duration if not provided
-    if (durationAuto) {
-        console.log(`\nVueSeq - Detecting timeline duration...`)
-        duration = await getTimelineDuration({ input: inputPath, width, height })
-        if (!duration || duration <= 0) {
-            console.error('Error: Could not auto-detect duration. Use -d to specify manually.')
-            process.exit(1)
-        }
-        console.log(`  Auto-detected: ${duration.toFixed(2)}s`)
-    }
+  const { renderToMp4, renderToMp4Optimized, benchmarkRenderMethods } =
+    await import('../src/renderer/encode.js')
+  const { renderToMp4Parallel } = await import(
+    '../src/renderer/encode-parallel.js'
+  )
+  const { getTimelineDuration } = await import('../src/renderer/render.js')
+  const { detectBestGPUConfig, clearGPUCache } = await import(
+    '../src/renderer/gpu.js'
+  )
+
+  // Get GPU backend preference
+  const gpuBackend = values['gpu-backend'] || 'auto'
+
+  // Clear cache if specific backend requested (force re-detection)
+  if (gpuBackend !== 'auto') {
+    await clearGPUCache()
+  }
 
-    console.log(`\nVueSeq - Rendering ${input}`)
-    console.log(`  Duration: ${duration}s at ${fps}fps (${Math.ceil(duration * fps)} frames)${durationAuto ? ' (auto)' : ''}`)
-    console.log(`  Resolution: ${width}x${height}`)
-    console.log(`  Output: ${values.output}\n`)
-
-    const startTime = Date.now()
-    let lastLoggedPercent = -1
-
-    await renderToMp4({
-        input: inputPath,
-        duration,
-        fps,
-        width,
-        height,
-        output: values.output,
-        onProgress: ({ frame, total, percent }) => {
-            // Only log every 5% to reduce noise
-            if (percent % 5 === 0 && percent !== lastLoggedPercent) {
-                lastLoggedPercent = percent
-                process.stdout.write(`\rRendering: ${percent}% (${frame + 1}/${total} frames)`)
-            }
-        }
+  // Check GPU acceleration status
+  const gpuConfig = await detectBestGPUConfig({
+    preferBackend: gpuBackend !== 'auto' ? gpuBackend : undefined,
+  })
+
+  const gpuIcon = gpuConfig.isHardwareAccelerated ? '✓' : '○'
+  const gpuMode = gpuConfig.isHardwareAccelerated ? 'Hardware' : 'Software'
+  console.log(`\nGPU: ${gpuIcon} ${gpuMode}(${gpuConfig.label})`)
+  console.log(`     Renderer: ${gpuConfig.renderer}`)
+
+  // Run benchmark mode if requested
+  if (values.benchmark) {
+    console.log('\n📊 Running render benchmark...')
+    await benchmarkRenderMethods({
+      input: inputPath,
+      duration: duration || 2,
+      fps,
+      width,
+      height,
     })
+    process.exit(0)
+  }
+
+  // Auto-detect duration if not provided
+  if (durationAuto) {
+    console.log(`\nVueSeq - Detecting timeline duration...`)
+    duration = await getTimelineDuration({ input: inputPath, width, height })
+    if (!duration || duration <= 0) {
+      console.error(
+        'Error: Could not auto-detect duration. Use -d to specify manually.',
+      )
+      process.exit(1)
+    }
+    console.log(`  Auto - detected: ${duration.toFixed(2)}s`)
+  }
+
+  // Select renderer based on flags
+  const useParallel = values.parallel
+  const useOptimized = values.optimized
+  const numWorkers = values.workers ? parseInt(values.workers, 10) : undefined
+  const monitorMemory = values['monitor-memory']
+
+  let renderMethod
+  if (useParallel) {
+    renderMethod = `Parallel(${numWorkers || 'Auto'} workers)`
+  } else if (useOptimized) {
+    renderMethod = 'Optimized (in-browser capture)'
+  } else {
+    renderMethod = 'Standard (PNG-based)'
+  }
 
-    const elapsed = ((Date.now() - startTime) / 1000).toFixed(1)
-    console.log(`\n\n✓ Video saved to ${values.output} (${elapsed}s)`)
+  console.log(`\nVueSeq - Rendering ${input} `)
+  console.log(`  Method: ${renderMethod} `)
+  console.log(
+    `  Duration: ${duration}s at ${fps} fps(${Math.ceil(duration * fps)} frames)${durationAuto ? ' (auto)' : ''} `,
+  )
+  console.log(`  Resolution: ${width}x${height} `)
+  console.log(`  Output: ${values.output} \n`)
 
+  const startTime = Date.now()
+  let lastLoggedPercent = -1
+
+  // Select render function
+  let renderFn
+  if (useParallel) {
+    renderFn = renderToMp4Parallel
+  } else if (useOptimized) {
+    renderFn = renderToMp4Optimized
+  } else {
+    renderFn = renderToMp4
+  }
+
+  await renderFn({
+    input: inputPath,
+    duration,
+    fps,
+    width,
+    height,
+    output: values.output,
+    workers: numWorkers,
+    monitorMemory,
+    onProgress: ({ frame, total, percent, workerId }) => {
+      // Only log every 5% to reduce noise
+      if (percent % 5 === 0 && percent !== lastLoggedPercent) {
+        lastLoggedPercent = percent
+        const workerInfo = workerId !== undefined ? ` [W${workerId}]` : ''
+        process.stdout.write(
+          `\rRendering: ${percent}% (${frame + 1}/${total} frames)${workerInfo} `,
+        )
+      }
+    },
+  })
+
+  const elapsed = ((Date.now() - startTime) / 1000).toFixed(1)
+  console.log(`\n\n✓ Video saved to ${values.output} (${elapsed}s)`)
 } catch (error) {
-    console.error(`\nError: ${error.message}`)
-    process.exit(1)
+  console.error(`\nError: ${error.message} `)
+  process.exit(1)
 }
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vueseq",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "description": "A minimal, deterministic video renderer for Vue 3 + GSAP",
     "type": "module",
     "bin": {
@@ -38,10 +38,15 @@
     },
     "dependencies": {
         "gsap": "^3.12.0",
-        "playwright": "^1.40.0"
+        "html2canvas": "^1.4.1",
+        "mediabunny": "^1.31.0",
+        "playwright": "^1.58.0"
     },
     "devDependencies": {
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/git": "^10.0.1",
         "@vitejs/plugin-vue": "^5.0.0",
+        "semantic-release": "^25.0.2",
         "vite": "^5.0.0",
         "vue": "^3.4.0"
     },

package/src/index.js

@@ -1,9 +1,10 @@
 /**
  * VueSeq - Public API
- * 
+ *
  * A minimal, deterministic video renderer for Vue 3 + GSAP.
+ * Uses WebCodecs API for hardware-accelerated video encoding.
  */
 
 export { renderFrames } from './renderer/render.js'
-export { encodeVideo, renderToMp4 } from './renderer/encode.js'
+export { renderToMp4, isWebCodecsSupported } from './renderer/encode.js'
 export { createVideoServer } from './bundler/vite.js'