loopwind 0.9.2 → 0.10.0

package/FONTS.md

@@ -1,6 +1,6 @@
-# Font Handling in dsgn
+# Font Handling in loopwind
 
-dsgn has a two-part font system:
+loopwind has a two-part font system:
 1. **Font Data** (template-specific) - Actual font files loaded by Satori
 2. **Font Classes** (project-wide) - CSS font-family applied via `tw()`
 
@@ -62,11 +62,11 @@ my-template/
 - ✅ **TTF** (`.ttf`) - Also supported
 - ✅ **OTF** (`.otf`) - Also supported
 
-## Font Classes (from dsgn.json)
+## Font Classes (from loopwind.json)
 
-Use Tailwind font-family classes in templates. These reference the font stacks in `dsgn.json`:
+Use Tailwind font-family classes in templates. These reference the font stacks in `loopwind.json`:
 
-**dsgn.json:**
+**loopwind.json:**
 ```json
 {
   "fonts": {
@@ -82,12 +82,12 @@ Use Tailwind font-family classes in templates. These reference the font stacks i
 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')}>
         Hello World
       </code>
@@ -97,14 +97,14 @@ export default function({ title, tw }) {
 ```
 
 **Available classes:**
-- `font-sans` - Uses `fonts.sans` from dsgn.json (default: system-ui, -apple-system, sans-serif)
-- `font-serif` - Uses `fonts.serif` from dsgn.json (default: Georgia, serif)
-- `font-mono` - Uses `fonts.mono` from dsgn.json (default: monospace)
+- `font-sans` - Uses `fonts.sans` from loopwind.json (default: system-ui, -apple-system, sans-serif)
+- `font-serif` - Uses `fonts.serif` from loopwind.json (default: Georgia, serif)
+- `font-mono` - Uses `fonts.mono` from loopwind.json (default: monospace)
 
 ## How It Works Together
 
 1. **Font data** is loaded from template's `meta.json` (or default Noto Sans)
-2. **Font classes** (`font-sans`) apply CSS `fontFamily` from `dsgn.json`
+2. **Font classes** (`font-sans`) apply CSS `fontFamily` from `loopwind.json`
 3. The font name in CSS must match a loaded font for Satori to use it
 
 **Example:**
