loopwind 0.10.3 → 0.10.4

package/website/dist/llm.txt

@@ -1,7 +1,7 @@
-# dsgn - Complete Documentation for LLMs
+# loopwind - Complete Documentation for LLMs
 
-This is a comprehensive, single-file documentation for dsgn, optimized for LLM consumption.
-Generated: 2025-11-17T21:03:55.855Z
+This is a comprehensive, single-file documentation for loopwind, optimized for LLM consumption.
+Generated: 2025-11-18T13:58:54.278Z
 
 ---
 
@@ -11,6 +11,38 @@ Generated: 2025-11-17T21:03:55.855Z
 FILE: index.mdx
 ================================================================================
 
+import CodeVideoDemo from '../components/CodeVideoDemo.astro';
+
+export const videoCode = `export default function VideoIntro({ tw, title, subtitle }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 gap-4')}>
+      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in/0/0.4')}>
+        {title}
+      </h1>
+      <p style={tw('text-2xl text-white/80 ease-out animate-fade-in-up/0.3/0.7')}>
+        {subtitle}
+      </p>
+    </div>
+  );
+}`;
+
+## Video Templates
+
+<CodeVideoDemo 
+  code={videoCode}
+  videoSrc="/demo-intro.mp4"
+  title="Animated Intro Example"
+/>
+
+**Render it:**
+```bash
+loopwind render video-intro '{"title":"Welcome!","subtitle":"Built with loopwind"}' --out intro.mp4
+```
+
+**Output:** `_loopwind/outputs/intro.mp4` (1920×1080px, 3 seconds @ 30fps)
+
+**Perfect for:** Social media intros, animated logos, tutorial overlays, and product showcases.
+
 ## Image Templates
 
 ```tsx
@@ -20,7 +52,7 @@ export default function OGImage({ tw, image, title, description, logo }) {
     <div style={tw('flex w-full h-full bg-white')}>
       <div style={tw('flex-1 flex flex-col justify-between p-12')}>
         <img src={image(logo)} style={tw('h-12 w-auto')} />
-        
+
         <div>
           <h1 style={tw('text-5xl font-bold text-gray-900 mb-4')}>
             {title}
@@ -29,13 +61,13 @@ export default function OGImage({ tw, image, title, description, logo }) {
             {description}
           </p>
         </div>
-        
+
         <p style={tw('text-gray-400')}>yoursite.com</p>
       </div>
-      
+
       <div style={tw('flex-1')}>
-        <img 
-          src={image(featuredImage)} 
+        <img
+          src={image(featuredImage)}
           style={tw('w-full h-full object-cover')}
         />
       </div>
@@ -46,70 +78,39 @@ export default function OGImage({ tw, image, title, description, logo }) {
 
 **Render it:**
 ```bash
-dsgn render og-image '{"title":"Hello World","description":"My awesome blog post"}'
+loopwind render og-image '{"title":"Hello World","description":"My awesome blog post"}'
 ```
 
-**Output:** `og-image.png` (1200×630px) in your current directory
+**Output:** `_loopwind/outputs/og-image.png` (1200×630px)
 
 **Perfect for:** Open Graph images, Twitter cards, blog headers, product cards, and quote graphics.
 
-## Video Templates
-
-```tsx
-// Animated intro video
-export default function VideoIntro({ tw, progress, title }) {
-  // Fade in animation
-  const titleOpacity = progress < 0.3 ? progress / 0.3 : 1;
-  
-  return (
-    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700')}>
-      <h1 
-        style={{
-          ...tw('text-8xl font-bold text-white'),
-          opacity: titleOpacity
-        }}
-      >
-        {title}
-      </h1>
-    </div>
-  );
-}
-```
-
-**Render it:**
-```bash
-dsgn render video-intro '{"title":"Welcome!"}' --out intro.mp4
-```
-
-**Output:** `intro.mp4` (1920×1080px, 3 seconds @ 30fps) in your current directory
-
-**Perfect for:** Social media intros, animated logos, tutorial overlays, and product showcases.
-
 ## Features
 
 - 🎨 **shadcn/ui Design System**: Beautiful, semantic colors out of the box (`text-primary`, `bg-card`, etc.)
 - ✨ **Template-based**: Install design templates like you install UI components
+- 🖼️ **Serverless Image Rendering**: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers
+- 🎬 **Serverless Video Rendering**: WASM-based MP4 encoding - 12x faster than traditional approaches
 - 🎨 **Tailwind CSS Support**: Style templates with Tailwind utility classes + opacity modifiers (`bg-primary/50`)
 - 📱 **Built-in Helpers**: QR codes, image embedding, video backgrounds, template composition
 - ✅ **Smart Validation**: Automatic prop and template validation with helpful error messages
 - 🚀 **Framework-agnostic**: Works with Node, Bun, Deno, Laravel, Python, and more
 - 🤖 **Agent-friendly**: Machine-readable metadata for LLMs
-- 📦 **Easy installation**: `npx dsgn add template-name`
-- 🎬 **Video support**: Render animated videos with frame-by-frame control
-- ⚡ **Powered by Satori**: Generate images from React + Tailwind
+- 📦 **Easy installation**: `npx loopwind add template-name`
+- 🌐 **Pure JavaScript/WASM**: No native dependencies, works everywhere
 
 ## Quick Start
 
 ### Installation
 
 ```bash
-npm install -g dsgn
+npm install -g loopwind
 ```
 
 Or use with npx:
 
 ```bash
-npx dsgn --help
+npx loopwind --help
 ```
 
 ### Initialize in Your Project
@@ -117,163 +118,110 @@ npx dsgn --help
 Navigate to any project folder and run:
 
 ```bash
-dsgn init
+loopwind init
 ```
 
-This creates a `_dsgn/` folder where templates will be installed.
+This creates a `_loopwind/` folder where templates and outputs will be located.
 
 ### Install a Template
 
-Templates can be installed from multiple sources:
-
-#### 1. Official Registry (Coming Soon)
+#### 1. Official Templates
 
 ```bash
-dsgn add banner-hero
-dsgn add og-image --registry https://custom-registry.com/r
+loopwind add image-template
+loopwind add video-template
 ```
 
-#### 2. GitHub Repositories
-
-```bash
-# From a GitHub repo (looks for template.json in repo root)
-dsgn add github:username/repo
-
-# From a specific path in the repo
-dsgn add github:username/repo/templates/banner-hero
-
-# From an organization
-dsgn add github:myorg/design-templates/social-media/og-image
-```
-
-#### 3. Direct URLs
-
-```bash
-# Install from any publicly accessible URL
-dsgn add https://example.com/templates/my-template.json
-dsgn add https://cdn.example.com/templates/awesome-banner.json
-```
-
-**Requirements:**
-- URL must return JSON in the registry template format
-- Must be publicly accessible (no authentication)
-
-#### 4. Local Filesystem
-
-```bash
-# Relative path
-dsgn add ./my-templates/banner-hero
-dsgn add ../shared-templates/product-card
-
-# Absolute path
-dsgn add /Users/you/templates/social-card
-```
-
-**Use cases:**
-- Development and testing
-- Private templates
-- Shared team templates (monorepo)
-- Before publishing to registry
-
-Templates are installed to: `_dsgn/templates/<template>/` (customizable in `dsgn.json`)
+Templates are installed to: `_loopwind/templates/<template>/` (customizable in `loopwind.json`)
 
 **Benefits:**
-- Templates are local to your project (like npm packages)
-- Different projects can use different template versions
+- Templates are local to your project
 - Version controlled with your project
 - Easy to share within your team
-- Works offline once installed
 
-### Render an Image
+### Output a Template
 
 ```bash
