loopwind 0.22.0 → 0.24.0

package/examples/nextjs-api/README.md

@@ -1,180 +0,0 @@
-# loopwind Next.js API Example
-
-This example demonstrates how to use the **loopwind SDK** in Next.js API routes to generate images and videos programmatically.
-
-## Features
-
-- ✅ Serverless image generation (OG images, social cards)
-- ✅ Serverless video generation (intro videos, animations)
-- ✅ No file system dependencies - templates defined in code
-- ✅ Works on Vercel, Netlify, and other serverless platforms
-- ✅ Edge Runtime compatible
-
-## Setup
-
-1. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-2. Run the development server:
-   ```bash
-   npm run dev
-   ```
-
-3. Test the API routes:
-   - Image: `http://localhost:3000/api/og-image?title=Hello&description=World`
-   - Video: `http://localhost:3000/api/intro-video?title=Welcome`
-
-## API Routes
-
-### `/api/og-image` - Generate OG Images
-
-Generate Open Graph images dynamically:
-
-```typescript
-import { defineTemplate, renderImage } from 'loopwind/sdk';
-
-const ogTemplate = defineTemplate({
-  name: 'og-image',
-  size: { width: 1200, height: 630 },
-  render: ({ tw, title, description }) => (
-    <div style={tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12')}>
-      <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
-      <p style={tw('text-2xl text-white/80')}>{description}</p>
-    </div>
-  ),
-});
-
-export default async function handler(req, res) {
-  const png = await renderImage(ogTemplate, {
-    title: req.query.title,
-    description: req.query.description,
-  });
-
-  res.setHeader('Content-Type', 'image/png');
-  res.send(png);
-}
-```
-
-**Usage:**
-```bash
-curl http://localhost:3000/api/og-image?title=Hello&description=World > image.png
-```
-
-### `/api/intro-video` - Generate Videos
-
-Generate MP4 videos dynamically:
-
-```typescript
-import { defineTemplate, renderVideo } from 'loopwind/sdk';
-
-const introTemplate = defineTemplate({
-  name: 'intro-video',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 3 },
-  render: ({ tw, progress, title }) => (
-    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
-      <h1 style={{ ...tw('text-8xl font-bold text-white'), opacity: progress }}>
-        {title}
-      </h1>
-    </div>
-  ),
-});
-
-export default async function handler(req, res) {
-  const mp4 = await renderVideo(introTemplate, {
-    title: req.query.title,
-  });
-
-  res.setHeader('Content-Type', 'video/mp4');
-  res.send(mp4);
-}
-```
-
-**Usage:**
-```bash
-curl http://localhost:3000/api/intro-video?title=Welcome > video.mp4
-```
-
-## Deploy to Vercel
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/tomtev/loopwind/tree/main/examples/nextjs-api)
-
-```bash
-npm install -g vercel
-vercel
-```
-
-## Key Concepts
-
-### 1. **Define Templates Programmatically**
-
-No file system needed - define templates directly in code:
-
-```typescript
-const template = defineTemplate({
-  name: 'my-template',
-  size: { width: 1200, height: 630 },
-  render: ({ tw, title }) => (
-    <div style={tw('flex items-center justify-center w-full h-full bg-white')}>
-      <h1 style={tw('text-4xl font-bold')}>{title}</h1>
-    </div>
-  ),
-});
-```
-
-### 2. **Render to Buffer**
-
-Get image/video as Buffer for maximum flexibility:
-
-```typescript
-const png = await renderImage(template, { title: 'Hello' });
-const mp4 = await renderVideo(videoTemplate, { title: 'Intro' });
-
-// Can save to file, return in API, upload to S3, etc.
-```
-
-### 3. **Tailwind Styling**
-
-Use Tailwind utility classes with the `tw` helper:
-
-```typescript
-render: ({ tw, title }) => (
-  <div style={tw('flex flex-col gap-4 p-8 bg-gradient-to-br from-blue-600 to-purple-700')}>
-    <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
-  </div>
-)
-```
-
-### 4. **Video Animations**
-
-Use `progress` and `frame` props for animations:
-
-```typescript
-render: ({ tw, progress, title }) => {
-  const opacity = progress; // 0 to 1
-  const scale = 0.5 + progress * 0.5; // 0.5 to 1
-
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full')}>
-      <h1 style={{ ...tw('text-8xl font-bold'), opacity, transform: `scale(${scale})` }}>
-        {title}
-      </h1>
-    </div>
-  );
-}
-```
-
-## Performance
-
-- **Images**: ~50-100ms per image (PNG/JPEG/WebP)
-- **Videos**: ~7s for 3-second Full HD video (1920×1080 @ 30fps)
-- **Edge Runtime**: Compatible with Vercel Edge Functions for global distribution
-
-## Learn More
-
-- [loopwind Documentation](https://loopwind.dev)
-- [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction)
-- [Vercel Deployment](https://vercel.com/docs)

package/examples/nextjs-api/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "loopwind-nextjs-example",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "loopwind": "latest",
-    "next": "^14.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.2.0",
-    "typescript": "^5.0.0"
-  }
-}

