vueseq 0.1.0

package/README.md

@@ -0,0 +1,245 @@
+<p align="center">
+  <img src="./vueseq.svg" alt="VueSeq Logo" width="200">
+</p>
+
+# VueSeq
+
+> **Vue Sequencer**: A minimal, deterministic video renderer for Vue 3 + GSAP, inspired by Pellicule and Remotion.
+
+Render Vue components with GSAP animations to video. Write standard Vue + GSAP code—no special APIs to learn.
+
+## Features
+
+- ✅ **Standard GSAP** - Use your existing GSAP knowledge
+- ✅ **Deterministic** - Same input = identical output, every time
+- ✅ **Simple CLI** - One command to render your video
+- ✅ **Programmatic API** - Integrate into your build pipeline
+- ✅ **Full GSAP Power** - All easing, timelines, and plugins work
+
+## 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)*
+
+## Philosophy
+
+VueSeq is intentionally minimal. We bundle only the essentials: **Vue**, **GSAP**, **Playwright**, and **Vite**.
+
+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
+- Less dependencies = fewer conflicts and smaller installs
+
+**Bring your own styles.** If your project uses Tailwind, SCSS, or any other solution, it will work seamlessly with VueSeq.
+
+## Installation
+
+```bash
+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)
+
+## Quick Start
+
+### 1. Create a Video Component
+
+Create a Vue component with GSAP animations:
+
+```vue
+<!-- MyVideo.vue -->
+<script setup>
+import { onMounted, ref } from 'vue'
+import gsap from 'gsap'
+
+const boxRef = ref(null)
+const textRef = ref(null)
+
+onMounted(() => {
+  const tl = gsap.timeline()
+  
+  tl.from(boxRef.value, { 
+    x: -200, 
+    opacity: 0, 
+    duration: 1,
+    ease: 'power2.out'
+  })
+  
+  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)'
+  })
+})
+</script>
+
+<template>
+  <div class="scene">
+    <div ref="boxRef" class="box">
+      <span ref="textRef">Hello GSAP!</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scene {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.box {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(45deg, #e94560, #0f3460);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20px 60px rgba(233, 69, 96, 0.3);
+}
+
+span {
+  color: white;
+  font-size: 32px;
+  font-weight: 600;
+  font-family: system-ui;
+}
+</style>
+```
+
+### 2. Render to Video
+
+```bash
+npx vueseq MyVideo.vue -d 4 -o hello.mp4
+```
+
+That's it! Your video will be rendered at 1920x1080, 30fps.
+
+## CLI Options
+
+```
+vueseq <Video.vue> [options]
+
+Options:
+  -o, --output   Output file (default: ./output.mp4)
+  -d, --duration Duration in seconds (required)
+  -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 help message
+```
+
+### Examples
+
+```bash
+# Basic render
+vueseq Intro.vue -d 5 -o intro.mp4
+
+# 4K at 60fps
+vueseq Intro.vue -d 10 -f 60 -w 3840 -H 2160 -o intro-4k.mp4
+
+# Square for social media
+vueseq Story.vue -d 15 -w 1080 -H 1080 -o story.mp4
+```
+
+## Programmatic API
+
+```javascript
+import { renderToMp4, renderFrames, encodeVideo } from 'vueseq'
+
+// Render directly to MP4
+await renderToMp4({
+  input: '/path/to/MyVideo.vue',
+  duration: 5,
+  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
+
+VueSeq uses GSAP's deterministic timeline control:
+
+1. **Vite** bundles your Vue component
+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
+
+This is deterministic because `seek()` applies all GSAP values synchronously—given the same time, you get the exact same DOM state every time.
+
+## Multi-Scene Videos
+
+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(createOutro())
+})
+
+function createIntro() {
+  const tl = gsap.timeline()
+  tl.from('.title', { opacity: 0, duration: 1 })
+  tl.to({}, { duration: 2 })  // Hold
+  tl.to('.scene-intro', { opacity: 0, duration: 0.5 })
+  return tl
+}
+```
+
+Stack scenes with `position: absolute` and control visibility via GSAP opacity animations. See `examples/HelloWorld.vue` for a complete 4-scene example, and `AGENTS.md` for detailed patterns.
+
+## Tips
+
+- **Keep animations on the `globalTimeline`** - Nested timelines work fine, they're all part of the global timeline by default
+- **Avoid random values** - For deterministic renders, don't use `random()` or `Math.random()` without seeding
+- **Handle callbacks carefully** - `onComplete` and similar callbacks may not fire as expected during seek
+
+## License
+
+MIT

package/bin/cli.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+
+/**
+ * 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'
+
+// Show help text
+function showHelp() {
+    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 (required)
+  -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
+`)
+}
+
+// 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' }
+    }
+})
+
+// Show help if requested
+if (values.help) {
+    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)
+}
+
+const inputPath = resolve(input)
+if (!existsSync(inputPath)) {
+    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)
+}
+
+// Validate duration
+if (!values.duration) {
+    console.error('Error: Duration is required. Use -d or --duration to specify duration in seconds.')
+    process.exit(1)
+}
+
+const duration = parseFloat(values.duration)
+if (isNaN(duration) || duration <= 0) {
+    console.error('Error: Duration must be a positive number')
+    process.exit(1)
+}
+
+// Parse numeric options
+const fps = parseInt(values.fps)
+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)
+}
+
+if (isNaN(width) || width <= 0 || isNaN(height) || height <= 0) {
+    console.error('Error: Width and height must be positive numbers')
+    process.exit(1)
+}
+
+// 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 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)`)
+            }
+        }
+    })
+
+    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)
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "vueseq",
+    "version": "0.1.0",
+    "description": "A minimal, deterministic video renderer for Vue 3 + GSAP",
+    "type": "module",
+    "bin": {
+        "vueseq": "./bin/cli.js"
+    },
+    "main": "./src/index.js",
+    "exports": {
+        ".": "./src/index.js"
+    },
+    "files": [
+        "bin",
+        "src"
+    ],
+    "scripts": {
+        "test": "node --test"
+    },
+    "keywords": [
+        "vue",
+        "gsap",
+        "video",
+        "animation",
+        "render",
+        "remotion",
+        "pellicule"
+    ],
+    "author": "bennyzen",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/bennyzen/vueseq.git"
+    },
+    "homepage": "https://github.com/bennyzen/vueseq#readme",
+    "bugs": {
+        "url": "https://github.com/bennyzen/vueseq/issues"
+    },
+    "dependencies": {
+        "gsap": "^3.12.0",
+        "playwright": "^1.40.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.0",
+        "vite": "^5.0.0",
+        "vue": "^3.4.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.0.0"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}