-dsgn render banner-hero '{"title":"Hello World","subtitle":"Built with dsgn"}'
-```
-
-Output: `banner-hero.png` (1600x900px)
-
-You can also use a props file:
-```bash
-dsgn render banner-hero props.json
+loopwind render template-name '{"title":"Hello World","subtitle":"Built with loopwind"}'
 ```
 
 ## Commands
 
-### `dsgn add <source>`
+### `loopwind add <source>`
 
 Install a template from various sources:
 
 ```bash
 # From registry
-dsgn add banner-hero
+loopwind add banner-hero
 
 # From GitHub
-dsgn add github:username/repo/path/to/template
+loopwind add github:username/repo/path/to/template
 
 # From URL
-dsgn add https://example.com/my-template.json
+loopwind add https://example.com/my-template.json
 
 # From local path
-dsgn add ./my-templates/custom-banner
+loopwind add ./my-templates/custom-banner
 ```
 
-### `dsgn list`
+### `loopwind list`
 
 List all installed templates:
 
 ```bash
-dsgn list
+loopwind list
 ```
 
-### `dsgn render <template> <props> [options]`
+### `loopwind render <template> <props> [options]`
 
 Render an image or video:
 
 ```bash
 # Image with inline props
-dsgn render banner-hero '{"title":"Hello World"}'
+loopwind render banner-hero '{"title":"Hello World"}'
 
 # Video with inline props
-dsgn render video-intro '{"title":"Welcome"}' --out intro.mp4
+loopwind render video-intro '{"title":"Welcome"}' --out intro.mp4
 
 # Using a props file
-dsgn render banner-hero props.json
+loopwind render banner-hero props.json
 
 # Custom output
-dsgn render banner-hero '{"title":"Hello"}' --out custom-name.png
+loopwind render banner-hero '{"title":"Hello"}' --out custom-name.png
 
 # Different format
-dsgn render banner-hero '{"title":"Hello"}' --format jpeg
+loopwind render banner-hero '{"title":"Hello"}' --format jpeg
 ```
 
 Options:
-- `--out, -o` - Output filename (default: `<template>.<ext>`)
+- `--out, -o` - Output filename (default: `_loopwind/outputs/<template>.<ext>`)
 - `--format` - Output format: `png`, `jpeg`, `svg` (images only)
 - `--quality` - JPEG quality 1-100 (default: 92)
 
-### `dsgn validate <template>`
+### `loopwind validate <template>`
 
 Validate a template:
 
 ```bash
-dsgn validate banner-hero
+loopwind validate banner-hero
 ```
 
 Checks:
 - Template file exists and is valid React
-- `meta.json` exists and is valid
+- `export const meta` exists and is valid
 - Required props are defined
 - Fonts exist (if specified)
 
-### `dsgn init`
+### `loopwind init`
 
-Initialize dsgn in a project:
+Initialize loopwind in a project:
 
 ```bash
-dsgn init
+loopwind init
 ```
 
-Creates `dsgn.json` configuration file.
+Creates `loopwind.json` configuration file.
 
 ## Next Steps
 
@@ -296,7 +244,7 @@ FILE: templates.mdx
 
 ## Overview
 
-dsgn supports installing templates from multiple sources:
+loopwind supports installing templates from multiple sources:
 
 1. **Official Registry** (default)
 2. **Direct URLs**
@@ -305,25 +253,25 @@ dsgn supports installing templates from multiple sources:
 
 ## 1. Official Registry (Default)
 
-Install templates from the official dsgn registry at `https://dsgncli.com/r`
+Install templates from the official loopwind registry at `https://loopwind.dev/r`
 
 ```bash
-dsgn add banner-hero
-dsgn add product-card
-dsgn add social-og-image
+loopwind add banner-hero
+loopwind add product-card
+loopwind add social-og-image
 ```
 
 **How it works:**
-- Fetches from: `https://dsgncli.com/r/banner-hero`
+- Fetches from: `https://loopwind.dev/r/banner-hero`
 - Returns JSON with template files
-- Installs to: `_dsgn/templates/banner-hero/`
+- Installs to: `_loopwind/templates/banner-hero/`
 
 ### Custom Registry
 
 Use a different registry:
 
 ```bash
-dsgn add banner-hero --registry https://my-registry.com/templates
+loopwind add banner-hero --registry https://my-registry.com/templates
 ```
 
 ## 2. Direct URLs
@@ -331,8 +279,8 @@ dsgn add banner-hero --registry https://my-registry.com/templates
 Install a template from any publicly accessible URL:
 
 ```bash
-dsgn add https://example.com/templates/my-template.json
-dsgn add https://cdn.example.com/templates/awesome-banner.json
+loopwind add https://example.com/templates/my-template.json
+loopwind add https://cdn.example.com/templates/awesome-banner.json
 ```
 
 **Requirements:**
@@ -365,13 +313,13 @@ Install templates directly from GitHub repos:
 
 ```bash
 # From a GitHub repo (looks for template.json in repo root)
-dsgn add github:username/repo
+loopwind add github:username/repo
 
 # From a specific path in the repo
-dsgn add github:username/repo/templates/banner-hero
+loopwind add github:username/repo/templates/banner-hero
 
 # From an organization
-dsgn add github:myorg/design-templates/social-media/og-image
+loopwind add github:myorg/design-templates/social-media/og-image
 ```
 
 **How it works:**
@@ -404,11 +352,11 @@ Install templates from your local filesystem:
 
 ```bash
 # Relative path
-dsgn add ./my-templates/banner-hero
-dsgn add ../shared-templates/product-card
+loopwind add ./my-templates/banner-hero
+loopwind add ../shared-templates/product-card
 
 # Absolute path
-dsgn add /Users/you/templates/social-card
+loopwind add /Users/you/templates/social-card
 ```
 
 **Use cases:**
@@ -419,9 +367,9 @@ dsgn add /Users/you/templates/social-card
 
 ## Template Installation Directory
 
-Templates are installed to `_dsgn/templates/<template-name>/` by default.
+Templates are installed to `_loopwind/templates/<template-name>/` by default.
 
-Customize this in `dsgn.json`:
+Customize this in `loopwind.json`:
 
 ```json
 {
@@ -455,22 +403,22 @@ FILE: images.mdx
 
 # Image Rendering
 
-Generate beautiful images from React components using dsgn's powerful image rendering engine powered by Satori.
+Generate beautiful images from React components using loopwind's powerful image rendering engine powered by Satori.
 
 ## Quick Start
 
 ```bash
 # Render an image template with inline props
