loopwind 0.22.0 → 0.24.0

package/render-examples-600x400.mjs

@@ -1,161 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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);

package/test-font-files.mjs

@@ -1,72 +0,0 @@
-/**
- * Test for font files in SDK StyleConfig
- * Run with: node test-font-files.mjs
- */
-
-import { defineTemplate, renderImage } from './dist/sdk/index.js';
-import React from 'react';
-
-const { createElement: h } = React;
-
-console.log('📝 Testing font files in StyleConfig...\n');
-
-// Test with external URL (Google Fonts mirror)
-const config = {
-  colors: {
-    text: '#000000',
-  },
-  fonts: {
-    sans: {
-      family: ['Inter', 'sans-serif'],
-      files: [
-        {
-          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
-          weight: 400,
-        },
-        {
-          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
-          weight: 700,
-        },
-      ],
-    },
-  },
-};
-
-const template = defineTemplate({
-  name: 'test-font-files',
-  size: { width: 600, height: 400 },
-  config,
-  render: ({ tw }) =>
-    h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
-      h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
-      h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
-    ),
-});
-
-try {
-  console.log('⏳ Rendering with external font URLs...');
-  const svg = await renderImage(template, {}, { format: 'svg' });
-
-  console.log('✅ SUCCESS: Font files loaded from URLs');
-  console.log(`✅ Generated SVG: ${svg.length} bytes`);
-
-  // Also test PNG to ensure fonts render correctly
-  console.log('\n⏳ Testing PNG rendering with fonts...');
-  const png = await renderImage(template, {}, { format: 'png' });
-
-  if (png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47) {
-    console.log('✅ SUCCESS: PNG generated with fonts');
-    console.log(`✅ PNG size: ${png.length} bytes`);
-  } else {
-    console.error('❌ FAIL: Invalid PNG signature');
-    process.exit(1);
-  }
-
-  console.log('\n🎉 All font file tests passed!');
-  console.log('\n✨ Font files with URLs work correctly in SDK StyleConfig');
-
-} catch (error) {
-  console.error('❌ ERROR:', error.message);
-  console.error(error.stack);
-  process.exit(1);
-}

package/test-jsx-support.mjs

@@ -1,146 +0,0 @@
-/**
- * Test JSX support with compileTemplate + defineTemplateFromSource
- *
- * This test demonstrates the recommended workflow:
- * 1. compileTemplate() - transforms JSX to JavaScript (admin/build time)
- * 2. defineTemplateFromSource() - loads pre-compiled JavaScript (production)
- */
-
-import { defineTemplateFromSource, renderImage } from './dist/sdk/index.js';
-import { compileTemplate } from './dist/sdk/compiler.js';
-
-console.log('Testing JSX Support with Pre-compilation\n');
-
-// Test 1: Simple JSX template
-const simpleJSX = `
-export const meta = {
-  name: 'jsx-test',
-  type: 'image',
-  size: { width: 400, height: 200 }
-};
-
-export default ({ tw, title }) => (
-  <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
-    <h1 style={tw('text-4xl font-bold text-white')}>{title}</h1>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript (admin/build time)
-  const compiledJS = compileTemplate(simpleJSX);
-
-  // Step 2: Load compiled template (production runtime)
-  const template1 = defineTemplateFromSource(compiledJS);
-  const png1 = await renderImage(template1, { title: 'JSX Works!' });
-  console.log('✓ Simple JSX template works');
-  console.log('  PNG size:', png1.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Simple JSX template failed:', error.message);
-}
-
-// Test 2: Nested JSX
-const nestedJSX = `
-export const meta = {
-  name: 'nested-jsx',
-  size: { width: 600, height: 300 }
-};
-
-export default ({ tw, title, subtitle, items }) => (
-  <div style={tw('flex flex-col w-full h-full bg-white p-8')}>
-    <h1 style={tw('text-5xl font-bold text-gray-900 mb-4')}>{title}</h1>
-    <p style={tw('text-2xl text-gray-600 mb-6')}>{subtitle}</p>
-    <div style={tw('flex gap-4')}>
-      {items.map((item, i) => (
-        <div style={tw('px-4 py-2 bg-blue-500 text-white rounded')}>
-          {item}
-        </div>
-      ))}
-    </div>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS2 = compileTemplate(nestedJSX);
-
-  // Step 2: Load compiled template
-  const template2 = defineTemplateFromSource(compiledJS2);
-  const png2 = await renderImage(template2, {
-    title: 'Nested JSX',
-    subtitle: 'With multiple levels',
-    items: ['One', 'Two', 'Three']
-  });
-  console.log('✓ Nested JSX template works');
-  console.log('  PNG size:', png2.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Nested JSX template failed:', error.message);
-}
-
-// Test 3: Self-closing tags
-const selfClosing = `
-export const meta = {
-  name: 'self-closing',
-  size: { width: 400, height: 200 }
-};
-
-export default ({ tw }) => (
-  <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-100 gap-4')}>
-    <div style={tw('w-32 h-32 bg-red-500 rounded-full')} />
-    <div style={tw('w-32 h-32 bg-blue-500 rounded-lg')} />
-    <div style={tw('w-32 h-32 bg-green-500')} />
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS3 = compileTemplate(selfClosing);
-
-  // Step 2: Load compiled template
-  const template3 = defineTemplateFromSource(compiledJS3);
-  const png3 = await renderImage(template3, {});
-  console.log('✓ Self-closing tags work');
-  console.log('  PNG size:', png3.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Self-closing tags failed:', error.message);
-}
-
-// Test 4: Complex attributes
-const complexAttrs = `
-export const meta = {
-  name: 'complex-attrs',
-  size: { width: 500, height: 250 }
-};
-
-export default ({ tw, title, count }) => (
-  <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 p-8')}>
-    <h1 style={tw('text-4xl font-bold text-white mb-4')}>{title}</h1>
-    <div style={tw('flex items-center gap-2')}>
-      <span style={tw('text-2xl text-white')}>Count:</span>
-      <span style={tw('text-3xl font-bold text-yellow-300')}>{count}</span>
-    </div>
-  </div>
-);
-`;
-
-try {
-  // Step 1: Compile JSX to JavaScript
-  const compiledJS4 = compileTemplate(complexAttrs);
-
-  // Step 2: Load compiled template
-  const template4 = defineTemplateFromSource(compiledJS4);
-  const png4 = await renderImage(template4, { title: 'Complex JSX', count: 42 });
-  console.log('✓ Complex attributes work');
-  console.log('  PNG size:', png4.length, 'bytes\n');
-} catch (error) {
-  console.error('✗ Complex attributes failed:', error.message);
-}
-
-console.log('✅ All JSX tests completed!');
-console.log('\nWorkflow Summary:');
-console.log('1. compileTemplate() - Transform JSX → JS (admin panel)');
-console.log('2. defineTemplateFromSource() - Load compiled JS (production)');
-console.log('3. renderImage() - Render with props');
-console.log('\nBenefit: No @babel/standalone in production! 🎉');