package/src/bundler/vite.js

@@ -0,0 +1,150 @@
+/**
+ * Vite Bundler
+ * 
+ * Creates a temporary Vite dev server that:
+ * 1. Serves the user's Video.vue component
+ * 2. Injects the GSAP bridge runtime
+ * 3. Provides an entry HTML file
+ */
+
+import { createServer } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { mkdtemp, writeFile, rm } from 'fs/promises'
+import { tmpdir } from 'os'
+import { createRequire } from 'module'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const require = createRequire(import.meta.url)
+
+/**
+ * Create a Vite dev server for rendering a Vue component
+ * @param {Object} options
+ * @param {string} options.input - Absolute path to the Video.vue component
+ * @param {number} options.width - Video width in pixels
+ * @param {number} options.height - Video height in pixels
+ * @returns {Promise<{url: string, tempDir: string, cleanup: () => Promise<void>}>}
+ */
+export async function createVideoServer({ input, width, height }) {
+    // Create temp directory for build artifacts
+    const tempDir = await mkdtemp(resolve(tmpdir(), 'vueseq-'))
+
+    // Path to the gsap-bridge runtime
+    const gsapBridgePath = resolve(__dirname, '../runtime/gsap-bridge.js')
+
+    // User's project directory (where the video component lives)
+    const userProjectDir = dirname(input)
+
+    // VueSeq package root (for resolving our dependencies)
+    const vueseqRoot = resolve(__dirname, '../..')
+
+    // Resolve package paths from vueseq's node_modules
+    const vuePath = dirname(require.resolve('vue/package.json'))
+    const gsapPath = dirname(require.resolve('gsap/package.json'))
+
+    // Generate entry HTML with proper viewport sizing
+    const entryHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=${width}, height=${height}">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { 
+      width: ${width}px; 
+      height: ${height}px; 
+      overflow: hidden;
+      background: #000;
+    }
+    #app {
+      width: ${width}px;
+      height: ${height}px;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/@vueseq/entry.js"></script>
+</body>
+</html>`
+
+    await writeFile(resolve(tempDir, 'index.html'), entryHtml)
+
+    // Virtual module plugin for the entry point
+    const virtualEntryPlugin = {
+        name: 'vueseq-entry',
+        resolveId(id) {
+            if (id === '/@vueseq/entry.js') return id
+            if (id === '/@vueseq/gsap-bridge.js') return gsapBridgePath
+        },
+        load(id) {
+            if (id === '/@vueseq/entry.js') {
+                // Generate the entry module that imports the user's component
+                return `
+import { createApp } from 'vue'
+import '/@vueseq/gsap-bridge.js'
+import Video from '${input}'
+
+const app = createApp(Video)
+app.mount('#app')
+
+// Signal ready after Vue has mounted
+window.__VUESEQ_READY__ = true
+`
+            }
+        }
+    }
+
+    const server = await createServer({
+        root: tempDir,
+        plugins: [vue(), virtualEntryPlugin],
+        server: {
+            port: 0, // Auto-assign available port
+            strictPort: false
+        },
+        resolve: {
+            alias: {
+                // Resolve vue and gsap from vueseq's node_modules
+                'vue': vuePath,
+                'gsap': gsapPath
+            }
+        },
+        optimizeDeps: {
+            // Let Vite know where to find these
+            include: ['vue', 'gsap'],
+            // Force re-optimization in temp directory
+            force: true,
+            // Include paths for the optimizer to search
+            entries: [input]
+        },
+        // Allow serving files from:
+        // 1. temp directory (index.html)
+        // 2. user's project (Video.vue and its imports)
+        // 3. vueseq package (gsap-bridge.js and dependencies)
+        fs: {
+            allow: [
+                tempDir,
+                userProjectDir,
+                vueseqRoot,
+                vuePath,
+                gsapPath
+            ]
+        },
+        logLevel: 'warn' // Reduce noise during rendering
+    })
+
+    await server.listen()
+    const address = server.httpServer.address()
+    const url = `http://localhost:${address.port}`
+
+    return {
+        url,
+        tempDir,
+        cleanup: async () => {
+            await server.close()
+            await rm(tempDir, { recursive: true, force: true })
+        }
+    }
+}

