loopwind 0.18.1 → 0.20.1

package/examples/sdk-video-preview.tsx

@@ -0,0 +1,120 @@
+/**
+ * Example: Using the SDK Video Preview Component
+ *
+ * This demonstrates how to use previewVideo() and <VideoPreview>
+ * to display video templates in React applications.
+ */
+
+import { defineTemplate, previewVideo, VideoPreview, type PreviewFrames } from 'loopwind/sdk';
+import { useState, useEffect } from 'react';
+
+// Define a video template
+const introTemplate = defineTemplate({
+  name: 'intro-animation',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  render: ({ tw, progress, title = 'Hello World' }) => (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-r from-blue-500 to-purple-600')}>
+      <h1
+        style={{
+          ...tw('text-8xl font-bold text-white enter-fade-in/0/1000'),
+          opacity: progress
+        }}
+      >
+        {title}
+      </h1>
+    </div>
+  )
+});
+
+/**
+ * Example 1: Pre-render at build time or on server
+ * (Next.js getStaticProps, getServerSideProps, etc.)
+ */
+export async function getStaticProps() {
+  // Pre-render all frames on the server
+  const frames = await previewVideo(introTemplate, {
+    title: 'Welcome!'
+  });
+
+  return {
+    props: {
+      frames // Pass serialized frames to client
+    }
+  };
+}
+
+/**
+ * Example 2: Client component that displays pre-rendered frames
+ */
+export function IntroPreview({ frames }: { frames: PreviewFrames }) {
+  return (
+    <div className="container">
+      <h2>Video Preview</h2>
+      <VideoPreview
+        frames={frames}
+        autoPlay={true}
+        loop={true}
+        controls={true}
+        onFrameChange={(frame) => console.log(`Current frame: ${frame}`)}
+      />
+    </div>
+  );
+}
+
+/**
+ * Example 3: Loading frames on demand (client-side)
+ * Note: This only works if you can run Node.js code (e.g., Electron, desktop apps)
+ */
+export function DynamicPreview() {
+  const [frames, setFrames] = useState<PreviewFrames | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Load frames (only works in Node.js environment)
+    previewVideo(introTemplate, { title: 'Dynamic!' })
+      .then(setFrames)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div>Rendering preview...</div>;
+  if (!frames) return <div>Failed to load preview</div>;
+
+  return <VideoPreview frames={frames} autoPlay loop />;
+}
+
+/**
+ * Example 4: Minimal preview without controls
+ */
+export function MinimalPreview({ frames }: { frames: PreviewFrames }) {
+  return (
+    <VideoPreview
+      frames={frames}
+      controls={false}
+      autoPlay={true}
+      loop={true}
+      style={{ border: '2px solid #7c3aed', borderRadius: '8px' }}
+    />
+  );
+}
+
+/**
+ * Example 5: Next.js API Route for on-demand preview generation
+ */
+// pages/api/preview/[template].ts
+export async function handler(req, res) {
+  const { template } = req.query;
+  const props = req.body;
+
+  try {
+    // Generate preview frames on-demand
+    const frames = await previewVideo(introTemplate, props, {
+      format: 'data-url' // Use data URLs for easy JSON serialization
+    });
+
+    res.json(frames);
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+}

package/examples/template-compiler-workflow.ts

@@ -0,0 +1,251 @@
+/**
+ * Example: Template Compiler Workflow
+ *
+ * This example demonstrates the recommended production workflow for JSX templates:
+ *
+ * 1. ADMIN PANEL: Use compileTemplate() to transform JSX → JavaScript
+ * 2. DATABASE: Store the compiled JavaScript
+ * 3. PRODUCTION API: Use defineTemplateFromSource() to render
+ *
+ * Benefits:
+ * - JSX developer experience in admin panel
+ * - No @babel/standalone in production (36 MB smaller!)
+ * - Faster cold starts in serverless functions
+ * - Syntax errors caught at save time, not render time
+ */
+
+import { compileTemplate, containsJSX } from 'loopwind/sdk/compiler';
+import { defineTemplateFromSource, renderImage } from 'loopwind/sdk';
+import fs from 'fs/promises';
+
+// ============================================================================
+// PART 1: Admin Panel - Compile and Save
+// ============================================================================
+
+/**
+ * Simulates an admin panel API where users edit templates in a code editor
+ */
+async function adminPanelSaveTemplate(templateId: string, userCode: string) {
+  console.log('📝 Admin Panel: User saved template\n');
+  console.log('User-provided JSX:');
+  console.log(userCode.substring(0, 200) + '...\n');
+
+  try {
+    // Check if the code contains JSX
+    if (containsJSX(userCode)) {
+      console.log('✓ Detected JSX syntax, compiling...');
+
+      // Compile JSX to JavaScript
+      const compiled = compileTemplate(userCode);
+
+      console.log('✓ Compilation successful!');
+      console.log('  Original size:', userCode.length, 'bytes');
+      console.log('  Compiled size:', compiled.length, 'bytes\n');
+
+      // In a real app, you would save to a database:
+      // await db.templates.update(templateId, {
+      //   sourceCode: compiled,
+      //   updatedAt: new Date()
+      // });
+
+      // For this example, save to a file
+      await fs.writeFile(`template-${templateId}-compiled.js`, compiled);
+      console.log('✓ Saved compiled template to database\n');
+
+      return { success: true, compiled };
+    } else {
+      console.log('ℹ No JSX detected, saving as-is\n');
+      return { success: true, compiled: userCode };
+    }
+  } catch (error) {
+    console.error('✗ Compilation failed:', (error as Error).message);
+    return {
+      success: false,
+      error: (error as Error).message,
+    };
+  }
+}
+
+// ============================================================================
+// PART 2: Production API - Load and Render
+// ============================================================================
+
+/**
+ * Simulates a production API endpoint that renders templates
+ * This runs in Vercel, AWS Lambda, or any serverless function
+ */
+async function productionApiRenderTemplate(
+  templateId: string,
+  props: Record<string, any>
+) {
+  console.log('🚀 Production API: Rendering template\n');
+
+  try {
+    // Load pre-compiled template from database
+    // In a real app:
+    // const template = await db.templates.findById(templateId);
+    // const compiledCode = template.sourceCode;
+
+    // For this example, load from file
+    const compiledCode = await fs.readFile(
+      `template-${templateId}-compiled.js`,
+      'utf-8'
+    );
+
+    console.log('✓ Loaded pre-compiled template from database');
+    console.log('  Size:', compiledCode.length, 'bytes');
+    console.log('  No Babel needed! 🎉\n');
+
+    // Define template from pre-compiled JavaScript
+    // This is FAST - no JSX transformation at runtime
+    const templateDef = defineTemplateFromSource(compiledCode, {
+      config: {
+        colors: {
+          primary: '#3b82f6',
+          secondary: '#8b5cf6',
+        },
+      },
+    });
+
+    console.log('✓ Template loaded');
+    console.log('  Name:', templateDef.name);
+    console.log('  Type:', templateDef.type);
+    console.log('  Size:', templateDef.size.width, 'x', templateDef.size.height, '\n');
+
+    // Render the image
+    const png = await renderImage(templateDef, props);
+
+    console.log('✓ Image rendered');
+    console.log('  PNG size:', png.length, 'bytes\n');
+
+    return png;
+  } catch (error) {
+    console.error('✗ Rendering failed:', (error as Error).message);
+    throw error;
+  }
+}
+
+// ============================================================================
+// DEMO: Full Workflow
+// ============================================================================
+
+async function demo() {
+  console.log('='.repeat(70));
+  console.log('🎨 Template Compiler Workflow Demo');
+  console.log('='.repeat(70) + '\n');
+
+  // Example JSX template that a user might write in a code editor
+  const userJSX = `
+export const meta = {
+  name: 'social-card',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, description, author }) => (
+  <div style={tw('flex flex-col justify-between w-full h-full bg-gradient-to-br from-primary to-secondary p-12')}>
+    <div style={tw('flex flex-col')}>
+      <h1 style={tw('text-6xl font-bold text-white mb-4')}>
+        {title}
+      </h1>
+      <p style={tw('text-2xl text-white/90')}>
+        {description}
+      </p>
+    </div>
+    <div style={tw('flex items-center gap-4')}>
+      <div style={tw('w-16 h-16 rounded-full bg-white/20')} />
+      <span style={tw('text-xl text-white/80')}>{author}</span>
+    </div>
+  </div>
+);
+`;
+
+  const templateId = 'card-123';
+
+  // STEP 1: Admin panel compiles and saves
+  console.log('STEP 1: Admin Panel Workflow');
+  console.log('-'.repeat(70) + '\n');
+  await adminPanelSaveTemplate(templateId, userJSX);
+
+  // STEP 2: Production API loads and renders
+  console.log('STEP 2: Production API Workflow');
+  console.log('-'.repeat(70) + '\n');
+  const png = await productionApiRenderTemplate(templateId, {
+    title: 'Building with loopwind',
+    description: 'Generate images and videos programmatically',
+    author: 'Tommy Vedvik',
+  });
+
+  // Save the final result
+  await fs.writeFile('social-card-demo.png', png);
+  console.log('✅ Saved final image to social-card-demo.png\n');
+
+  // Cleanup
+  await fs.unlink(`template-${templateId}-compiled.js`);
+
+  console.log('='.repeat(70));
+  console.log('📊 Workflow Summary');
+  console.log('='.repeat(70));
+  console.log('\n✅ Benefits of this approach:\n');
+  console.log('1. Users write natural JSX syntax in admin panel');
+  console.log('2. JSX compiled once at save time (not every render)');
+  console.log('3. Compiled templates stored in database');
+  console.log('4. Production bundle 36 MB smaller (no @babel/standalone)');
+  console.log('5. Faster cold starts in serverless functions');
+  console.log('6. Syntax errors caught early (at save, not production)\n');
+
+  console.log('🔧 For Vercel/Lambda deployments:\n');
+  console.log('- Admin panel imports: loopwind/sdk/compiler');
+  console.log('- Production API imports: loopwind/sdk');
+  console.log('- Result: Only admin panel includes Babel\n');
+}
+
+// ============================================================================
+// Example Integration Code
+// ============================================================================
+
+/**
+ * Example: Next.js Admin Panel API Route
+ */
+async function exampleNextJSAdminRoute(req: any, res: any) {
+  const { templateId, code } = req.body;
+
+  try {
+    // Compile JSX
+    const compiled = compileTemplate(code);
+
+    // Save to database
+    // await db.templates.update(templateId, { sourceCode: compiled });
+
+    res.json({ success: true });
+  } catch (error) {
+    res.status(400).json({
+      error: 'Compilation failed',
+      message: (error as Error).message,
+    });
+  }
+}
+
+/**
+ * Example: Next.js Production API Route
+ */
+async function exampleNextJSProductionRoute(req: any, res: any) {
+  const { templateId, props } = req.body;
+
+  try {
+    // Load pre-compiled template
+    // const template = await db.templates.findById(templateId);
+    // const templateDef = defineTemplateFromSource(template.sourceCode);
+
+    // Render
+    // const png = await renderImage(templateDef, props);
+
+    // res.setHeader('Content-Type', 'image/png');
+    // res.send(png);
+  } catch (error) {
+    res.status(500).json({ error: 'Rendering failed' });
+  }
+}
+
+// Run the demo
+demo().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.18.1",
+  "version": "0.20.1",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {
@@ -15,6 +15,10 @@
     "./sdk": {
       "types": "./dist/sdk/index.d.ts",
       "default": "./dist/sdk/index.js"
+    },
+    "./sdk/compiler": {
+      "types": "./dist/sdk/compiler.d.ts",
+      "default": "./dist/sdk/compiler.js"
     }
   },
   "scripts": {
@@ -46,7 +50,6 @@
     "url": "https://github.com/tomtev/loopwind/issues"
   },
   "dependencies": {
-    "@babel/standalone": "^7.28.5",
     "@resvg/resvg-js": "^2.6.0",
     "@vitejs/plugin-react": "^5.1.1",
     "boxen": "^7.1.1",
@@ -75,6 +78,7 @@
     "vite": "^7.2.2"
   },
   "devDependencies": {
+    "@babel/standalone": "^7.28.5",
     "@types/babel__standalone": "^7.1.9",
     "@types/chalk-animation": "^1.6.3",
     "@types/express": "^5.0.5",

package/render-examples-600x400.mjs

@@ -0,0 +1,161 @@
+import { defineTemplate, renderVideo } from './dist/sdk/index.js';
+import fs from 'fs/promises';
+import React from 'react';
+
+const { createElement: h } = React;
+
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
+const templates = [
+  // 1. Bouncing ball with spring
+  createTemplateModule(
+    {
+      name: 'bouncing-ball',
+      description: 'Bouncing ball with spring easing animation',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-900 to-purple-900') },
+        h('div', { style: tw('w-48 h-48 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-2xl spring loop-translate-y-16/1000') })
+      )
+  ),
+
+  // 2. Linear easing
+  createTemplateModule(
+    {
+      name: 'easing-linear',
+      description: 'Bouncing ball with linear easing (constant speed)',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-slate-900 to-slate-800') },
+        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 shadow-2xl linear loop-translate-y-12/1000') }),
+        h('div', { style: tw('text-white text-2xl font-bold') }, 'Linear Easing'),
+        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Constant speed')
+      )
+  ),
+
+  // 3. Ease-in
+  createTemplateModule(
+    {
+      name: 'easing-ease-in',
+      description: 'Bouncing ball with ease-in (accelerating)',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-emerald-900 to-teal-800') },
+        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl ease-in loop-translate-y-12/1000') }),
+        h('div', { style: tw('text-white text-2xl font-bold') }, 'Ease In'),
+        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Slow start, fast end')
+      )
+  ),
+
+  // 4. Ease-out
+  createTemplateModule(
+    {
+      name: 'easing-ease-out',
+      description: 'Bouncing ball with ease-out (decelerating)',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-rose-900 to-pink-800') },
+        h('div', { style: tw('w-32 h-32 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 shadow-2xl ease-out loop-translate-y-12/1000') }),
+        h('div', { style: tw('text-white text-2xl font-bold') }, 'Ease Out'),
+        h('div', { style: tw('text-white/60 text-sm text-center max-w-md px-4') }, 'Fast start, slow end')
+      )
+  ),
+
+  // 5. Easing comparison (3 balls)
+  createTemplateModule(
+    {
+      name: 'easing-comparison',
+      description: 'Three balls with different easings side-by-side',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center gap-8 w-full h-full bg-gradient-to-br from-slate-900 to-gray-900 px-8') },
+        h('div', { style: tw('flex flex-col items-center gap-4') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 shadow-2xl linear loop-translate-y-10/800') }),
+          h('div', { style: tw('text-white text-sm font-bold') }, 'Linear'),
+          h('div', { style: tw('text-white/50 text-xs') }, '800ms')
+        ),
+        h('div', { style: tw('flex flex-col items-center gap-4') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl ease-out loop-translate-y-10/1000') }),
+          h('div', { style: tw('text-white text-sm font-bold') }, 'Ease Out'),
+          h('div', { style: tw('text-white/50 text-xs') }, '1000ms')
+        ),
+        h('div', { style: tw('flex flex-col items-center gap-4') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 shadow-2xl spring loop-translate-y-10/1200') }),
+          h('div', { style: tw('text-white text-sm font-bold') }, 'Spring'),
+          h('div', { style: tw('text-white/50 text-xs') }, '1200ms')
+        )
+      )
+  ),
+
+  // 6. Spring variants
+  createTemplateModule(
+    {
+      name: 'spring-variants',
+      description: 'Different spring configurations with varying bounce',
+      type: 'video',
+      size: { width: 600, height: 400 },
+      video: { fps: 60, duration: 4 },
+    },
+    ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-indigo-900 to-purple-900 px-6') },
+        h('div', { style: tw('flex flex-col items-center gap-3') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 shadow-2xl spring/1/100/10 loop-translate-y-10/1000') }),
+          h('div', { style: tw('text-white text-xs font-bold') }, 'Gentle'),
+          h('div', { style: tw('text-white/50 text-[10px]') }, '1/100/10')
+        ),
+        h('div', { style: tw('flex flex-col items-center gap-3') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl spring/1/170/8 loop-translate-y-10/1000') }),
+          h('div', { style: tw('text-white text-xs font-bold') }, 'Bouncy'),
+          h('div', { style: tw('text-white/50 text-[10px]') }, '1/170/8')
+        ),
+        h('div', { style: tw('flex flex-col items-center gap-3') },
+          h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl spring/1/200/15 loop-translate-y-10/1000') }),
+          h('div', { style: tw('text-white text-xs font-bold') }, 'Snappy'),
+          h('div', { style: tw('text-white/50 text-[10px]') }, '1/200/15')
+        )
+      )
+  ),
+];
+
+async function renderAll() {
+  console.log('Rendering all examples at 600x400...\n');
+
+  for (let i = 0; i < templates.length; i++) {
+    const templateModule = templates[i];
+    const template = defineTemplate(templateModule);
+    const outputName = `example-${templateModule.meta.name}.mp4`;
+    const outputPath = `output/${outputName}`;
+
+    console.log(`📹 Rendering ${outputName}...`);
+
+    try {
+      const buffer = await renderVideo(template, {}, { quality: 20 });
+      await fs.writeFile(outputPath, buffer);
+      console.log(`   ✔ ${outputName} (${(buffer.length / 1024).toFixed(1)}KB)\n`);
+    } catch (err) {
+      console.log(`   ✖ Failed: ${err.message}\n`);
+      console.error(err);
+    }
+  }
+
+  console.log('✅ All examples rendered at 600x400!');
+}
+
+renderAll().catch(console.error);

package/render-spring-variants-fixed.mjs

@@ -0,0 +1,60 @@
+import { defineTemplate, renderVideo } from './dist/sdk/index.js';
+import fs from 'fs/promises';
+import React from 'react';
+
+const { createElement: h } = React;
+
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
+// Spring variants with enter animations to show the bounce better
+const springVariantsTemplate = createTemplateModule(
+  {
+    name: 'spring-variants',
+    description: 'Different spring configurations with varying bounce',
+    type: 'video',
+    size: { width: 600, height: 400 },
+    video: { fps: 60, duration: 3 },
+  },
+  ({ tw }) =>
+    h('div', { style: tw('flex items-center justify-center gap-6 w-full h-full bg-gradient-to-br from-indigo-900 to-purple-900 px-6') },
+      h('div', { style: tw('flex flex-col items-center gap-3') },
+        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-cyan-500 shadow-2xl opacity-0 enter-ease-spring/1/100/10 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
+        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/0/800') }, 'Gentle'),
+        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/0/800') }, '1/100/10')
+      ),
+      h('div', { style: tw('flex flex-col items-center gap-3') },
+        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-pink-400 to-rose-500 shadow-2xl opacity-0 enter-ease-spring/1/170/8 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
+        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/200/800') }, 'Bouncy'),
+        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/200/800') }, '1/170/8')
+      ),
+      h('div', { style: tw('flex flex-col items-center gap-3') },
+        h('div', { style: tw('w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-green-500 shadow-2xl opacity-0 enter-ease-spring/1/200/15 enter-fade-in/0/1500 enter--translate-y-32/0/1500') }),
+        h('div', { style: tw('text-white text-xs font-bold opacity-0 enter-fade-in/400/800') }, 'Snappy'),
+        h('div', { style: tw('text-white/50 text-[10px] opacity-0 enter-fade-in/400/800') }, '1/200/15')
+      )
+    )
+);
+
+async function render() {
+  console.log('Rendering spring-variants with enter animations...\n');
+
+  const template = defineTemplate(springVariantsTemplate);
+  const outputPath = 'output/example-spring-variants.mp4';
+
+  try {
+    const buffer = await renderVideo(template, {}, { quality: 20 });
+    await fs.writeFile(outputPath, buffer);
+    console.log(`✔ example-spring-variants.mp4 (${(buffer.length / 1024).toFixed(1)}KB)\n`);
+    console.log('✅ Now you can see the spring differences!');
+    console.log('   - Gentle: smooth drop with slight overshoot bounce');
+    console.log('   - Bouncy: exaggerated drop with lots of bounce');
+    console.log('   - Snappy: fast drop with minimal/no bounce');
+  } catch (err) {
+    console.log(`✖ Failed: ${err.message}\n`);
+    console.error(err);
+  }
+}
+
+render().catch(console.error);

package/render-staggered-text.mjs

@@ -0,0 +1,56 @@
+import { defineTemplate, renderVideo } from './dist/sdk/index.js';
+import fs from 'fs/promises';
+import React from 'react';
+
+const { createElement: h } = React;
+
+function createTemplateModule(meta, render) {
+  return { meta, default: render };
+}
+
+const staggeredTextTemplate = createTemplateModule(
+  {
+    name: 'staggered-text',
+    description: 'Staggered text animation with spring easing',
+    type: 'video',
+    size: { width: 600, height: 400 },
+    video: { fps: 60, duration: 3 },
+  },
+  ({ tw }) => {
+    const text = 'loopwind';
+    const letters = text.split('');
+    const staggerDelay = 80; // ms between each letter
+
+    return h('div', { style: tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-violet-900 via-purple-900 to-fuchsia-900') },
+      h('div', { style: tw('flex items-center justify-center gap-1') },
+        ...letters.map((letter, i) =>
+          h('span', {
+            key: i,
+            style: tw(`text-8xl font-black bg-clip-text text-transparent bg-gradient-to-br from-cyan-400 via-blue-400 to-purple-400 opacity-0 enter-ease-spring enter-fade-in/${i * staggerDelay}/600 enter--translate-y-12/${i * staggerDelay}/600`)
+          }, letter)
+        )
+      )
+    );
+  }
+);
+
+async function render() {
+  console.log('Rendering staggered-text animation...\n');
+
+  const template = defineTemplate(staggeredTextTemplate);
+  const outputPath = 'output/example-staggered-text.mp4';
+
+  try {
+    const buffer = await renderVideo(template, {}, { quality: 20 });
+    await fs.writeFile(outputPath, buffer);
+    console.log(`✔ example-staggered-text.mp4 (${(buffer.length / 1024).toFixed(1)}KB)\n`);
+    console.log('✅ Staggered text animation complete!');
+    console.log('   Each letter animates in with spring easing');
+    console.log('   80ms delay between each letter');
+  } catch (err) {
+    console.log(`✖ Failed: ${err.message}\n`);
+    console.error(err);
+  }
+}
+
+render().catch(console.error);