loopwind 0.19.0 → 0.20.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.19.0",
+  "version": "0.20.2",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {

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);