package/src/index.js

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

package/src/renderer/encode.js

@@ -0,0 +1,92 @@
+/**
+ * FFmpeg Encoder
+ * 
+ * Encodes PNG frames to MP4 video using FFmpeg.
+ * Requires FFmpeg to be installed on the system.
+ */
+
+import { spawn } from 'child_process'
+import { join } from 'path'
+
+/**
+ * Encode frames to video using FFmpeg
+ * @param {Object} options
+ * @param {string} options.framesDir - Directory containing frame-XXXXX.png files
+ * @param {string} options.output - Output video file path
+ * @param {number} [options.fps=30] - Frames per second
+ * @returns {Promise<string>} - Path to the output video
+ */
+export function encodeVideo({ framesDir, output, fps = 30 }) {
+    return new Promise((resolve, reject) => {
+        const args = [
+            '-y', // Overwrite output file without asking
+            '-framerate', String(fps),
+            '-i', join(framesDir, 'frame-%05d.png'),
+            '-c:v', 'libx264',
+            '-pix_fmt', 'yuv420p', // Compatibility with most players
+            '-preset', 'fast',
+            '-crf', '18', // High quality (lower = better, 18-23 is good range)
+            output
+        ]
+
+        const ffmpeg = spawn('ffmpeg', args, {
+            stdio: ['ignore', 'pipe', 'pipe']
+        })
+
+        let stderr = ''
+        ffmpeg.stderr.on('data', (data) => {
+            stderr += data.toString()
+        })
+
+        ffmpeg.on('close', (code) => {
+            if (code === 0) {
+                resolve(output)
+            } else {
+                reject(new Error(`FFmpeg exited with code ${code}\n${stderr}`))
+            }
+        })
+
+        ffmpeg.on('error', (err) => {
+            if (err.code === 'ENOENT') {
+                reject(new Error(
+                    'FFmpeg not found. Please install FFmpeg:\n' +
+                    '  - macOS: brew install ffmpeg\n' +
+                    '  - Ubuntu/Debian: sudo apt install ffmpeg\n' +
+                    '  - Windows: Download from https://ffmpeg.org/download.html'
+                ))
+            } else {
+                reject(new Error(`FFmpeg error: ${err.message}`))
+            }
+        })
+    })
+}
+
+/**
+ * Render a Vue component to MP4 video
+ * @param {Object} options
+ * @param {string} options.input - Absolute path to the Video.vue component
+ * @param {string} [options.output='./output.mp4'] - Output video file path
+ * @param {number} [options.fps=30] - Frames per second
+ * @param {number} options.duration - Duration in seconds
+ * @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<string>} - Path to the output video
+ */
+export async function renderToMp4(options) {
+    const { renderFrames } = await import('./render.js')
+    const { output = './output.mp4', ...renderOptions } = options
+
+    const { framesDir, cleanup } = await renderFrames(renderOptions)
+
+    try {
+        await encodeVideo({
+            framesDir,
+            output,
+            fps: renderOptions.fps || 30
+        })
+        return output
+    } finally {
+        await cleanup()
+    }
+}