package/examples/nextjs-api/pages/api/intro-video.ts

@@ -1,53 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderVideo } from 'loopwind/sdk';
-
-// Define video template programmatically
-const introTemplate = defineTemplate({
-  name: 'intro-video',
-  type: 'video',
-  size: { width: 1920, height: 1080 },
-  video: { fps: 30, duration: 3 },
-  render: ({ tw, progress, title }) => {
-    // Fade in animation
-    const opacity = progress < 0.5 ? progress / 0.5 : 1;
-
-    return (
-      <div
-        style={tw(
-          'flex items-center justify-center w-full h-full bg-gradient-to-br from-black to-gray-900'
-        )}
-      >
-        <h1
-          style={{
-            ...tw('text-8xl font-bold text-white'),
-            opacity,
-          }}
-        >
-          {title}
-        </h1>
-      </div>
-    );
-  },
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { title = 'Welcome!' } = req.query;
-
-  try {
-    // Render video as MP4 buffer
-    const mp4 = await renderVideo(introTemplate, {
-      title: String(title),
-    });
-
-    // Return video
-    res.setHeader('Content-Type', 'video/mp4');
-    res.setHeader('Cache-Control', 's-maxage=3600');
-    res.send(mp4);
-  } catch (error) {
-    console.error('Error rendering video:', error);
-    res.status(500).json({ error: 'Failed to render video' });
-  }
-}

package/examples/nextjs-api/pages/api/og-image.ts

@@ -1,50 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderImage } from 'loopwind/sdk';
-
-// Define template programmatically
-const ogTemplate = defineTemplate({
-  name: 'og-image',
-  type: 'image',
-  size: { width: 1200, height: 630 },
-  render: ({ tw, title, description }) => (
-    <div
-      style={tw(
-        'flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between'
-      )}
-    >
-      <div style={tw('flex items-center gap-4')}>
-        <div style={tw('w-12 h-12 rounded-full bg-white/20')} />
-        <span style={tw('text-white/80 text-2xl')}>yoursite.com</span>
-      </div>
-
-      <div>
-        <h1 style={tw('text-6xl font-bold text-white mb-4')}>{title}</h1>
-        <p style={tw('text-2xl text-white/80')}>{description}</p>
-      </div>
-    </div>
-  ),
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { title = 'Welcome', description = 'Generated with loopwind SDK' } =
-    req.query;
-
-  try {
-    // Render image as PNG buffer
-    const png = await renderImage(ogTemplate, {
-      title: String(title),
-      description: String(description),
-    });
-
-    // Return image
-    res.setHeader('Content-Type', 'image/png');
-    res.setHeader('Cache-Control', 's-maxage=86400, stale-while-revalidate');
-    res.send(png);
-  } catch (error) {
-    console.error('Error rendering OG image:', error);
-    res.status(500).json({ error: 'Failed to render image' });
-  }
-}

package/examples/nextjs-template-import.ts

@@ -1,58 +0,0 @@
-/**
- * Example: Importing template files in Next.js API routes
- *
- * This demonstrates how to reuse _loopwind/templates/ files
- * in your SDK code with Next.js (or any other bundler)
- */
-
-import type { NextApiRequest, NextApiResponse } from 'next';
-import { defineTemplate, renderVideo } from 'loopwind/sdk';
-
-// Import your template file (Next.js/bundler handles TSX automatically)
-import * as videoIntroTemplate from '../../_loopwind/templates/video-intro/template';
-
-// Create SDK template from file with custom config
-const template = defineTemplate(videoIntroTemplate, {
-  config: {
-    colors: {
-      primary: '#ff0000',        // Override gradient colors
-      'indigo-900': '#1a0033',
-    },
-  },
-});
-
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  const { version = '1.0.0', changes } = req.query;
-
-  // Parse changes from query param (comma-separated)
-  const changeList = typeof changes === 'string'
-    ? changes.split(',').map(c => c.trim())
-    : undefined;
-
-  // Render video using imported template
-  const mp4 = await renderVideo(template, {
-    version: String(version),
-    changes: changeList,
-  });
-
-  res.setHeader('Content-Type', 'video/mp4');
-  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
-  res.send(mp4);
-}
-
-/**
- * Usage:
- *
- * GET /api/release-video?version=2.0.0&changes=New%20feature,Bug%20fix,Performance
- *
- * Returns: MP4 video with version 2.0.0 and custom changes list
- *
- * Benefits:
- * - Reuse CLI templates in API
- * - Override config for custom branding
- * - Type-safe with TypeScript
- * - No duplicate template code
- */

package/examples/sdk-video-preview.tsx

@@ -1,120 +0,0 @@
-/**
- * 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 });
-  }
-}