vueseq 0.1.0 → 0.1.2

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="./vueseq.svg" alt="VueSeq Logo" width="200">
+  <img src="./vueseq.svg" alt="VueSeq Logo" >
 </p>
 
 # VueSeq
@@ -26,6 +26,32 @@ https://github.com/user-attachments/assets/84d01c02-4b4f-4d86-879e-720a7e367967
 
 *This video was rendered with VueSeq from [examples/HelloWorld.vue](./examples/HelloWorld.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.
+
+### 🎬 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  
+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.
+
+### 🎨 Design System Demos
+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.
+
+
 ## Philosophy
 
 VueSeq is intentionally minimal. We bundle only the essentials: **Vue**, **GSAP**, **Playwright**, and **Vite**.
@@ -133,10 +159,10 @@ span {
 ### 2. Render to Video
 
 ```bash
-npx vueseq MyVideo.vue -d 4 -o hello.mp4
+npx vueseq examples/HelloWorld.vue -o examples/hello.mp4
 ```
 
-That's it! Your video will be rendered at 1920x1080, 30fps.
+That's it! Duration is auto-detected from your timeline. Your video will be rendered at 1920x1080, 30fps.
 
 ## CLI Options
 
@@ -145,7 +171,7 @@ vueseq <Video.vue> [options]
 
 Options:
   -o, --output   Output file (default: ./output.mp4)
-  -d, --duration Duration in seconds (required)
+  -d, --duration Duration in seconds (auto-detected from timeline 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)
@@ -155,14 +181,20 @@ Options:
 ### Examples
 
 ```bash
-# Basic render
-vueseq Intro.vue -d 5 -o intro.mp4
+# Simple example (auto-detects duration)
+npx vueseq examples/HelloWorld.vue -o examples/hello.mp4
+
+# Multi-scene showcase
+npx vueseq examples/Showcase.vue -o examples/showcase.mp4
+
+# Override duration (partial render)
+npx vueseq examples/Showcase.vue -d 10 -o examples/partial.mp4
 
 # 4K at 60fps
-vueseq Intro.vue -d 10 -f 60 -w 3840 -H 2160 -o intro-4k.mp4
+npx vueseq examples/HelloWorld.vue -f 60 -w 3840 -H 2160 -o examples/hello-4k.mp4
 
 # Square for social media
-vueseq Story.vue -d 15 -w 1080 -H 1080 -o story.mp4
+npx vueseq examples/HelloWorld.vue -w 1080 -H 1080 -o examples/hello-square.mp4
 ```
 
 ## Programmatic API

package/bin/cli.js

@@ -26,15 +26,15 @@ USAGE:
 
 OPTIONS:
   -o, --output   Output file (default: ./output.mp4)
-  -d, --duration Duration in seconds (required)
+  -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
 
 EXAMPLE:
-  vueseq MyAnimation.vue -d 5 -o my-video.mp4
-  vueseq Intro.vue -d 10 -f 60 -w 3840 -H 2160 -o intro-4k.mp4
+  npx vueseq examples/HelloWorld.vue -o examples/hello.mp4
+  npx vueseq examples/Showcase.vue -w 1280 -H 720 -f 60 -o examples/showcase.mp4
 `)
 }
 
@@ -76,16 +76,18 @@ if (extname(inputPath) !== '.vue') {
     process.exit(1)
 }
 
-// Validate duration
-if (!values.duration) {
-    console.error('Error: Duration is required. Use -d or --duration to specify duration in seconds.')
-    process.exit(1)
-}
+// Parse duration if provided
+let duration = null
+let durationAuto = false
 
-const duration = parseFloat(values.duration)
-if (isNaN(duration) || duration <= 0) {
-    console.error('Error: Duration must be a positive number')
-    process.exit(1)
+if (values.duration) {
+    duration = parseFloat(values.duration)
+    if (isNaN(duration) || duration <= 0) {
+        console.error('Error: Duration must be a positive number')
+        process.exit(1)
+    }
+} else {
+    durationAuto = true
 }
 
 // Parse numeric options
@@ -104,13 +106,25 @@ if (isNaN(width) || width <= 0 || isNaN(height) || height <= 0) {
 }
 
 // Import renderer and start rendering
-console.log(`\nVueSeq - Rendering ${input}`)
-console.log(`  Duration: ${duration}s at ${fps}fps (${Math.ceil(duration * fps)} frames)`)
-console.log(`  Resolution: ${width}x${height}`)
-console.log(`  Output: ${values.output}\n`)
-
 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`)
+    }
+
+    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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vueseq",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "description": "A minimal, deterministic video renderer for Vue 3 + GSAP",
     "type": "module",
     "bin": {
@@ -51,4 +51,4 @@
     "engines": {
         "node": ">=18.0.0"
     }
-}
+}