@@ -120,7 +120,7 @@ export default function({ title, tw }) {
 ```
 
 ```json
-// dsgn.json - Defines font stacks for CSS
+// loopwind.json - Defines font stacks for CSS
 {
   "fonts": {
     "sans": ["Inter", "system-ui", "sans-serif"]
@@ -152,5 +152,5 @@ export default function({ title, tw }) {
 1. **For most templates:** Use default Noto Sans, no font setup needed
 2. **For branded templates:** Bundle custom fonts in template's `fonts/` folder
 3. **Use font classes:** `tw('font-sans')` instead of raw `fontFamily: 'Inter'`
-4. **Match names:** Ensure `dsgn.json` font names match template's loaded fonts
+4. **Match names:** Ensure `loopwind.json` font names match template's loaded fonts
 5. **Include fallbacks:** Always include system fallbacks in font stacks

package/HELPERS_DEMO.md

@@ -70,7 +70,7 @@ Then use the `video()` helper with the prop value.
 ## Example: Video with Text Overlay
 
 ```tsx
-// Template: _dsgn/templates/video-overlay/index.tsx
+// Template: _loopwind/templates/video-overlay/index.tsx
 export default function VideoOverlay({ tw, video, frame, progress, title }) {
   // Animate title opacity
   const opacity = progress < 0.2 ? progress / 0.2 : 1;
@@ -123,7 +123,7 @@ export default function VideoOverlay({ tw, video, frame, progress, title }) {
 
 ```bash
 # Render
-dsgn render video-overlay props.json --out output.mp4
+loopwind render video-overlay props.json --out output.mp4
 ```
 
 This will:

package/PROJECT_STRUCTURE.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-**dsgn** is a global CLI tool that operates on project-local templates and outputs.
+**loopwind** is a global CLI tool that operates on project-local templates and outputs.
 
 Think of it like:
 - **Global CLI**: Like `npm` or `git` - installed once, used everywhere
@@ -13,11 +13,11 @@ Think of it like:
 
 ### Your Project
 
-When you use `dsgn` in your project, this is the structure:
+When you use `loopwind` in your project, this is the structure:
 
 ```
 my-project/
-├── dsgn/
+├── loopwind/
 │   ├── templates/          # Installed templates (like node_modules)
 │   │   ├── banner-hero/
 │   │   │   ├── banner-hero.tsx
@@ -28,14 +28,14 @@ my-project/
 │   └── outputs/            # Generated images/videos
 │       ├── banner-hero-1234567890.png
 │       └── product-card-1234567891.png
-├── dsgn.json              # Your project's design tokens (optional)
+├── loopwind.json              # Your project's design tokens (optional)
 └── package.json
 ```
 
 ### The CLI Package (this repo)
 
 ```
-dsgn/
+loopwind/
 ├── src/
 │   ├── cli.ts                    # Main CLI entry point
 │   ├── commands/                 # Command implementations
@@ -64,34 +64,34 @@ dsgn/
 ### 1. Global Installation
 
 ```bash
-npm install -g dsgn
+npm install -g loopwind
 ```
 
-This installs the CLI globally, making the `dsgn` command available anywhere.
+This installs the CLI globally, making the `loopwind` command available anywhere.
 
 ### 2. Project Usage
 
 ```bash
 cd ~/my-project
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 This:
 1. Fetches template from registry: `https://design.unpeel.dev/r/banner-hero`
-2. Installs to: `~/my-project/dsgn/templates/banner-hero/`
+2. Installs to: `~/my-project/loopwind/templates/banner-hero/`
 3. Creates structure if it doesn't exist
 
 ### 3. Rendering
 
 ```bash
-dsgn render banner-hero --props '{"title":"Hello"}'
+loopwind render banner-hero --props '{"title":"Hello"}'
 ```
 
 This:
-1. Loads template from `dsgn/templates/banner-hero/`
-2. Loads config from `dsgn.json` (if exists)
+1. Loads template from `loopwind/templates/banner-hero/`
+2. Loads config from `loopwind.json` (if exists)
 3. Renders with Satori
-4. Saves to `dsgn/outputs/banner-hero-{timestamp}.png`
+4. Saves to `loopwind/outputs/banner-hero-{timestamp}.png`
 
 ## Why This Architecture?
 
@@ -155,9 +155,9 @@ Returns:
 }
 ```
 
-When you run `dsgn add banner-hero`, it:
+When you run `loopwind add banner-hero`, it:
 1. Fetches this JSON
-2. Writes files to `dsgn/templates/banner-hero/`
+2. Writes files to `loopwind/templates/banner-hero/`
 3. Templates are now local and ready to use
 
 ## Git Workflow
@@ -165,20 +165,20 @@ When you run `dsgn add banner-hero`, it:
 ### What to commit?
 
 **DO commit:**
-- `dsgn/templates/` - Your templates (like `node_modules` in some projects)
-- `dsgn.json` - Your design configuration
+- `loopwind/templates/` - Your templates (like `node_modules` in some projects)
+- `loopwind.json` - Your design configuration
 
 **DON'T commit:**
-- `dsgn/outputs/` - Generated files (usually)
+- `loopwind/outputs/` - Generated files (usually)
 
 Example `.gitignore`:
 
 ```gitignore
 # Ignore generated outputs
-dsgn/outputs/
+loopwind/outputs/
 
 # Keep templates (optional - depends on your workflow)
-# dsgn/templates/
+# loopwind/templates/
 ```
 
 Some teams prefer to commit templates (reproducibility), others prefer to install them (like npm packages).
@@ -215,46 +215,46 @@ mkdir my-project
 cd my-project
 
 # Initialize config
-dsgn init
+loopwind init
 
 # Install templates
-dsgn add banner-hero
-dsgn add product-card
+loopwind add banner-hero
+loopwind add product-card
 
 # Render images
-dsgn render banner-hero --props props.json
+loopwind render banner-hero --props props.json
 ```
 
 ### Sharing with Team
 
 ```bash
 # Developer 1
-git add dsgn/templates/
+git add loopwind/templates/
 git commit -m "Add banner template"
 git push
 
 # Developer 2
 git pull
-dsgn list  # See all templates
-dsgn render banner-hero --props '{"title":"Team Banner"}'
+loopwind list  # See all templates
+loopwind render banner-hero --props '{"title":"Team Banner"}'
 ```
 
 ### CI/CD Pipeline
 
 ```yaml
 # .github/workflows/generate-images.yml
-- name: Install dsgn
-  run: npm install -g dsgn
+- name: Install loopwind
+  run: npm install -g loopwind
 
 - name: Generate images
   run: |
-    dsgn render banner-hero --props props/hero.json
-    dsgn render product-card --props props/product.json
+    loopwind render banner-hero --props props/hero.json
+    loopwind render product-card --props props/product.json
 
 - name: Upload artifacts
   uses: actions/upload-artifact@v3
   with:
-    path: dsgn/outputs/
+    path: loopwind/outputs/
 ```
 
 ## Future Enhancements
@@ -262,25 +262,25 @@ dsgn render banner-hero --props '{"title":"Team Banner"}'
 ### Template Versions
 
 ```bash
-dsgn add banner-hero@2.0.0
-dsgn update banner-hero
+loopwind add banner-hero@2.0.0
+loopwind update banner-hero
 ```
 
 ### Template Marketplace
 
 ```bash
-dsgn search "hero"
-dsgn add @company/custom-banner
+loopwind search "hero"
+loopwind add @company/custom-banner
 ```
 
 ### Global vs Local
 
 ```bash
 # Install globally (like npm -g)
-dsgn add banner-hero --global
+loopwind add banner-hero --global
 
 # Install locally (default, like npm install)
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 This is the **Shadcn for design and marketing** - same philosophy of owning your code, but for design assets!

package/PUBLISHING.md

@@ -1,12 +1,12 @@
 # Publishing Guide
 
-This guide explains how to publish `dsgn` to npm.
+This guide explains how to publish `loopwind` to npm.
 
 ## Prerequisites
 
 1. npm account (create at https://www.npmjs.com/signup)
 2. npm CLI logged in: `npm login`
-3. Package name availability check: `npm search dsgn`
+3. Package name availability check: `npm search loopwind`
 
 ## Pre-publish Checklist
 
@@ -37,8 +37,8 @@ You can test the package locally before publishing:
 
 ```bash
 npm pack
-npm install -g ./dsgn-0.1.0.tgz
-dsgn --help
+npm install -g ./loopwind-0.1.0.tgz
+loopwind --help
 ```
 
 ### 3. Publish to npm
@@ -58,13 +58,13 @@ npm publish --access public
 Check that it's published:
 
 ```bash
-npm view dsgn
+npm view loopwind
 ```
 
 Test installation:
 
 ```bash
-npx dsgn@latest --help
+npx loopwind@latest --help
 ```
 
 ## Post-publish
@@ -92,13 +92,13 @@ npm version major  # 0.1.0 -> 1.0.0
 
 ## Package Name Alternatives
 
-If `dsgn` is taken, consider:
+If `loopwind` is taken, consider:
 
-- `@yourusername/dsgn` (scoped package)
+- `@yourusername/loopwind` (scoped package)
 - `design-cli`
 - `designkit-cli`
-- `dsgn-cli`
-- `template-dsgn`
+- `loopwind-cli`
+- `template-loopwind`
 
 Check availability:
 
@@ -111,13 +111,13 @@ npm search <package-name>
 If you need to unpublish (within 72 hours):
 
 ```bash
-npm unpublish dsgn@0.1.0
+npm unpublish loopwind@0.1.0
 ```
 
 Note: Unpublishing is discouraged. Use `npm deprecate` instead for older versions:
 
 ```bash
-npm deprecate dsgn@0.1.0 "Please upgrade to 0.2.0"
+npm deprecate loopwind@0.1.0 "Please upgrade to 0.2.0"
 ```
 
 ## CI/CD Publishing (GitHub Actions)
@@ -161,7 +161,7 @@ npm publish --tag beta
 Install beta:
 
 ```bash
-npm install dsgn@beta
+npm install loopwind@beta
 ```
 
 ## Resources

package/README.md

@@ -451,33 +451,34 @@ Templates can bundle their own fonts (WOFF, WOFF2, TTF, OTF):
 
 ```
 my-template/
-├── my-template.tsx
-├── meta.json
+├── template.tsx
 └── fonts/
     ├── CustomFont-Regular.woff
     └── CustomFont-Bold.woff
 ```
 
-**meta.json:**
-```json
-{
-  "name": "my-template",
-  "fonts": [
+**template.tsx:**
+```tsx
+export const meta = {
+  name: "my-template",
+  // ...
+  fonts: [
     {
-      "name": "Custom Font",
-      "path": "fonts/CustomFont-Bold.woff",
-      "weight": 700,
-      "style": "normal"
+      name: "Custom Font",
+      path: "fonts/CustomFont-Bold.woff",
+      weight: 700,
+      style: "normal"
     }
   ]
-}
-```
+};
 
-**Template usage:**
-```tsx
-<h1 style={{ fontFamily: 'Custom Font', fontWeight: 700 }}>
-  Branded Typography
-</h1>
+export default function Template({ title, tw }) {
+  return (
+    <h1 style={{ fontFamily: 'Custom Font', fontWeight: 700 }}>
+      {title}
+    </h1>
+  );
+}
 ```
 
 **Use cases:**
@@ -681,7 +682,7 @@ loopwind render composite-card '{
 - First render pass detects which templates are needed
 - All templates load in parallel automatically
 - Second render pass completes with loaded templates
-- Each template uses its own `meta.json` for sizing
+- Each template uses its own meta for sizing
 - Returns JSX directly (not a data URI)
 - Satori renders everything as a single SVG tree
 
@@ -854,43 +855,27 @@ Templates are stored in your project's `_loopwind/templates/` directory. You can
 mkdir -p _loopwind/templates/my-template
 ```
 
-2. Create `meta.json`:
-
-```json
-{
-  "name": "my-template",
-  "description": "My custom template",
-  "type": "image",
-  "size": { "width": 1200, "height": 630 },
-  "props": {
-    "title": "string"
-  }
-}
-```
-
-3. Create `my-template.tsx`:
+2. Create `template.tsx` with exported meta:
 
 ```tsx
-export default function MyTemplate({ title }) {
+export const meta = {
+  name: "my-template",
+  description: "My custom template",
+  type: "image",
+  size: { width: 1200, height: 630 },
+  props: { title: "string" }
+};
+
+export default function MyTemplate({ title, tw }) {
   return (
-    <div style={{
-      display: 'flex',
-      width: '100%',
-      height: '100%',
-      background: '#000',
-      color: '#fff',
-      justifyContent: 'center',
-      alignItems: 'center',
-      fontSize: '48px',
-      fontFamily: 'sans-serif',
-    }}>
+    <div style={tw('flex items-center justify-center w-full h-full bg-black text-white text-5xl')}>
       {title}
     </div>
   );
 }
 ```
 
-4. Validate and render:
+3. Validate and render:
 
 ```bash
 loopwind validate my-template
@@ -955,9 +940,12 @@ export default function Template({ title, frame, progress, tw, qr, template }) {
 ### Rendering Videos
 
 ```bash
-# Render to MP4
+# Render to MP4 (default)
 loopwind render my-video '{"title":"Animated Title"}' -o output.mp4
 
+# Render to GIF (great for emails, GitHub, Slack)
+loopwind render my-video '{"title":"Animated Title"}' --format gif -o output.gif
+
 # With custom quality settings
 loopwind render my-video props.json --crf 18   # Higher quality (lower CRF = better quality)
 
@@ -965,6 +953,10 @@ loopwind render my-video props.json --crf 18   # Higher quality (lower CRF = bet
 loopwind render my-video props.json --frames-only -o frames/
 ```
 
+**Output formats:**
+- **MP4** - H.264 codec, smaller files, best quality (default)
+- **GIF** - Animated, works everywhere (emails, GitHub READMEs, Slack)
+
 **How it works:**
 1. **SVG Generation**: All frames generated in parallel (~0.8s for 90 frames)
 2. **WASM Encoding**: Frames encoded to H.264 MP4 using pure JavaScript (~1.2s for 90 frames)

package/REGISTRY_SETUP.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-The registry is a simple HTTP endpoint that serves template JSON files. Users run `dsgn add template-name` and it fetches from `https://dsgncli.com/r/template-name`.
+The registry is a simple HTTP endpoint that serves template JSON files. Users run `loopwind add template-name` and it fetches from `https://loopwind.dev/r/template-name`.
 
 ## Quick Solutions
 
@@ -13,7 +13,7 @@ Host static JSON files on any static hosting:
 **1. Create template JSON files:**
 
 ```
-dsgncli.com/
+loopwind.dev/
 └── r/
     ├── banner-hero.json
     ├── product-card.json
@@ -119,7 +119,7 @@ Until you set up a real registry, use GitHub:
 **1. Create a templates repo:**
 
 ```
-github.com/yourusername/dsgn-templates/
+github.com/yourusername/loopwind-templates/
 ├── banner-hero/
 │   ├── template.json
 │   ├── banner-hero.tsx
@@ -132,20 +132,20 @@ github.com/yourusername/dsgn-templates/
 **2. Users install with:**
 
 ```bash
-dsgn add github:yourusername/dsgn-templates/banner-hero
+loopwind add github:yourusername/loopwind-templates/banner-hero
 ```
 
 **3. Update CLI default:**
 
 ```typescript
 // src/lib/constants.ts
-export const DEFAULT_REGISTRY = 'github:yourusername/dsgn-templates';
+export const DEFAULT_REGISTRY = 'github:yourusername/loopwind-templates';
 ```
 
 Then users can:
 
 ```bash
-dsgn add banner-hero  # Uses GitHub as registry
+loopwind add banner-hero  # Uses GitHub as registry
 ```
 
 ## Creating Template JSON Files
@@ -209,7 +209,7 @@ registry/
 └── social-og.json
 ```
 
-Upload these to `dsgncli.com/r/`
+Upload these to `loopwind.dev/r/`
 
 ## Example Hosting Setups
 
@@ -218,8 +218,8 @@ Upload these to `dsgncli.com/r/`
 **1. Create Next.js project:**
 
 ```bash
-npx create-next-app@latest dsgn-registry
-cd dsgn-registry
+npx create-next-app@latest loopwind-registry
+cd loopwind-registry
 ```
 
 **2. Create API route:**
@@ -250,7 +250,7 @@ vercel
 
 **4. Configure domain:**
 
-Set `dsgncli.com` to point to your Vercel project.
+Set `loopwind.dev` to point to your Vercel project.
 
 ### Cloudflare Workers
 
@@ -333,7 +333,7 @@ app.get('/r/:name', async (req, res) => {
 });
 
 // Users can install specific versions
-// dsgn add banner-hero@1.2.0
+// loopwind add banner-hero@1.2.0
 ```
 
 ## Testing Your Registry
@@ -342,7 +342,7 @@ Once deployed, test it:
 
 ```bash
 # Test the endpoint
-curl https://dsgncli.com/r/banner-hero
+curl https://loopwind.dev/r/banner-hero
 
 # Should return JSON like:
 {
@@ -352,7 +352,7 @@ curl https://dsgncli.com/r/banner-hero
 }
 
 # Test with CLI
-dsgn add banner-hero
+loopwind add banner-hero
 ```
 
 ## Until Registry is Ready
@@ -360,7 +360,7 @@ dsgn add banner-hero
 **Option 1:** Tell users to use GitHub:
 
 ```bash
-dsgn add github:yourusername/dsgn-templates/banner-hero
+loopwind add github:yourusername/loopwind-templates/banner-hero
 ```
 
 **Option 2:** Update README with temporary instructions:
@@ -371,7 +371,7 @@ dsgn add github:yourusername/dsgn-templates/banner-hero
 Templates are currently hosted on GitHub. Install with:
 
 \`\`\`bash
-dsgn add github:dsgncli/templates/banner-hero
+loopwind add github:loopwindcli/templates/banner-hero
 \`\`\`
 
 Official registry coming soon!
@@ -386,7 +386,7 @@ Include templates directly in the npm package:
 **1. Create templates folder:**
 
 ```
-dsgn/
+loopwind/
 ├── dist/
 └── bundled-templates/
     ├── banner-hero.json
@@ -414,8 +414,8 @@ export async function fetchTemplate(name: string) {
 **3. Users get core templates immediately:**
 
 ```bash
-npm install -g dsgn
-dsgn add banner-hero  # Works offline!
+npm install -g loopwind
+loopwind add banner-hero  # Works offline!
 ```
 
 ## Recommended Approach