package/src/renderer/render.js

@@ -0,0 +1,107 @@
+/**
+ * Frame Renderer
+ * 
+ * The core rendering loop that captures each frame using Playwright.
+ * For each frame:
+ *   1. Seek GSAP globalTimeline to the exact time
+ *   2. Wait for requestAnimationFrame to ensure DOM is painted
+ *   3. Take a screenshot
+ */
+
+import { chromium } from 'playwright'
+import { createVideoServer } from '../bundler/vite.js'
+import { mkdir } from 'fs/promises'
+import { join } from 'path'
+
+/**
+ * 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.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 {
+        input,
+        fps = 30,
+        duration,
+        width = 1920,
+        height = 1080,
+        onProgress
+    } = options
+
+    if (!duration || duration <= 0) {
+        throw new Error('Duration must be a positive number (in seconds)')
+    }
+
+    const totalFrames = Math.ceil(duration * fps)
+
+    // Start Vite server
+    const { url, tempDir, cleanup } = await createVideoServer({ input, width, height })
+
+    const framesDir = join(tempDir, 'frames')
+    await mkdir(framesDir, { recursive: true })
+
+    // Launch headless browser
+    const browser = await chromium.launch({
+        headless: true
+    })
+
+    const context = await browser.newContext({
+        viewport: { width, height },
+        deviceScaleFactor: 1
+    })
+
+    const page = await context.newPage()
+
+    try {
+        // Load the page
+        await page.goto(url, { waitUntil: 'networkidle' })
+
+        // Wait for VueSeq bridge to be ready
+        await page.waitForFunction(
+            () => window.__VUESEQ_READY__ === true,
+            { timeout: 30000 }
+        )
+
+        // Give Vue a moment to mount and GSAP to set up timelines
+        await page.waitForTimeout(100)
+
+        // Render each frame
+        for (let frame = 0; frame < totalFrames; frame++) {
+            const timeInSeconds = frame / fps
+
+            // Seek GSAP to exact time and wait for paint
+            await page.evaluate(async (t) => {
+                window.__VUESEQ_SEEK__(t)
+                // Wait for next animation frame to ensure DOM is painted
+                await new Promise(resolve => requestAnimationFrame(resolve))
+            }, timeInSeconds)
+
+            // Take screenshot
+            const framePath = join(framesDir, `frame-${String(frame).padStart(5, '0')}.png`)
+            await page.screenshot({
+                path: framePath,
+                type: 'png'
+            })
+
+            // Progress callback
+            if (onProgress) {
+                onProgress({
+                    frame,
+                    total: totalFrames,
+                    timeInSeconds,
+                    percent: Math.round((frame + 1) / totalFrames * 100)
+                })
+            }
+        }
+    } finally {
+        await browser.close()
+    }
+
+    return { framesDir, totalFrames, cleanup }
+}

package/src/runtime/gsap-bridge.js

@@ -0,0 +1,43 @@
+/**
+ * GSAP Bridge - Browser Runtime
+ * 
+ * This script runs inside the browser (injected by Vite) and provides
+ * the deterministic time-control interface for frame-by-frame rendering.
+ * 
+ * Key design decisions:
+ * - We pause globalTimeline to freeze ALL animations
+ * - seek() with suppressEvents=true prevents callbacks from firing
+ * - The user writes standard GSAP code; no special composables needed
+ */
+
+import gsap from 'gsap'
+
+// 1. Pause all animations immediately
+gsap.globalTimeline.pause()
+
+// 2. Disable lag smoothing (ensures consistent timing)
+gsap.ticker.lagSmoothing(0)
+
+// 3. Expose seek function to Playwright
+// This is the core function that enables deterministic rendering
+window.__VUESEQ_SEEK__ = (timeInSeconds) => {
+  // suppressEvents = true prevents onComplete/onUpdate callbacks from firing
+  gsap.globalTimeline.seek(timeInSeconds, true)
+}
+
+// 4. Signal ready state
+window.__VUESEQ_READY__ = false
+
+// 5. Store video config for external access
+window.__VUESEQ_CONFIG__ = null
+
+window.__VUESEQ_SET_CONFIG__ = (config) => {
+  window.__VUESEQ_CONFIG__ = config
+}
+
+// 6. Mark as ready after a microtask to ensure Vue is mounted
+queueMicrotask(() => {
+  window.__VUESEQ_READY__ = true
+})
+
+export { gsap }