-dsgn render banner-hero '{"title":"Hello World","subtitle":"Welcome"}'
+loopwind render banner-hero '{"title":"Hello World","subtitle":"Welcome"}'
 
 # Custom output name
-dsgn render banner-hero '{"title":"Hello"}' --out custom-name.png
+loopwind render banner-hero '{"title":"Hello"}' --out custom-name.png
 
 # Different format
-dsgn render banner-hero '{"title":"Hello"}' --format jpeg --quality 95
+loopwind render banner-hero '{"title":"Hello"}' --format jpeg --quality 95
 
 # Or use a props file
-dsgn render banner-hero props.json
+loopwind render banner-hero props.json
 ```
 
 ## Image Template Structure
@@ -479,6 +427,14 @@ dsgn render banner-hero props.json
 
 ```tsx
 // banner-hero.tsx
+export const meta = {
+  name: "banner-hero",
+  type: "image",
+  description: "Hero banner with gradient background",
+  size: { width: 1600, height: 900 },
+  props: { title: "string", subtitle: "string" }
+};
+
 export default function BannerHero({ title, subtitle, tw }) {
   return (
     <div style={tw('flex flex-col justify-center items-center w-full h-full bg-gradient-to-br from-purple-600 to-blue-500 p-12')}>
@@ -493,29 +449,11 @@ export default function BannerHero({ title, subtitle, tw }) {
 }
 ```
 
-### Metadata (meta.json)
-
-```json
-{
-  "name": "banner-hero",
-  "type": "image",
-  "description": "Hero banner with gradient background",
-  "size": {
-    "width": 1600,
-    "height": 900
-  },
-  "props": {
-    "title": "string",
-    "subtitle": "string"
-  }
-}
-```
-
 ### Props File
 
 ```json
 {
-  "title": "Welcome to dsgn",
+  "title": "Welcome to loopwind",
   "subtitle": "Generate beautiful images from React"
 }
 ```
@@ -525,8 +463,8 @@ export default function BannerHero({ title, subtitle, tw }) {
 ### PNG (Default)
 
 ```bash
-dsgn render my-template '{"title":"Hello"}'
-# Output: my-template.png
+loopwind render my-template '{"title":"Hello"}'
+# Output: _loopwind/outputs/my-template.png
 ```
 
 **Best for:**
@@ -538,7 +476,7 @@ dsgn render my-template '{"title":"Hello"}'
 ### JPEG
 
 ```bash
-dsgn render my-template '{"title":"Hello"}' --format jpeg --quality 92
+loopwind render my-template '{"title":"Hello"}' --format jpeg --quality 92
 ```
 
 **Options:**
@@ -553,7 +491,7 @@ dsgn render my-template '{"title":"Hello"}' --format jpeg --quality 92
 ### SVG
 
 ```bash
-dsgn render my-template '{"title":"Hello"}' --format svg
+loopwind render my-template '{"title":"Hello"}' --format svg
 ```
 
 **Best for:**
@@ -753,13 +691,13 @@ Render multiple images at once:
 
 ```bash
 # Using a script with inline props
-dsgn render my-template '{"title":"Image 1"}'
-dsgn render my-template '{"title":"Image 2"}'
-dsgn render my-template '{"title":"Image 3"}'
+loopwind render my-template '{"title":"Image 1"}'
+loopwind render my-template '{"title":"Image 2"}'
+loopwind render my-template '{"title":"Image 3"}'
 
 # Or loop through props files
 for props in props/*.json; do
-  dsgn render my-template "$props"
+  loopwind render my-template "$props"
 done
 ```
 
@@ -794,18 +732,21 @@ Templates are cached after first load for faster subsequent renders.
 
 ### Fonts Not Rendering
 
-Make sure fonts are properly loaded in `meta.json`:
+Make sure fonts are properly defined in your template's meta:
 
-```json
-{
-  "fonts": [
+```tsx
+export const meta = {
+  name: "my-template",
+  // ...
+  fonts: [
     {
-      "name": "Inter",
-      "path": "fonts/Inter-Bold.woff",
-      "weight": 700
+      name: "Inter",
+      path: "fonts/Inter-Bold.woff",
+      weight: 700,
+      style: "normal"
     }
   ]
-}
+};
 ```
 
 ### Images Not Loading
@@ -846,13 +787,13 @@ Create animated videos programmatically using React components. Perfect for auto
 
 ```bash
 # Render a video template with inline props
-dsgn render video-intro '{"title":"Welcome!"}' --out intro.mp4
+loopwind render video-intro '{"title":"Welcome!"}' --out intro.mp4
 
 # With custom encoding
-dsgn render video-intro '{"title":"Welcome!"}' --preset ultrafast
+loopwind render video-intro '{"title":"Welcome!"}' --preset ultrafast
 
 # Or use a props file
-dsgn render video-intro props.json --out intro.mp4
+loopwind render video-intro props.json --out intro.mp4
 ```
 
 ## Video Template Structure
@@ -861,13 +802,22 @@ dsgn render video-intro props.json --out intro.mp4
 
 ```tsx
 // video-intro.tsx
+export const meta = {
+  name: "video-intro",
+  type: "video",
+  description: "Animated intro with fade-in title",
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 },
+  props: { title: "string" }
+};
+
 export default function VideoIntro({ tw, title, frame, progress }) {
   // Animate opacity based on progress
   const titleOpacity = progress < 0.3 ? progress / 0.3 : 1;
-  
+
   return (
     <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700')}>
-      <h1 
+      <h1
         style={{
           ...tw('text-8xl font-bold text-white'),
           opacity: titleOpacity
@@ -875,7 +825,7 @@ export default function VideoIntro({ tw, title, frame, progress }) {
       >
         {title}
       </h1>
-      
+
       {/* Show frame counter */}
       <div style={tw('absolute bottom-10 right-10 text-white text-sm')}>
         Frame: {frame}
@@ -885,27 +835,6 @@ export default function VideoIntro({ tw, title, frame, progress }) {
 }
 ```
 
-### Metadata (meta.json)
-
-```json
-{
-  "name": "video-intro",
-  "type": "video",
-  "description": "Animated intro with fade-in title",
-  "size": {
-    "width": 1920,
-    "height": 1080
-  },
-  "video": {
-    "fps": 30,
-    "duration": 3
-  },
-  "props": {
-    "title": "string"
-  }
-}
-```
-
 ### Props File
 
 ```json
@@ -946,7 +875,48 @@ export default function MyVideo({ progress }) {
 
 ## Animation Patterns
 
-### Fade In/Out
+### Pulse Animation
+
+```tsx
+export default function PulseVideo({ tw, title }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      <h1 style={tw('text-8xl font-bold text-white animate-pulse')}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+### Spin Animation
+
+```tsx
+export default function SpinVideo({ tw, title }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-purple-600 to-pink-600 gap-8')}>
+      <div style={tw('w-32 h-32 border-8 border-white border-t-transparent rounded-full animate-spin')} />
+      <h1 style={tw('text-6xl font-bold text-white')}>{title}</h1>
+    </div>
+  );
+}
+```
+
+### Bounce Animation
+
+```tsx
+export default function BounceVideo({ tw, title }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-blue-600')}>
+      <h1 style={tw('text-8xl font-bold text-white animate-bounce')}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+### Fade with Progress
 
 ```tsx
 export default function FadeVideo({ progress, title, tw }) {
@@ -1002,18 +972,76 @@ export default function ScaleVideo({ progress, tw }) {
 }
 ```
 
-### Rotation
+### Progress-Based Rotation
 
 ```tsx
 export default function RotateVideo({ progress, tw }) {
-  // Rotate 360 degrees
+  // Rotate 360 degrees based on progress
   const rotation = progress * 360;
   
   return (
-    <div style={{ 
-      ...tw('w-32 h-32 bg-blue-500 rounded-lg'),
-      transform: `rotate(${rotation}deg)`
-    }}>
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      <div style={{ 
+        ...tw('w-32 h-32 bg-blue-500 rounded-lg'),
+        transform: `rotate(${rotation}deg)`
+      }}>
+      </div>
+    </div>
+  );
+}
+```
+
+### Using Tailwind Animations
+
+Combine Tailwind's built-in animations with progress-based animations:
+
+```tsx
+export default function PulsingLogo({ tw, progress, image, logo }) {
+  // Fade in based on progress
+  const opacity = Math.min(progress / 0.3, 1);
+  
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      {/* Tailwind's animate-pulse + custom opacity */}
+      <div style={{ ...tw('animate-pulse'), opacity }}>
+        <img src={image(logo)} style={tw('w-64 h-64')} />
+      </div>
+    </div>
+  );
+}
+```
+
+**Available Tailwind animations:**
+- `animate-spin` - Continuous rotation
+- `animate-pulse` - Subtle fade in/out
+- `animate-bounce` - Bouncing motion
+- `animate-ping` - Ripple effect (great for badges)
+
+**Example with multiple animations:**
+
+```tsx
+export default function NotificationVideo({ tw, progress, title }) {
+  const slideX = -100 + (progress * 100); // Slide in from left
+  
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gradient-to-br from-purple-600 to-blue-600')}>
+      <div 
+        style={{
+          ...tw('flex items-center gap-4 bg-white rounded-2xl p-6 shadow-2xl'),
+          transform: `translateX(${slideX}%)`
+        }}
+      >
+        {/* Pinging indicator */}
+        <div style={tw('relative')}>
+          <div style={tw('w-3 h-3 bg-green-500 rounded-full animate-ping absolute')} />
+          <div style={tw('w-3 h-3 bg-green-500 rounded-full')} />
+        </div>
+        
+        <div>
+          <h2 style={tw('text-2xl font-bold text-gray-900')}>{title}</h2>
+          <p style={tw('text-gray-600')}>New notification</p>
+        </div>
+      </div>
     </div>
   );
 }
@@ -1078,7 +1106,7 @@ export default function VideoOverlay({ tw, video, title, background }) {
 ### How Video Sync Works
 
 1. **First pass**: Template calls `video()` to register needed videos
-2. **Pre-processing**: dsgn extracts all frames at template's FPS
+2. **Pre-processing**: loopwind extracts all frames at template's FPS
 3. **Rendering**: Each frame uses the corresponding video frame
 4. **Caching**: Frames are cached in memory for fast access
 
@@ -1386,31 +1414,28 @@ export default function TutorialVideo({
 
 ### Common Frame Rates
 
-```json
-{
-  "video": {
-    "fps": 24,      // Film standard
-    "duration": 5
-  }
-}
+```tsx
+// Film standard
+export const meta = {
+  // ...
+  video: { fps: 24, duration: 5 }
+};
 ```
 
-```json
-{
-  "video": {
-    "fps": 30,      // YouTube/web standard
-    "duration": 3
-  }
-}
+```tsx
+// YouTube/web standard
+export const meta = {
+  // ...
+  video: { fps: 30, duration: 3 }
+};
 ```
 
-```json
-{
-  "video": {
-    "fps": 60,      // Smooth animations
-    "duration": 2
-  }
-}
+```tsx
+// Smooth animations
+export const meta = {
+  // ...
+  video: { fps: 60, duration: 2 }
+};
 ```
 
 **Total frames = fps × duration**
@@ -1429,7 +1454,7 @@ export default function TutorialVideo({
 ### Default (Balanced)
 
 ```bash
-dsgn render video-intro '{"title":"Welcome"}'
+loopwind render video-intro '{"title":"Welcome"}'
 ```
 
 Uses H.264 codec with good quality/size balance.
@@ -1437,7 +1462,7 @@ Uses H.264 codec with good quality/size balance.
 ### Fast Encoding
 
 ```bash
-dsgn render video-intro '{"title":"Welcome"}' --preset ultrafast
+loopwind render video-intro '{"title":"Welcome"}' --preset ultrafast
 ```
 
 Faster encoding, slightly larger files. Good for previews.
@@ -1445,7 +1470,7 @@ Faster encoding, slightly larger files. Good for previews.
 ### High Quality
 
 ```bash
-dsgn render video-intro '{"title":"Welcome"}' --preset slow
+loopwind render video-intro '{"title":"Welcome"}' --preset slow
 ```
 
 Better compression, slower encoding. Good for final output.
@@ -1481,44 +1506,41 @@ For long videos, consider rendering in segments.
 
 ## Common Video Templates
 
-### Social Media Intro
+### Loading Spinner
 
 ```tsx
-export default function SocialIntro({ tw, progress, brand, tagline }) {
-  const logoScale = progress < 0.4 ? progress / 0.4 : 1;
-  const taglineOpacity = progress > 0.5 ? (progress - 0.5) / 0.5 : 0;
+export default function LoadingVideo({ tw, progress, title }) {
+  // Show spinner for first 60%, then fade to title
+  const spinnerOpacity = progress < 0.6 ? 1 : (1 - (progress - 0.6) / 0.4);
+  const titleOpacity = progress > 0.6 ? (progress - 0.6) / 0.4 : 0;
   
   return (
-    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-pink-500 to-purple-600')}>
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900')}>
+      {/* Tailwind's animate-spin */}
+      <div style={{ opacity: spinnerOpacity }}>
+        <div style={tw('w-32 h-32 border-8 border-blue-500 border-t-transparent rounded-full animate-spin')} />
+      </div>
+      
       <h1 
         style={{
-          ...tw('text-9xl font-black text-white mb-8'),
-          transform: `scale(${logoScale})`
+          ...tw('text-6xl font-bold text-white mt-12'),
+          opacity: titleOpacity
         }}
       >
-        {brand}
+        {title}
       </h1>
-      
-      <p 
-        style={{
-          ...tw('text-3xl text-white'),
-          opacity: taglineOpacity
-        }}
-      >
-        {tagline}
-      </p>
     </div>
   );
 }
 ```
 
-### Progress Bar Animation
+### Progress Bar with Pulse
 
 ```tsx
 export default function ProgressVideo({ tw, progress, title, subtitle }) {
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gray-900 p-12')}>
-      <h2 style={tw('text-5xl font-bold text-white mb-12')}>
+      <h2 style={tw('text-5xl font-bold text-white mb-12 animate-pulse')}>
         {title}
       </h2>
       
@@ -1540,7 +1562,7 @@ export default function ProgressVideo({ tw, progress, title, subtitle }) {
 }
 ```
 
-### Countdown Timer
+### Countdown Timer with Pulse
 
 ```tsx
 export default function CountdownVideo({ tw, frame, message }) {
@@ -1549,7 +1571,8 @@ export default function CountdownVideo({ tw, frame, message }) {
   
   return (
     <div style={tw('flex flex-col items-center justify-center w-full h-full bg-black')}>
-      <div style={tw('text-[200px] font-black text-white')}>
+      {/* Add pulse animation when counting down */}
+      <div style={tw('text-[200px] font-black text-white animate-pulse')}>
         {secondsRemaining}
       </div>
       <p style={tw('text-3xl text-gray-400 mt-8')}>
@@ -1560,9 +1583,56 @@ export default function CountdownVideo({ tw, frame, message }) {
 }
 ```
 
-## Output Format
+## Output Formats
 
-Videos are always rendered as MP4 (H.264 codec) for maximum compatibility.
+Videos can be rendered in two formats:
+
+### MP4 (Default)
+
+```bash
+# MP4 - H.264 codec, smaller file size, best quality
+loopwind render video-intro '{"title":"Welcome"}' --out intro.mp4
+
+# With custom quality (lower CRF = better quality)
+loopwind render video-intro '{"title":"Welcome"}' --crf 18
+```
+
+**Benefits:**
+- Smaller file sizes
+- Better color reproduction
+- Universal playback support
+- Best for social media, websites
+
+### GIF
+
+```bash
+# GIF - animated, works everywhere
+loopwind render video-intro '{"title":"Welcome"}' --format gif --out intro.gif
+
+# Or just use .gif extension
+loopwind render video-intro '{"title":"Welcome"}' --out intro.gif
+```
+
+**Benefits:**
+- Works in emails, GitHub READMEs, Slack
+- No video player needed
+- Auto-loops by default
+- Great for short animations
+
+**Limitations:**
+- Limited to 256 colors per frame
+- Larger file sizes than MP4
+- Some color banding with gradients
+
+**When to use GIF:**
+- Short loops (< 5 seconds)
+- Simple animations with solid colors
+- Platforms that don't support video (email, GitHub)
+
+**When to use MP4:**
+- Longer videos
+- Complex gradients or photos
+- Best quality and smallest size
 
 ## Next Steps
 
@@ -1575,6 +1645,487 @@ Videos are always rendered as MP4 (H.264 codec) for maximum compatibility.
 
 
 
+================================================================================
+FILE: animation.mdx
+================================================================================
+
+# Animation
+
+loopwind provides **Tailwind-style animation classes** that work with `progress` and `frame` to create smooth video animations without writing custom code.
+
+> **Note:** Animation classes only work with **video templates** and **GIFs**. For static images, animations will have no effect since there's no `progress` or `frame` context.
+
+## Quick Start
+
+```tsx
+export default function MyVideo({ tw, title, subtitle }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-black')}>
+      {/* Bounce in from below during first 40% */}
+      <h1 style={tw('text-8xl font-bold text-white ease-out animate-bounce-in-up/0/0.4')}>
+        {title}
+      </h1>
+
+      {/* Fade in with upward motion from 30% to 70% */}
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.3/0.7')}>
+        {subtitle}
+      </p>
+    </div>
+  );
+}
+```
+
+## Transition Animations
+
+Format: `animate-{type}/{start}/{end}`
+
+- `{type}` - The animation type (fade-in, bounce-in-up, etc.)
+- `{start}` - Progress value to start (0-1)
+- `{end}` - Progress value to end (0-1)
+
+### Fade Animations
+
+Simple opacity transitions with optional direction.
+
+```tsx
+// Fade in from 0% to 50% of the video
+<h1 style={tw('animate-fade-in/0/0.5')}>Hello</h1>
+
+// Fade out from 50% to 100%
+<h1 style={tw('animate-fade-out/0.5/1')}>Goodbye</h1>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-fade-in/0/1` | Fade in (opacity 0 → 1) |
+| `animate-fade-out/0/1` | Fade out (opacity 1 → 0) |
+| `animate-fade-in-up/0/1` | Fade in + slide up (30px) |
+| `animate-fade-in-down/0/1` | Fade in + slide down (30px) |
+| `animate-fade-in-left/0/1` | Fade in + slide from left (30px) |
+| `animate-fade-in-right/0/1` | Fade in + slide from right (30px) |
+| `animate-fade-out-up/0/1` | Fade out + slide up |
+| `animate-fade-out-down/0/1` | Fade out + slide down |
+| `animate-fade-out-left/0/1` | Fade out + slide left |
+| `animate-fade-out-right/0/1` | Fade out + slide right |
+
+### Slide Animations
+
+Larger movement (100px) with fade.
+
+```tsx
+// Slide in from left
+<div style={tw('animate-slide-left/0/0.5')}>Content</div>
+
+// Slide up from bottom
+<div style={tw('animate-slide-up/0.2/0.8')}>Content</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-slide-left/0/1` | Slide in from left (100px) |
+| `animate-slide-right/0/1` | Slide in from right (100px) |
+| `animate-slide-up/0/1` | Slide in from bottom (100px) |
+| `animate-slide-down/0/1` | Slide in from top (100px) |
+
+### Bounce Animations
+
+Playful entrance with overshoot effect.
+
+```tsx
+// Bounce in with scale overshoot
+<h1 style={tw('animate-bounce-in/0/0.5')}>Bouncy!</h1>
+
+// Bounce in from below
+<div style={tw('animate-bounce-in-up/0/0.6')}>Pop!</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-bounce-in/0/1` | Bounce in with scale overshoot |
+| `animate-bounce-in-up/0/1` | Bounce in from below |
+| `animate-bounce-in-down/0/1` | Bounce in from above |
+| `animate-bounce-in-left/0/1` | Bounce in from left |
+| `animate-bounce-in-right/0/1` | Bounce in from right |
+
+### Scale & Zoom Animations
+
+Size-based transitions.
+
+```tsx
+// Scale in from 50%
+<div style={tw('animate-scale-in/0/0.5')}>Growing</div>
+
+// Zoom in from 0%
+<div style={tw('animate-zoom-in/0/1')}>Zooming</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-scale-in/0/1` | Scale up from 50% to 100% |
+| `animate-scale-out/0/1` | Scale up to 150% + fade out |
+| `animate-zoom-in/0/1` | Zoom in from 0% to 100% |
+| `animate-zoom-out/0/1` | Zoom out from 100% to 200% + fade |
+
+### Rotate & Flip Animations
+
+Rotation-based transitions.
+
+```tsx
+// Rotate in 180 degrees
+<div style={tw('animate-rotate-in/0/0.5')}>Spinning</div>
+
+// 3D flip on X axis
+<div style={tw('animate-flip-in-x/0/0.5')}>Flipping</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-rotate-in/0/1` | Rotate in from -180° |
+| `animate-rotate-out/0/1` | Rotate out to 180° |
+| `animate-flip-in-x/0/1` | 3D flip on horizontal axis |
+| `animate-flip-in-y/0/1` | 3D flip on vertical axis |
+
+## Loop Animations
+
+Format: `animate-{type}/{frameLength}`
+
+Loop animations repeat every `{frameLength}` frames. At 30fps:
+- `/30` = 1 second loop
+- `/15` = 0.5 second loop
+- `/60` = 2 second loop
+
+```tsx
+// Pulse opacity every 15 frames (0.5s at 30fps)
+<div style={tw('animate-pulse/15')}>Pulsing</div>
+
+// Bounce every 20 frames
+<div style={tw('animate-bounce/20')}>Bouncing</div>
+
+// Full rotation every 60 frames (2s)
+<div style={tw('animate-spin/60')}>Spinning</div>
+```
+
+| Class | Description |
+|-------|-------------|
+| `animate-pulse/{n}` | Opacity pulse (0.5 → 1 → 0.5) |
+| `animate-bounce/{n}` | Bounce up and down |
+| `animate-spin/{n}` | Full 360° rotation |
+| `animate-ping/{n}` | Scale up + fade out (radar effect) |
+| `animate-wiggle/{n}` | Side to side wiggle |
+| `animate-float/{n}` | Gentle up and down floating |
+
+## Easing Functions
+
+Add an easing class **before** the animation class to control the timing curve.
+
+```tsx
+// Ease in (accelerate)
+<h1 style={tw('ease-in animate-fade-in/0/1')}>Accelerating</h1>
+
+// Ease out (decelerate) - default
+<h1 style={tw('ease-out animate-fade-in/0/1')}>Decelerating</h1>
+
+// Ease in-out (smooth)
+<h1 style={tw('ease-in-out animate-fade-in/0/1')}>Smooth</h1>
+
+// Strong cubic easing
+<h1 style={tw('ease-out-cubic animate-bounce-in/0/0.5')}>Dramatic</h1>
+```
+
+| Class | Description | Best For |
+|-------|-------------|----------|
+| `linear` | Constant speed | Mechanical motion |
+| `ease-in` | Slow start, fast end | Exit animations |
+| `ease-out` | Fast start, slow end (default) | Enter animations |
+| `ease-in-out` | Slow start and end | Subtle transitions |
+| `ease-in-cubic` | Strong slow start | Dramatic exits |
+| `ease-out-cubic` | Strong fast start | Impactful entrances |
+| `ease-in-out-cubic` | Strong both ends | Emphasis animations |
+| `ease-in-quart` | Very strong slow start | Powerful exits |
+| `ease-out-quart` | Very strong fast start | Punchy entrances |
+| `ease-in-out-quart` | Very strong both ends | Maximum drama |
+
+## Staggered Animations
+
+Create sequenced animations by offsetting the start/end times:
+
+```tsx
+export default function StaggeredList({ tw, items }) {
+  return (
+    <div style={tw('flex flex-col gap-4')}>
+      {/* First item: 0% to 30% */}
+      <div style={tw('ease-out animate-fade-in-left/0/0.3')}>
+        {items[0]}
+      </div>
+
+      {/* Second item: 10% to 40% */}
+      <div style={tw('ease-out animate-fade-in-left/0.1/0.4')}>
+        {items[1]}
+      </div>
+
+      {/* Third item: 20% to 50% */}
+      <div style={tw('ease-out animate-fade-in-left/0.2/0.5')}>
+        {items[2]}
+      </div>
+    </div>
+  );
+}
+```
+
+### Dynamic Staggering
+
+For dynamic lists, calculate the timing programmatically:
+
+```tsx
+export default function DynamicStagger({ tw, items }) {
+  return (
+    <div style={tw('flex flex-col gap-4')}>
+      {items.map((item, i) => {
+        const start = i * 0.1;           // Each item starts 10% later
+        const end = start + 0.3;          // Each animation lasts 30%
+
+        return (
+          <div
+            key={i}
+            style={tw(`ease-out animate-fade-in-up/${start}/${end}`)}
+          >
+            {item}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+## Combining Animations
+
+You can combine multiple animation classes. They will be applied together:
+
+```tsx
+// Note: Multiple transforms will be combined
+<h1 style={tw('animate-fade-in/0/0.5 animate-scale-in/0/0.5')}>
+  Fade + Scale
+</h1>
+```
+
+For more complex combinations, use manual animation with `progress`:
+
+```tsx
+export default function ComplexAnimation({ tw, progress, title }) {
+  // Custom compound animation
+  const opacity = Math.min(1, progress * 3);
+  const scale = 0.8 + progress * 0.2;
+  const rotation = (1 - progress) * -10;
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full')}>
+      <h1 style={{
+        ...tw('text-8xl font-bold'),
+        opacity,
+        transform: `scale(${scale}) rotate(${rotation}deg)`
+      }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+## Common Patterns
+
+### Intro Sequence
+
+```tsx
+export default function IntroVideo({ tw, title, subtitle, logo }) {
+  return (
+    <div style={tw('flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700')}>
+      {/* Logo appears first */}
+      <img
+        src={logo}
+        style={tw('h-20 mb-8 ease-out animate-scale-in/0/0.3')}
+      />
+
+      {/* Title bounces in */}
+      <h1 style={tw('text-7xl font-bold text-white ease-out animate-bounce-in-up/0.2/0.5')}>
+        {title}
+      </h1>
+
+      {/* Subtitle fades in last */}
+      <p style={tw('text-2xl text-white/80 mt-4 ease-out animate-fade-in-up/0.4/0.7')}>
+        {subtitle}
+      </p>
+    </div>
+  );
+}
+```
+
+### Text Reveal
+
+```tsx
+export default function TextReveal({ tw, words }) {
+  return (
+    <div style={tw('flex flex-wrap gap-2 justify-center')}>
+      {words.split(' ').map((word, i) => (
+        <span
+          key={i}
+          style={tw(`text-4xl font-bold ease-out animate-fade-in-up/${i * 0.1}/${i * 0.1 + 0.2}`)}
+        >
+          {word}
+        </span>
+      ))}
+    </div>
+  );
+}
+```
+
+### Looping Background Element
+
+```tsx
+export default function AnimatedBackground({ tw, children }) {
+  return (
+    <div style={tw('relative w-full h-full')}>
+      {/* Floating background circles */}
+      <div style={tw('absolute top-10 left-10 w-20 h-20 rounded-full bg-white/10 animate-float/60')} />
+      <div style={tw('absolute bottom-20 right-20 w-32 h-32 rounded-full bg-white/10 animate-pulse/45')} />
+
+      {/* Main content */}
+      <div style={tw('relative z-10')}>
+        {children}
+      </div>
+    </div>
+  );
+}
+```
+
+### Exit Animation
+
+```tsx
+export default function ExitAnimation({ tw, title }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+      {/* Visible from 0-70%, then exits */}
+      <h1 style={tw('text-8xl font-bold text-white ease-in animate-fade-out-up/0.7/1')}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+## Manual Animation with `progress` and `frame`
+
+For complete control beyond animation classes, use `progress` and `frame` directly.
+
+### Available Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `progress` | `number` | 0 to 1 through the video (0% to 100%) |
+| `frame` | `number` | Current frame number (0, 1, 2, ... totalFrames-1) |
+
+These are **only available in video templates**. Use them when animation classes aren't flexible enough.
+
+### Using `progress`
+
+```tsx
+export default function ProgressAnimation({ tw, progress, title }) {
+  // Custom fade based on progress
+  const opacity = progress < 0.3 ? progress / 0.3 : 1;
+  
+  // Custom scale based on progress  
+  const scale = 0.8 + progress * 0.2; // 0.8 to 1.0
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-gray-900')}>
+      <h1 style={{
+        ...tw('text-8xl font-bold text-white'),
+        opacity,
+        transform: `scale(${scale})`
+      }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+### Using `frame`
+
+```tsx
+export default function FrameAnimation({ tw, frame, title }) {
+  // Color cycling using frame number
+  const hue = (frame * 5) % 360; // Cycle through colors
+  
+  // Pulsing based on frame
+  const fps = 30;
+  const pulse = Math.sin(frame / fps * Math.PI * 2) * 0.2 + 0.8; // 0.6 to 1.0
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-black')}>
+      <h1 style={{
+        ...tw('text-8xl font-bold'),
+        color: `hsl(${hue}, 70%, 60%)`,
+        transform: `scale(${pulse})`
+      }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+### Custom Easing
+
+```tsx
+export default function CustomEasing({ tw, progress, title }) {
+  // Smoothstep easing
+  const eased = progress * progress * (3 - 2 * progress);
+  
+  // Elastic easing
+  const elastic = Math.pow(2, -10 * progress) * Math.sin((progress - 0.075) * (2 * Math.PI) / 0.3) + 1;
+
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full')}>
+      <h1 style={{
+        ...tw('text-8xl font-bold'),
+        opacity: eased,
+        transform: `translateY(${(1 - elastic) * 100}px)`
+      }}>
+        {title}
+      </h1>
+    </div>
+  );
+}
+```
+
+### When to Use Manual Animation
+
+Use `progress`/`frame` instead of animation classes when you need:
+- **Custom easing functions** (elastic, spring, bounce with specific curves)
+- **Color cycling or gradients** based on time
+- **Mathematical animations** (sine waves, spirals, etc.)
+- **Complex multi-property animations** that need precise coordination
+- **Conditional logic** based on specific frame numbers
+
+For everything else, prefer animation classes - they're simpler and more maintainable.
+
+## Performance Tips
+
+1. **Use Tailwind classes** when possible - they're optimized for the renderer
+2. **Avoid too many nested animations** - each adds computation per frame
+3. **Use loop animations sparingly** - they're computed every frame
+4. **Prefer opacity and transform** - they're the most performant properties
+
+## Next Steps
+
+- [Video Templates](/video) - Creating video templates
+- [SDK](/sdk) - Programmatic rendering with animations
+- [Helpers](/helpers) - QR codes, images, and more
+
+
+
+
 ================================================================================
 FILE: helpers.mdx
 ================================================================================
@@ -1585,7 +2136,7 @@ Additional helpers for creating powerful, composable templates.
 
 ## Overview
 
-Beyond the basics, dsgn provides:
+Beyond the basics, loopwind provides:
 - `template()` - Compose templates together
 - `qr()` - Generate QR codes on the fly
 - `config` - Access user configuration
@@ -1710,11 +2261,11 @@ You can customize QR code appearance:
 
 ## User Configuration
 
-Access user settings from `dsgn.json` using the `config` prop:
+Access user settings from `loopwind.json` using the `config` prop:
 
 ```tsx
 export default function BrandedTemplate({ tw, config, title }) {
-  // Access custom colors from dsgn.json
+  // Access custom colors from loopwind.json
   const primaryColor = config?.colors?.brand || '#6366f1';
   
   return (
@@ -1730,7 +2281,7 @@ export default function BrandedTemplate({ tw, config, title }) {
 }
 ```
 
-**User's dsgn.json:**
+**User's loopwind.json:**
 ```json
 {
   "colors": {
@@ -1754,7 +2305,7 @@ export default function MyTemplate({
   tw,        // Tailwind class converter
   qr,        // QR code generator (this page)
   template,  // Template composer (this page)
-  config,    // User config from dsgn.json (this page)
+  config,    // User config from loopwind.json (this page)
   
   // Media helpers (see dedicated pages)
   image,     // Image embedder → see /images
@@ -1860,7 +2411,7 @@ export default function CustomGradient({ title, tw }) {
 
 ## shadcn/ui Design System
 
-dsgn uses **shadcn/ui's design system** by default, providing semantic color tokens for beautiful, consistent designs.
+loopwind uses **shadcn/ui's design system** by default, providing semantic color tokens for beautiful, consistent designs.
 
 ### Default Color Palette
 
@@ -2099,7 +2650,7 @@ export default function GradientCard({ title, tw }) {
 
 ## Custom Theme Colors
 
-Override default colors in your `dsgn.json`:
+Override default colors in your `loopwind.json`:
 
 ```json
 {
@@ -2123,13 +2674,13 @@ tw('bg-primary')    // Uses your custom primary color
 
 ## Auto-Detection from tailwind.config.js
 
-dsgn automatically detects and loads your project's Tailwind configuration:
+loopwind automatically detects and loads your project's Tailwind configuration:
 
 ```
 your-project/
 ├── tailwind.config.js  ← Automatically detected
-├── dsgn.json
-└── _dsgn/templates/
+├── loopwind.json
+└── _loopwind/templates/
 ```
 
 This includes:
@@ -2218,15 +2769,15 @@ export default function ModernCard({
 FILE: fonts.mdx
 ================================================================================
 
-# Font Handling in dsgn
+# Font Handling in loopwind
 
-The recommended way to use fonts is through `dsgn.json` - configure fonts once, use everywhere.
+The recommended way to use fonts is through `loopwind.json` - configure fonts once, use everywhere.
 
-## Using Fonts from dsgn.json (Recommended)
+## Using Fonts from loopwind.json (Recommended)
 
-Configure fonts in your `dsgn.json` and use Tailwind classes in templates.
+Configure fonts in your `loopwind.json` and use Tailwind classes in templates.
 
-### Simple Setup (CSS Only)
+### Simple Setup
 
 Define font families without loading custom fonts (uses system fonts):
 
@@ -2245,12 +2796,12 @@ Define font families without loading custom fonts (uses system fonts):
 export default function({ title, tw }) {
   return (
     <div style={tw('w-full h-full')}>
-      {/* Uses fonts.sans from dsgn.json */}
+      {/* Uses fonts.sans from loopwind.json */}
       <h1 style={tw('font-sans text-6xl font-bold')}>
         {title}
       </h1>
 
-      {/* Uses fonts.mono from dsgn.json */}
+      {/* Uses fonts.mono from loopwind.json */}
       <code style={tw('font-mono text-sm')}>
         {code}
       </code>
@@ -2288,27 +2839,27 @@ Load custom font files for brand-specific typography:
 **Project structure:**
 ```
 your-project/
-├── dsgn.json
+├── loopwind.json
 ├── fonts/
 │   ├── Inter-Regular.woff
 │   ├── Inter-Bold.woff
 │   └── JetBrainsMono-Regular.woff
-└── _dsgn/
+└── _loopwind/
     └── templates/
 ```
 
 **Template usage (same as before):**
 ```tsx
 <h1 style={tw('font-sans font-bold')}>
-  {/* Uses Inter Bold from dsgn.json */}
+  {/* Uses Inter Bold from loopwind.json */}
   {title}
 </h1>
 ```
 
 **Available classes:**
-- `font-sans` - Uses `fonts.sans` from dsgn.json
-- `font-serif` - Uses `fonts.serif` from dsgn.json
-- `font-mono` - Uses `fonts.mono` from dsgn.json
+- `font-sans` - Uses `fonts.sans` from loopwind.json
+- `font-serif` - Uses `fonts.serif` from loopwind.json
+- `font-mono` - Uses `fonts.mono` from loopwind.json
 
 **Supported formats:**
 - ✅ **WOFF** (`.woff`) - Recommended
@@ -2322,59 +2873,60 @@ For templates that need unique fonts not shared across the project:
 
 **Template structure:**
 ```
-_dsgn/templates/my-template/
-├── my-template.tsx
-├── meta.json
+_loopwind/templates/my-template/
+├── template.tsx
 └── fonts/
     └── SpecialFont.woff
 ```
 
-**meta.json:**
-```json
-{
-  "name": "my-template",
-  "type": "image",
-  "size": { "width": 1200, "height": 630 },
-  "fonts": [
+**template.tsx:**
+```tsx
+export const meta = {
+  name: "my-template",
+  type: "image",
+  size: { width: 1200, height: 630 },
+  props: { title: "string" },
+  fonts: [
     {
-      "name": "Special Font",
-      "path": "fonts/SpecialFont.woff",
-      "weight": 400,
-      "style": "normal"
+      name: "Special Font",
+      path: "fonts/SpecialFont.woff",
+      weight: 400,
+      style: "normal"
     }
   ]
-}
-```
+};
 
-**Template usage:**
-```tsx
-<h1 style={{ fontFamily: 'Special Font', fontWeight: 400 }}>
-  {title}
-</h1>
+export default function Template({ title, tw }) {
+  return (
+    <h1 style={{ fontFamily: 'Special Font', fontWeight: 400 }}>
+      {title}
+    </h1>
+  );
+}
 ```
 
 ## Font Loading Priority
 
-dsgn loads fonts in this order:
+loopwind loads fonts in this order:
 
-1. **dsgn.json fonts** (if configured with `files`)
-2. **Template meta.json fonts** (if specified)
+1. **loopwind.json fonts** (if configured with `files`)
+2. **Template meta fonts** (if specified in `export const meta`)
 3. **Default Noto Sans** (from CDN)
 
-This means dsgn.json fonts override template fonts, ensuring consistency.
+This means loopwind.json fonts override template fonts, ensuring consistency.
 
 ## Default Fonts
 
-If no fonts are configured, dsgn automatically fetches **Noto Sans** from jsDelivr CDN.
+If no fonts are configured, loopwind automatically fetches **Noto Sans** from jsDelivr CDN.
 
 ## Best Practices
 
-1. ✅ **Use dsgn.json for project-wide fonts** - Configure once, use everywhere
+1. ✅ **Use loopwind.json for project-wide fonts** - Configure once, use everywhere
 2. ✅ **Use font classes** - `tw('font-sans')` instead of `fontFamily: 'Inter'`
 3. ✅ **Include fallbacks** - Always add system fonts: `["Inter", "system-ui", "sans-serif"]`
 4. ✅ **Match names** - First font in `family` array is used as the loaded font name
-5. ✅ **Relative paths** - Font paths are relative to `dsgn.json` location
-6. ⚠️ **Template fonts for special cases** - Only use meta.json fonts for template-specific typography
+5. ✅ **Relative paths** - Font paths are relative to `loopwind.json` location
+6. ⚠️ **Template fonts for special cases** - Only use template meta fonts for template-specific typography
 
 ## Examples
 
@@ -2446,3 +2998,83 @@ Loads different fonts for each style class.
 - [Video Rendering](/video)
 
 
+
+
+================================================================================
+FILE: agents.mdx
+================================================================================
+
+# AI Agents
+
+loopwind is designed to work with AI coding assistants. Simply add the `_loopwind` folder to context.
+
+## Using with AI Code Agents
+
+In Cursor or Claude Code (Cline), type `@_loopwind` to add the folder to context, then ask:
+
+```
+Generate an Open Graph image for my blog post about React hooks
+```
+
+The AI will read the templates and generate the appropriate command.
+
+## The AGENTS.md File
+
+When you run `loopwind init`, a `_loopwind/AGENTS.md` file is created with:
+- Essential commands
+- Template helpers reference
+- Common workflows
+
+This gives AI agents everything they need to use loopwind effectively.
+
+## Example Workflows
+
+### Simple Image Generation
+
+**Prompt:**
+```
+Create a social media card using the og-image template:
+- Title: "10 React Tips"  
+- Description: "Learn advanced patterns"
+```
+
+**AI generates:**
+```bash
+loopwind render og-image '{"title":"10 React Tips","description":"Learn advanced patterns"}'
+```
+
+**Output:** `_loopwind/outputs/og-image.png`
+
+### Changelog Image
+
+**Prompt:**
+```
+Create a changelog image for 3 recent changes:
+- Added video rendering support
+- Improved template validation
+- Fixed font loading issues
+```
+
+**AI generates:**
+```bash
+loopwind render changelog-card '{
+  "title":"Version 1.2.0",
+  "changes":[
+    "Added video rendering support",
+    "Improved template validation",
+    "Fixed font loading issues"
+  ]
+}'
+```
+
+**Output:** `_loopwind/outputs/changelog-card.png`
+
+## Next Steps
+
+- [Learn about Templates](/templates)
+- [Image Rendering](/images)
+- [Video Rendering](/video)
+- [Built-in Helpers](/helpers)
+
+
+