loopwind 0.21.0 → 0.23.0

package/test-cloudflare-worker/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "test-cloudflare-worker",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20251209.0",
+    "typescript": "^5.9.3",
+    "wrangler": "^4.53.0"
+  },
+  "dependencies": {
+    "@resvg/resvg-wasm": "^2.6.2",
+    "react": "^19.2.1",
+    "satori": "^0.18.3"
+  }
+}

package/test-cloudflare-worker/test-sdk.mjs

@@ -0,0 +1,75 @@
+/**
+ * Simple test script to verify the workers SDK works
+ * Run with: node test-sdk.mjs
+ */
+import { defineTemplate, renderSVG, renderImage, initWasm } from 'loopwind/sdk/workers';
+import React from 'react';
+
+// Define a simple test template
+const testTemplate = defineTemplate({
+  name: 'test-og-image',
+  size: { width: 1200, height: 630 },
+  render: ({ tw, title, subtitle }) => {
+    return React.createElement(
+      'div',
+      {
+        style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 p-12'),
+      },
+      React.createElement(
+        'h1',
+        { style: tw('text-7xl font-bold text-white text-center') },
+        title
+      ),
+      subtitle && React.createElement(
+        'p',
+        { style: tw('text-3xl text-white mt-6') },
+        subtitle
+      )
+    );
+  },
+});
+
+async function main() {
+  console.log('Testing loopwind workers SDK...\n');
+
+  // Test 1: Template definition
+  console.log('1. Template defined successfully:', testTemplate.name);
+  console.log('   Size:', testTemplate.size);
+
+  // Test 2: SVG rendering (no WASM needed for satori in Node.js)
+  console.log('\n2. Testing SVG rendering...');
+  try {
+    const svg = await renderSVG(testTemplate, {
+      title: 'Hello World!',
+      subtitle: 'Testing the SDK'
+    });
+    console.log('   SVG rendered successfully!');
+    console.log('   SVG length:', svg.length, 'bytes');
+    console.log('   SVG starts with:', svg.substring(0, 100));
+  } catch (err) {
+    console.error('   SVG rendering failed:', err.message);
+  }
+
+  // Test 3: PNG rendering (requires WASM)
+  console.log('\n3. Testing PNG rendering...');
+  try {
+    await initWasm();
+    const png = await renderImage(testTemplate, {
+      title: 'Hello PNG!',
+      subtitle: 'WASM is working'
+    }, { format: 'png', scale: 1 });
+    console.log('   PNG rendered successfully!');
+    console.log('   PNG size:', png.length, 'bytes');
+
+    // Save PNG to file
+    const fs = await import('fs/promises');
+    await fs.writeFile('test-output.png', png);
+    console.log('   Saved to test-output.png');
+  } catch (err) {
+    console.error('   PNG rendering failed:', err.message);
+  }
+
+  console.log('\nTests complete!');
+}
+
+main().catch(console.error);

package/test-cloudflare-worker/wrangler.toml

@@ -0,0 +1,14 @@
+name = "loopwind-worker-test"
+main = "src/index.ts"
+compatibility_date = "2024-12-01"
+
+# Enable nodejs_compat for Node.js API support
+# This is required for satori and resvg-wasm dependencies
+compatibility_flags = ["nodejs_compat_v2"]
+
+[observability]
+enabled = true
+
+# NOTE: Local development (wrangler dev) may fail due to WASM restrictions.
+# This is a known limitation of the local workerd runtime.
+# Deploy to production (wrangler deploy) for full functionality.

package/test-video-720p.mjs