package/src/renderer/render.js

@@ -13,19 +13,56 @@ import { createVideoServer } from '../bundler/vite.js'
 import { mkdir } from 'fs/promises'
 import { join } from 'path'
 
+/**
+ * Get the timeline duration from a Vue component
+ * @param {Object} options
+ * @param {string} options.input - Absolute path to the Video.vue component
+ * @param {number} [options.width=1920] - Video width in pixels
+ * @param {number} [options.height=1080] - Video height in pixels
+ * @returns {Promise<number|null>} Duration in seconds, or null if not detectable
+ */
+export async function getTimelineDuration(options) {
+    const { input, width = 1920, height = 1080 } = options
+
+    const { url, cleanup } = await createVideoServer({ input, width, height })
+
+    const browser = await chromium.launch({ headless: true })
+    const context = await browser.newContext({
+        viewport: { width, height },
+        deviceScaleFactor: 1
+    })
+    const page = await context.newPage()
+
+    try {
+        await page.goto(url, { waitUntil: 'networkidle' })
+        await page.waitForFunction(
+            () => window.__VUESEQ_READY__ === true,
+            { timeout: 30000 }
+        )
+        // Give Vue/GSAP a moment to set up timelines
+        await page.waitForTimeout(100)
+
+        const duration = await page.evaluate(() => window.__VUESEQ_GET_DURATION__?.())
+        return duration
+    } finally {
+        await browser.close()
+        await cleanup()
+    }
+}
+
 /**
  * Render frames from a Vue component
  * @param {Object} options
  * @param {string} options.input - Absolute path to the Video.vue component
  * @param {number} [options.fps=30] - Frames per second
- * @param {number} options.duration - Duration in seconds
+ * @param {number} [options.duration] - Duration in seconds (auto-detected if not provided)
  * @param {number} [options.width=1920] - Video width in pixels
  * @param {number} [options.height=1080] - Video height in pixels
  * @param {function} [options.onProgress] - Progress callback
  * @returns {Promise<{framesDir: string, totalFrames: number, cleanup: () => Promise<void>}>}
  */
 export async function renderFrames(options) {
-    const {
+    let {
         input,
         fps = 30,
         duration,
@@ -34,8 +71,12 @@ export async function renderFrames(options) {
         onProgress
     } = options
 
-    if (!duration || duration <= 0) {
-        throw new Error('Duration must be a positive number (in seconds)')
+    // Auto-detect duration if not provided
+    if (!duration) {
+        duration = await getTimelineDuration({ input, width, height })
+        if (!duration || duration <= 0) {
+            throw new Error('Could not auto-detect duration. Specify -d/--duration manually.')
+        }
     }
 
     const totalFrames = Math.ceil(duration * fps)

package/src/runtime/gsap-bridge.js

@@ -35,7 +35,17 @@ window.__VUESEQ_SET_CONFIG__ = (config) => {
   window.__VUESEQ_CONFIG__ = config
 }
 
-// 6. Mark as ready after a microtask to ensure Vue is mounted
+// 6. Expose timeline duration for auto-detection
+window.__VUESEQ_GET_DURATION__ = () => {
+  const duration = gsap.globalTimeline.duration()
+  // Return null for infinite timelines (repeat: -1)
+  if (duration === Infinity || duration > 3600) {
+    return null
+  }
+  return duration
+}
+
+// 7. Mark as ready after a microtask to ensure Vue is mounted
 queueMicrotask(() => {
   window.__VUESEQ_READY__ = true
 })