@@ -0,0 +1,96 @@
+import { renderSVG, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import { Resvg } from '@resvg/resvg-wasm';
+import HME from 'h264-mp4-encoder';
+import React from 'react';
+
+// Same complex template but at 720p
+const template = defineTemplate({
+  name: 'perf-test-720',
+  type: 'video',
+  size: { width: 1280, height: 720 },
+  video: { fps: 30, duration: 5 },
+  render: ({ tw, progress, frame }) => React.createElement(
+    'div',
+    { style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800') },
+    React.createElement('h1', {
+      style: tw('text-7xl font-black text-white ease-out-cubic enter-bounce-in-up/0/800')
+    }, 'LOOPWIND'),
+    React.createElement('p', {
+      style: tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/400/600')
+    }, 'Performance Test'),
+    React.createElement('div', { style: tw('flex gap-4 mt-8') },
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/900/400')
+      }, 'Box 1'),
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/1050/400')
+      }, 'Box 2'),
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/1200/400')
+      }, 'Box 3')
+    )
+  )
+});
+
+async function runTest() {
+  console.log('Initializing WASM...');
+  await initWasm();
+
+  const totalFrames = 150;
+  const width = 1280;
+  const height = 720;
+
+  // Phase 1: SVG generation
+  console.log('\n=== 720p Complex Template Test ===');
+  const svgStart = Date.now();
+  const svgs = [];
+  for (let i = 0; i < totalFrames; i++) {
+    const progress = i / (totalFrames - 1);
+    const svg = await renderSVG(template, { progress, frame: i });
+    svgs.push(svg);
+  }
+  const svgTime = Date.now() - svgStart;
+  console.log('SVG generation: ' + svgTime + 'ms (' + (svgTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Phase 2: RGBA conversion (resvg)
+  const rgbaStart = Date.now();
+  const rgbaFrames = [];
+  for (let i = 0; i < totalFrames; i++) {
+    const resvg = new Resvg(svgs[i], { fitTo: { mode: 'width', value: width } });
+    const rendered = resvg.render();
+    rgbaFrames.push(rendered.pixels);
+  }
+  const rgbaTime = Date.now() - rgbaStart;
+  console.log('RGBA conversion: ' + rgbaTime + 'ms (' + (rgbaTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Phase 3: H.264 encoding
+  const encodeStart = Date.now();
+  const encoder = await HME.createH264MP4Encoder();
+  encoder.width = width;
+  encoder.height = height;
+  encoder.frameRate = 30;
+  encoder.quantizationParameter = 23;
+  encoder.speed = 10;
+  encoder.groupOfPictures = 30;
+  encoder.initialize();
+
+  for (let i = 0; i < rgbaFrames.length; i++) {
+    encoder.addFrameRgba(rgbaFrames[i]);
+  }
+  encoder.finalize();
+  const output = encoder.FS.readFile(encoder.outputFilename);
+  encoder.delete();
+  const encodeTime = Date.now() - encodeStart;
+  console.log('H.264 encoding: ' + encodeTime + 'ms (' + (encodeTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Summary
+  const totalTime = svgTime + rgbaTime + encodeTime;
+  console.log('\n=== SUMMARY (720p) ===');
+  console.log('SVG generation:  ' + svgTime + 'ms (' + ((svgTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('RGBA conversion: ' + rgbaTime + 'ms (' + ((rgbaTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('H.264 encoding:  ' + encodeTime + 'ms (' + ((encodeTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('TOTAL:           ' + totalTime + 'ms');
+  console.log('Real-time ratio: ' + (totalTime/5000).toFixed(2) + 'x');
+}
+
+runTest().catch(console.error);

package/test-video-breakdown.mjs

@@ -0,0 +1,98 @@
+import { renderSVG, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import { Resvg } from '@resvg/resvg-wasm';
+import HME from 'h264-mp4-encoder';
+import React from 'react';
+
+// Same complex template
+const template = defineTemplate({
+  name: 'perf-test-1080',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 5 },
+  render: ({ tw, progress, frame }) => React.createElement(
+    'div',
+    { style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800') },
+    React.createElement('h1', {
+      style: tw('text-9xl font-black text-white ease-out-cubic enter-bounce-in-up/0/800')
+    }, 'LOOPWIND'),
+    React.createElement('p', {
+      style: tw('text-3xl text-white/80 mt-6 ease-out enter-fade-in-up/400/600')
+    }, 'Performance Test'),
+    React.createElement('div', { style: tw('flex gap-6 mt-12') },
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/900/400')
+      }, 'Box 1'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1050/400')
+      }, 'Box 2'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1200/400')
+      }, 'Box 3')
+    )
+  )
+});
+
+async function runTest() {
+  console.log('Initializing WASM...');
+  await initWasm();
+
+  const totalFrames = 150;
+  const width = 1920;
+  const height = 1080;
+
+  // Phase 1: SVG generation
+  console.log('\n=== Phase 1: SVG Generation ===');
+  const svgStart = Date.now();
+  const svgs = [];
+  for (let i = 0; i < totalFrames; i++) {
+    const progress = i / (totalFrames - 1);
+    const svg = await renderSVG(template, { progress, frame: i });
+    svgs.push(svg);
+  }
+  const svgTime = Date.now() - svgStart;
+  console.log('SVG generation: ' + svgTime + 'ms (' + (svgTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Phase 2: RGBA conversion (resvg)
+  console.log('\n=== Phase 2: RGBA Conversion (resvg) ===');
+  const rgbaStart = Date.now();
+  const rgbaFrames = [];
+  for (let i = 0; i < totalFrames; i++) {
+    const resvg = new Resvg(svgs[i], { fitTo: { mode: 'width', value: width } });
+    const rendered = resvg.render();
+    rgbaFrames.push(rendered.pixels);
+  }
+  const rgbaTime = Date.now() - rgbaStart;
+  console.log('RGBA conversion: ' + rgbaTime + 'ms (' + (rgbaTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Phase 3: H.264 encoding
+  console.log('\n=== Phase 3: H.264 Encoding ===');
+  const encodeStart = Date.now();
+  const encoder = await HME.createH264MP4Encoder();
+  encoder.width = width;
+  encoder.height = height;
+  encoder.frameRate = 30;
+  encoder.quantizationParameter = 23;
+  encoder.speed = 10;
+  encoder.groupOfPictures = 30;
+  encoder.initialize();
+
+  for (let i = 0; i < rgbaFrames.length; i++) {
+    encoder.addFrameRgba(rgbaFrames[i]);
+  }
+  encoder.finalize();
+  const output = encoder.FS.readFile(encoder.outputFilename);
+  encoder.delete();
+  const encodeTime = Date.now() - encodeStart;
+  console.log('H.264 encoding: ' + encodeTime + 'ms (' + (encodeTime/totalFrames).toFixed(1) + 'ms/frame)');
+
+  // Summary
+  const totalTime = svgTime + rgbaTime + encodeTime;
+  console.log('\n=== SUMMARY ===');
+  console.log('SVG generation:  ' + svgTime + 'ms (' + ((svgTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('RGBA conversion: ' + rgbaTime + 'ms (' + ((rgbaTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('H.264 encoding:  ' + encodeTime + 'ms (' + ((encodeTime/totalTime)*100).toFixed(0) + '%)');
+  console.log('TOTAL:           ' + totalTime + 'ms');
+  console.log('Real-time ratio: ' + (totalTime/5000).toFixed(2) + 'x');
+}
+
+runTest().catch(console.error);

package/test-video-perf-1080.mjs

@@ -0,0 +1,67 @@
+import { renderVideo, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import React from 'react';
+
+// More complex video template at 1080p
+const template = defineTemplate({
+  name: 'perf-test-1080',
+  type: 'video',
+  size: { width: 1920, height: 1080 }, // 1080p
+  video: { fps: 30, duration: 5 },
+  render: ({ tw, progress, frame }) => React.createElement(
+    'div',
+    { style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800') },
+    React.createElement('h1', {
+      style: tw('text-9xl font-black text-white ease-out-cubic enter-bounce-in-up/0/800')
+    }, 'LOOPWIND'),
+    React.createElement('p', {
+      style: tw('text-3xl text-white/80 mt-6 ease-out enter-fade-in-up/400/600')
+    }, 'Performance Test'),
+    React.createElement('div', { style: tw('flex gap-6 mt-12') },
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/900/400')
+      }, 'Box 1'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1050/400')
+      }, 'Box 2'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1200/400')
+      }, 'Box 3')
+    )
+  )
+});
+
+async function runTest() {
+  console.log('Initializing WASM...');
+  const wasmStart = Date.now();
+  await initWasm();
+  console.log('WASM init: ' + (Date.now() - wasmStart) + 'ms\n');
+
+  console.log('=== Video Render Performance Test (1080p, Complex) ===');
+  console.log('Resolution: 1920x1080 (1080p)');
+  console.log('Duration: 5 seconds');
+  console.log('FPS: 30');
+  console.log('Total frames: 150\n');
+
+  const start = Date.now();
+
+  const mp4 = await renderVideo(template, {}, {
+    onProgress: (frame, total) => {
+      if (frame % 30 === 0 || frame === total) {
+        const now = Date.now();
+        const elapsed = now - start;
+        const fps = frame / (elapsed / 1000);
+        console.log('Frame ' + frame + '/' + total + ' - ' + elapsed + 'ms elapsed - ' + fps.toFixed(1) + ' frames/sec');
+      }
+    }
+  });
+
+  const totalTime = Date.now() - start;
+  console.log('\n=== Results ===');
+  console.log('Total time: ' + totalTime + 'ms (' + (totalTime/1000).toFixed(2) + 's)');
+  console.log('Frames: 150');
+  console.log('Avg per frame: ' + (totalTime/150).toFixed(1) + 'ms');
+  console.log('Real-time ratio: ' + (totalTime/5000).toFixed(2) + 'x');
+  console.log('Output size: ' + (mp4.length / 1024).toFixed(0) + 'KB');
+}
+
+runTest().catch(console.error);

package/test-video-perf.mjs

@@ -0,0 +1,56 @@
+import { renderVideo, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import React from 'react';
+
+// Simple video template
+const template = defineTemplate({
+  name: 'perf-test',
+  type: 'video',
+  size: { width: 1280, height: 720 }, // 720p
+  video: { fps: 30, duration: 5 },
+  render: ({ tw, progress }) => React.createElement(
+    'div',
+    { style: tw('flex items-center justify-center w-full h-full bg-blue-600') },
+    React.createElement('div', {
+      style: {
+        ...tw('text-8xl font-bold text-white'),
+        opacity: progress
+      }
+    }, 'TEST')
+  )
+});
+
+async function runTest() {
+  console.log('Initializing WASM...');
+  const wasmStart = Date.now();
+  await initWasm();
+  console.log('WASM init: ' + (Date.now() - wasmStart) + 'ms\n');
+
+  console.log('=== Video Render Performance Test ===');
+  console.log('Resolution: 1280x720 (720p)');
+  console.log('Duration: 5 seconds');
+  console.log('FPS: 30');
+  console.log('Total frames: 150\n');
+
+  const start = Date.now();
+
+  const mp4 = await renderVideo(template, {}, {
+    onProgress: (frame, total) => {
+      if (frame % 30 === 0 || frame === total) {
+        const now = Date.now();
+        const elapsed = now - start;
+        const fps = frame / (elapsed / 1000);
+        console.log('Frame ' + frame + '/' + total + ' - ' + elapsed + 'ms elapsed - ' + fps.toFixed(1) + ' frames/sec');
+      }
+    }
+  });
+
+  const totalTime = Date.now() - start;
+  console.log('\n=== Results ===');
+  console.log('Total time: ' + totalTime + 'ms (' + (totalTime/1000).toFixed(2) + 's)');
+  console.log('Frames: 150');
+  console.log('Avg per frame: ' + (totalTime/150).toFixed(1) + 'ms');
+  console.log('Real-time ratio: ' + (totalTime/5000).toFixed(2) + 'x');
+  console.log('Output size: ' + (mp4.length / 1024).toFixed(0) + 'KB');
+}
+
+runTest().catch(console.error);

package/test-worker-1080p.mjs

@@ -0,0 +1,103 @@
+import { renderSVG, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import { Resvg } from '@resvg/resvg-wasm';
+import HME from 'h264-mp4-encoder';
+import React from 'react';
+
+// Test 1080p limits
+const template = defineTemplate({
+  name: 'worker-test-1080',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 10 },
+  render: ({ tw, progress, frame }) => React.createElement(
+    'div',
+    { style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800') },
+    React.createElement('h1', {
+      style: tw('text-9xl font-black text-white ease-out-cubic enter-bounce-in-up/0/800')
+    }, 'LOOPWIND'),
+    React.createElement('p', {
+      style: tw('text-3xl text-white/80 mt-6 ease-out enter-fade-in-up/400/600')
+    }, 'Worker Test'),
+    React.createElement('div', { style: tw('flex gap-6 mt-12') },
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/900/400')
+      }, 'Feature 1'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1050/400')
+      }, 'Feature 2'),
+      React.createElement('div', {
+        style: tw('px-6 py-3 bg-white/10 rounded-full text-white text-lg ease-out enter-fade-in-up/1200/400')
+      }, 'Feature 3')
+    )
+  )
+});
+
+async function runTests() {
+  console.log('=== 1080p Worker Limits Test ===\n');
+  await initWasm();
+
+  const configs = [
+    { width: 1920, height: 1080, fps: 24, duration: 5, name: '1080p/24fps/5s' },
+    { width: 1920, height: 1080, fps: 24, duration: 10, name: '1080p/24fps/10s' },
+    { width: 1920, height: 1080, fps: 30, duration: 5, name: '1080p/30fps/5s' },
+  ];
+
+  for (const config of configs) {
+    const { width, height, fps, duration, name } = config;
+    const totalFrames = fps * duration;
+
+    console.log(`\nTesting ${name} (${totalFrames} frames)...`);
+    const start = Date.now();
+
+    // SVG generation
+    const svgStart = Date.now();
+    const svgs = [];
+    for (let i = 0; i < totalFrames; i++) {
+      const progress = i / (totalFrames - 1);
+      const svg = await renderSVG(template, { progress, frame: i });
+      svgs.push(svg);
+    }
+    const svgTime = Date.now() - svgStart;
+
+    // RGBA conversion
+    const rgbaStart = Date.now();
+    const rgbaFrames = [];
+    for (let i = 0; i < totalFrames; i++) {
+      const resvg = new Resvg(svgs[i], { fitTo: { mode: 'width', value: width } });
+      const rendered = resvg.render();
+      rgbaFrames.push(rendered.pixels);
+    }
+    const rgbaTime = Date.now() - rgbaStart;
+
+    // H.264 encoding
+    const encodeStart = Date.now();
+    const encoder = await HME.createH264MP4Encoder();
+    encoder.width = width;
+    encoder.height = height;
+    encoder.frameRate = fps;
+    encoder.quantizationParameter = 23;
+    encoder.speed = 10;
+    encoder.groupOfPictures = fps;
+    encoder.initialize();
+
+    for (const frame of rgbaFrames) {
+      encoder.addFrameRgba(frame);
+    }
+    encoder.finalize();
+    const output = encoder.FS.readFile(encoder.outputFilename);
+    encoder.delete();
+    const encodeTime = Date.now() - encodeStart;
+
+    const totalTime = Date.now() - start;
+    const realTimeRatio = totalTime / (duration * 1000);
+    const workerViable = totalTime < 30000;
+
+    console.log(`  Total: ${totalTime}ms (${realTimeRatio.toFixed(2)}x real-time)`);
+    console.log(`  SVG: ${svgTime}ms, RGBA: ${rgbaTime}ms, H.264: ${encodeTime}ms`);
+    console.log(`  RGBA/frame: ${(rgbaTime/totalFrames).toFixed(0)}ms`);
+    console.log(`  Worker viable (<30s): ${workerViable ? 'YES ✓' : 'NO ✗'}`);
+    console.log(`  Output size: ${(output.length / 1024).toFixed(0)}KB`);
+  }
+}
+
+runTests().catch(console.error);

package/test-worker-viability.mjs

@@ -0,0 +1,140 @@
+import { renderSVG, initWasm, defineTemplate } from './dist/sdk/workers/index.js';
+import { Resvg } from '@resvg/resvg-wasm';
+import HME from 'h264-mp4-encoder';
+import React from 'react';
+
+// Typical real-world template
+const template = defineTemplate({
+  name: 'worker-test',
+  type: 'video',
+  size: { width: 1280, height: 720 },
+  video: { fps: 30, duration: 10 }, // 10 second clip
+  render: ({ tw, progress, frame }) => React.createElement(
+    'div',
+    { style: tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800') },
+    React.createElement('h1', {
+      style: tw('text-7xl font-black text-white ease-out-cubic enter-bounce-in-up/0/800')
+    }, 'LOOPWIND'),
+    React.createElement('p', {
+      style: tw('text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/400/600')
+    }, 'Worker Viability Test'),
+    React.createElement('div', { style: tw('flex gap-4 mt-8') },
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/900/400')
+      }, 'Feature 1'),
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/1050/400')
+      }, 'Feature 2'),
+      React.createElement('div', {
+        style: tw('px-4 py-2 bg-white/10 rounded-full text-white ease-out enter-fade-in-up/1200/400')
+      }, 'Feature 3')
+    )
+  )
+});
+
+async function runTests() {
+  console.log('=== Worker Viability Tests ===\n');
+  console.log('Testing various configurations to find what works in Workers');
+  console.log('Cloudflare Workers limits: 30s CPU time (paid), 128MB memory\n');
+
+  await initWasm();
+
+  const configs = [
+    { width: 640, height: 360, fps: 24, duration: 5, name: '360p/24fps/5s' },
+    { width: 640, height: 360, fps: 24, duration: 10, name: '360p/24fps/10s' },
+    { width: 854, height: 480, fps: 24, duration: 5, name: '480p/24fps/5s' },
+    { width: 854, height: 480, fps: 24, duration: 10, name: '480p/24fps/10s' },
+    { width: 1280, height: 720, fps: 24, duration: 5, name: '720p/24fps/5s' },
+    { width: 1280, height: 720, fps: 24, duration: 10, name: '720p/24fps/10s' },
+    { width: 1280, height: 720, fps: 30, duration: 5, name: '720p/30fps/5s' },
+    { width: 1280, height: 720, fps: 30, duration: 10, name: '720p/30fps/10s' },
+  ];
+
+  const results = [];
+
+  for (const config of configs) {
+    const { width, height, fps, duration, name } = config;
+    const totalFrames = fps * duration;
+
+    console.log(`\nTesting ${name} (${totalFrames} frames)...`);
+    const start = Date.now();
+
+    // SVG generation
+    const svgStart = Date.now();
+    const svgs = [];
+    for (let i = 0; i < totalFrames; i++) {
+      const progress = i / (totalFrames - 1);
+      const svg = await renderSVG(template, { progress, frame: i });
+      svgs.push(svg);
+    }
+    const svgTime = Date.now() - svgStart;
+
+    // RGBA conversion
+    const rgbaStart = Date.now();
+    const rgbaFrames = [];
+    for (let i = 0; i < totalFrames; i++) {
+      const resvg = new Resvg(svgs[i], { fitTo: { mode: 'width', value: width } });
+      const rendered = resvg.render();
+      rgbaFrames.push(rendered.pixels);
+    }
+    const rgbaTime = Date.now() - rgbaStart;
+
+    // H.264 encoding
+    const encodeStart = Date.now();
+    const encoder = await HME.createH264MP4Encoder();
+    encoder.width = width;
+    encoder.height = height;
+    encoder.frameRate = fps;
+    encoder.quantizationParameter = 23;
+    encoder.speed = 10;
+    encoder.groupOfPictures = fps;
+    encoder.initialize();
+
+    for (const frame of rgbaFrames) {
+      encoder.addFrameRgba(frame);
+    }
+    encoder.finalize();
+    const output = encoder.FS.readFile(encoder.outputFilename);
+    encoder.delete();
+    const encodeTime = Date.now() - encodeStart;
+
+    const totalTime = Date.now() - start;
+    const realTimeRatio = totalTime / (duration * 1000);
+    const workerViable = totalTime < 30000;
+
+    results.push({
+      name,
+      totalTime,
+      svgTime,
+      rgbaTime,
+      encodeTime,
+      realTimeRatio,
+      workerViable,
+      outputSize: output.length
+    });
+
+    console.log(`  Total: ${totalTime}ms (${realTimeRatio.toFixed(2)}x real-time)`);
+    console.log(`  SVG: ${svgTime}ms, RGBA: ${rgbaTime}ms, H.264: ${encodeTime}ms`);
+    console.log(`  Worker viable: ${workerViable ? 'YES ✓' : 'NO ✗'}`);
+  }
+
+  console.log('\n\n=== SUMMARY ===\n');
+  console.log('Config              | Total    | RGBA/frame | Ratio  | Worker OK');
+  console.log('--------------------|----------|------------|--------|----------');
+  for (const r of results) {
+    const frames = parseInt(r.name.split('/')[1]) * parseInt(r.name.split('/')[2].replace('s', ''));
+    const rgbaPerFrame = (r.rgbaTime / frames).toFixed(0);
+    console.log(
+      `${r.name.padEnd(19)} | ${(r.totalTime + 'ms').padEnd(8)} | ${(rgbaPerFrame + 'ms').padEnd(10)} | ${r.realTimeRatio.toFixed(2)}x   | ${r.workerViable ? 'YES ✓' : 'NO ✗'}`
+    );
+  }
+
+  console.log('\n=== CONCLUSIONS ===');
+  const viableConfigs = results.filter(r => r.workerViable);
+  if (viableConfigs.length > 0) {
+    console.log('Worker-viable configurations (< 30s):');
+    viableConfigs.forEach(r => console.log(`  - ${r.name}: ${r.totalTime}ms`));
+  }
+}
+
+runTests().catch(console.error);