loopwind 0.10.3 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +4 -4
  2. package/REGISTRY_SETUP.md +5 -15
  3. package/TEMPLATE_SOURCES.md +15 -31
  4. package/dist/commands/init.js +5 -5
  5. package/dist/commands/init.js.map +1 -1
  6. package/dist/lib/config.d.ts.map +1 -1
  7. package/dist/lib/config.js +14 -4
  8. package/dist/lib/config.js.map +1 -1
  9. package/dist/lib/renderer.d.ts.map +1 -1
  10. package/dist/lib/renderer.js +7 -3
  11. package/dist/lib/renderer.js.map +1 -1
  12. package/package.json +5 -4
  13. package/test-templates/demo-intro-props.json +4 -0
  14. package/website/README.md +42 -16
  15. package/website/dist/.gitkeep +3 -0
  16. package/website/dist/_astro/agents.I1-fN38o.css +1 -0
  17. package/website/dist/agents/index.html +51 -0
  18. package/website/dist/animation/index.html +605 -0
  19. package/website/dist/fonts/index.html +42 -41
  20. package/website/dist/helpers/index.html +6 -8
  21. package/website/dist/images/index.html +33 -39
  22. package/website/dist/index.html +70 -115
  23. package/website/dist/llm.txt +954 -322
  24. package/website/dist/robots.txt +5 -0
  25. package/website/dist/sdk/index.html +435 -0
  26. package/website/dist/styling/index.html +6 -8
  27. package/website/dist/templates/index.html +19 -21
  28. package/website/dist/video/index.html +193 -79
  29. package/website/package-lock.json +7558 -2595
  30. package/website/public/.gitkeep +3 -0
  31. package/website/dist/_astro/fonts.DHdiHGBO.css +0 -1
package/website/dist/index.html CHANGED
@@ -1,21 +1,42 @@
1
- <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
2
- _dsgn
3
- </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline bg-accent text-accent-foreground font-medium" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> LLM Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="hero relative overflow-hidden bg-gradient-to-br from-background via-muted/30 to-background border-b border-border mb-8" data-astro-cid-bbe6dxrz> <div class="px-8 md:px-12 py-12 md:py-16" data-astro-cid-bbe6dxrz> <div class="max-w-3xl mb-4" data-astro-cid-bbe6dxrz> <!-- Badge -->
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/og-image.png"><meta property="og:site_name" content="loopwind"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/og-image.png"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="language" content="English"><link rel="stylesheet" href="/_astro/agents.I1-fN38o.css">
2
+ <style>.code-video-demo[data-astro-cid-hwce6zkj]{margin-top:2rem;margin-bottom:2rem}
3
+ </style></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl flex items-center gap-2 bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj> <span class="text-5xl" data-astro-cid-mw7aashj>↫</span> <span data-astro-cid-mw7aashj>loopwind</span> </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline bg-accent text-accent-foreground font-medium" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="hero relative overflow-hidden bg-gradient-to-br from-background via-muted/30 to-background border-b border-border mb-8" data-astro-cid-bbe6dxrz> <div class="px-8 md:px-12 py-12 md:py-16" data-astro-cid-bbe6dxrz> <div class="max-w-3xl mb-4" data-astro-cid-bbe6dxrz> <!-- Badge -->
4
4
  The shadcn/ui for design & marketing
5
5
  </div> <!-- Title --> <h1 class="text-2xl md:text-4xl font-bold text-foreground mb-4 leading-tight text-balance" data-astro-cid-bbe6dxrz>
6
- CLI-based Image, Video Generator for developers and AI Agents
6
+ CLI-based dynamic image & video generator for developers and AI Agents
7
7
  </h1> <!-- Description --> <p class="text-base md:text-lg text-muted-foreground mb-6 leading-relaxed text-balance" data-astro-cid-bbe6dxrz>
8
8
  Generate images and videos with React, Tailwind and Shadcn/ui classes.
9
9
  Perfect for template-based marketing automation, social media, and dynamic
10
- content generation.
11
- </p> <!-- CTA Buttons --> <div class="flex flex-wrap gap-3" data-astro-cid-bbe6dxrz> <a href="#quick-start" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-semibold hover:bg-primary/90 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Get Started</span> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-bbe6dxrz> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-bbe6dxrz></path> </svg> </a> <a href="/templates" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-muted text-foreground text-sm font-semibold hover:bg-muted/80 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Browse Templates</span> </a> </div> </div> </div> <!-- Subtle gradient orbs --> <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="p-12 pt-0" data-astro-cid-mw7aashj> <article class="home-prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h2 id="image-templates">Image Templates</h2>
10
+ content generation. Lives alongside your codebase in a <code class="text-xs bg-muted px-1.5 py-0.5 rounded" data-astro-cid-bbe6dxrz>_loopwind</code> directory.
11
+ </p> <!-- CTA Buttons --> <div class="flex flex-wrap gap-3" data-astro-cid-bbe6dxrz> <a href="#quick-start" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground text-sm font-semibold hover:bg-primary/90 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Get Started</span> <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-bbe6dxrz> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-astro-cid-bbe6dxrz></path> </svg> </a> <a href="/templates" class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-muted text-foreground text-sm font-semibold hover:bg-muted/80 transition-colors no-underline" data-astro-cid-bbe6dxrz> <span data-astro-cid-bbe6dxrz>Browse Templates</span> </a> </div> </div> </div> <!-- Subtle gradient orbs --> <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -z-10" data-astro-cid-bbe6dxrz></div> <div class="p-12 pt-0" data-astro-cid-mw7aashj> <article class="home-prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h2 id="video-templates">Video Templates</h2>
12
+ <div class="code-video-demo not-prose my-8" data-astro-cid-hwce6zkj> <h3 class="text-xl font-semibold text-foreground mb-4" data-astro-cid-hwce6zkj>Animated Intro Example</h3> <div class="grid md:grid-cols-2 gap-6" data-astro-cid-hwce6zkj> <!-- Code Side --> <div class="order-2 md:order-1" data-astro-cid-hwce6zkj> <div class="text-xs text-muted-foreground mb-2 font-mono" data-astro-cid-hwce6zkj>Template Code</div> <pre class="bg-muted border border-border rounded-lg p-4 overflow-x-auto text-sm" data-astro-cid-hwce6zkj> <code class="text-foreground font-mono" data-astro-cid-hwce6zkj>export default function VideoIntro({ tw, title, subtitle }) {
13
+ return (
14
+ &lt;div style={tw(&#39;flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 gap-4&#39;)}&gt;
15
+ &lt;h1 style={tw(&#39;text-8xl font-bold text-white ease-out animate-bounce-in/0/0.4&#39;)}&gt;
16
+ {title}
17
+ &lt;/h1&gt;
18
+ &lt;p style={tw(&#39;text-2xl text-white/80 ease-out animate-fade-in-up/0.3/0.7&#39;)}&gt;
19
+ {subtitle}
20
+ &lt;/p&gt;
21
+ &lt;/div&gt;
22
+ );
23
+ }</code>
24
+ </pre> </div> <!-- Video Side --> <div class="order-1 md:order-2" data-astro-cid-hwce6zkj> <div class="text-xs text-muted-foreground mb-2 font-mono" data-astro-cid-hwce6zkj>Live Preview</div> <div class="relative bg-muted border border-border rounded-lg overflow-hidden aspect-video" data-astro-cid-hwce6zkj> <video src="/demo-intro.mp4" autoplay loop muted playsinline class="w-full h-full object-contain" data-astro-cid-hwce6zkj>
25
+ Your browser doesn't support video.
26
+ </video> </div> </div> </div> </div>
27
+ <p><strong>Render it:</strong></p>
28
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;,&quot;subtitle&quot;:&quot;Built with loopwind&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
29
+ <span class="line"></span></code></pre>
30
+ <p><strong>Output:</strong> <code>_loopwind/outputs/intro.mp4</code> (1920×1080px, 3 seconds @ 30fps)</p>
31
+ <p><strong>Perfect for:</strong> Social media intros, animated logos, tutorial overlays, and product showcases.</p>
32
+ <h2 id="image-templates">Image Templates</h2>
12
33
  <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Social media card template</span></span>
13
34
  <span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> OGImage</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">description</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">logo</span><span style="color:#E1E4E8"> }) {</span></span>
14
35
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
15
36
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex w-full h-full bg-white&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
16
37
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex-1 flex flex-col justify-between p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
17
38
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(logo)} </span><span style="color:#B392F0">style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-12 w-auto&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
18
- <span class="line"><span style="color:#E1E4E8"> </span></span>
39
+ <span class="line"></span>
19
40
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
20
41
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-5xl font-bold text-gray-900 mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
21
42
  <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
@@ -24,13 +45,13 @@ Generate images and videos with React, Tailwind and Shadcn/ui classes.
24
45
  <span class="line"><span style="color:#E1E4E8"> {description}</span></span>
25
46
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
26
47
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
27
- <span class="line"><span style="color:#E1E4E8"> </span></span>
48
+ <span class="line"></span>
28
49
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-gray-400&#39;</span><span style="color:#E1E4E8">)}&gt;yoursite.com&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
29
50
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
30
- <span class="line"><span style="color:#E1E4E8"> </span></span>
51
+ <span class="line"></span>
31
52
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex-1&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
32
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
33
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(featuredImage)} </span></span>
53
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
54
+ <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(featuredImage)}</span></span>
34
55
  <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
35
56
  <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
36
57
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
@@ -39,175 +60,109 @@ Generate images and videos with React, Tailwind and Shadcn/ui classes.
39
60
  <span class="line"><span style="color:#E1E4E8">}</span></span>
40
61
  <span class="line"></span></code></pre>
41
62
  <p><strong>Render it:</strong></p>
42
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> og-image</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;description&quot;:&quot;My awesome blog post&quot;}&#39;</span></span>
63
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> og-image</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;description&quot;:&quot;My awesome blog post&quot;}&#39;</span></span>
43
64
  <span class="line"></span></code></pre>
44
- <p><strong>Output:</strong> <code>og-image.png</code> (1200×630px) in your current directory</p>
65
+ <p><strong>Output:</strong> <code>_loopwind/outputs/og-image.png</code> (1200×630px)</p>
45
66
  <p><strong>Perfect for:</strong> Open Graph images, Twitter cards, blog headers, product cards, and quote graphics.</p>
46
- <h2 id="video-templates">Video Templates</h2>
47
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Animated intro video</span></span>
48
- <span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> VideoIntro</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
49
- <span class="line"><span style="color:#6A737D"> // Fade in animation</span></span>
50
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> titleOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
51
- <span class="line"><span style="color:#E1E4E8"> </span></span>
52
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
53
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
54
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8"> </span></span>
55
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
56
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white&#39;</span><span style="color:#E1E4E8">),</span></span>
57
- <span class="line"><span style="color:#E1E4E8"> opacity: titleOpacity</span></span>
58
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
59
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
60
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
61
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
62
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
63
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
64
- <span class="line"><span style="color:#E1E4E8">}</span></span>
65
- <span class="line"></span></code></pre>
66
- <p><strong>Render it:</strong></p>
67
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
68
- <span class="line"></span></code></pre>
69
- <p><strong>Output:</strong> <code>intro.mp4</code> (1920×1080px, 3 seconds @ 30fps) in your current directory</p>
70
- <p><strong>Perfect for:</strong> Social media intros, animated logos, tutorial overlays, and product showcases.</p>
71
67
  <h2 id="features">Features</h2>
72
68
  <ul>
73
69
  <li>🎨 <strong>shadcn/ui Design System</strong>: Beautiful, semantic colors out of the box (<code>text-primary</code>, <code>bg-card</code>, etc.)</li>
74
70
  <li>✨ <strong>Template-based</strong>: Install design templates like you install UI components</li>
71
+ <li>🖼️ <strong>Serverless Image Rendering</strong>: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers</li>
72
+ <li>🎬 <strong>Serverless Video Rendering</strong>: WASM-based MP4 encoding - 12x faster than traditional approaches</li>
75
73
  <li>🎨 <strong>Tailwind CSS Support</strong>: Style templates with Tailwind utility classes + opacity modifiers (<code>bg-primary/50</code>)</li>
76
74
  <li>📱 <strong>Built-in Helpers</strong>: QR codes, image embedding, video backgrounds, template composition</li>
77
75
  <li>✅ <strong>Smart Validation</strong>: Automatic prop and template validation with helpful error messages</li>
78
76
  <li>🚀 <strong>Framework-agnostic</strong>: Works with Node, Bun, Deno, Laravel, Python, and more</li>
79
77
  <li>🤖 <strong>Agent-friendly</strong>: Machine-readable metadata for LLMs</li>
80
- <li>📦 <strong>Easy installation</strong>: <code>npx dsgn add template-name</code></li>
81
- <li>🎬 <strong>Video support</strong>: Render animated videos with frame-by-frame control</li>
82
- <li>⚡ <strong>Powered by Satori</strong>: Generate images from React + Tailwind</li>
78
+ <li>📦 <strong>Easy installation</strong>: <code>npx loopwind add template-name</code></li>
79
+ <li>🌐 <strong>Pure JavaScript/WASM</strong>: No native dependencies, works everywhere</li>
83
80
  </ul>
84
81
  <h2 id="quick-start">Quick Start</h2>
85
82
  <h3 id="installation">Installation</h3>
86
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#79B8FF"> -g</span><span style="color:#9ECBFF"> dsgn</span></span>
83
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#79B8FF"> -g</span><span style="color:#9ECBFF"> loopwind</span></span>
87
84
  <span class="line"></span></code></pre>
88
85
  <p>Or use with npx:</p>
89
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> dsgn</span><span style="color:#79B8FF"> --help</span></span>
86
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> loopwind</span><span style="color:#79B8FF"> --help</span></span>
90
87
  <span class="line"></span></code></pre>
91
88
  <h3 id="initialize-in-your-project">Initialize in Your Project</h3>
92
89
  <p>Navigate to any project folder and run:</p>
93
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> init</span></span>
90
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> init</span></span>
94
91
  <span class="line"></span></code></pre>
95
- <p>This creates a <code>_dsgn/</code> folder where templates will be installed.</p>
92
+ <p>This creates a <code>_loopwind/</code> folder where templates and outputs will be located.</p>
96
93
  <h3 id="install-a-template">Install a Template</h3>
97
- <p>Templates can be installed from multiple sources:</p>
98
- <h4 id="1-official-registry-coming-soon">1. Official Registry (Coming Soon)</h4>
99
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
100
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> og-image</span><span style="color:#79B8FF"> --registry</span><span style="color:#9ECBFF"> https://custom-registry.com/r</span></span>
101
- <span class="line"></span></code></pre>
102
- <h4 id="2-github-repositories">2. GitHub Repositories</h4>
103
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># From a GitHub repo (looks for template.json in repo root)</span></span>
104
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo</span></span>
105
- <span class="line"></span>
106
- <span class="line"><span style="color:#6A737D"># From a specific path in the repo</span></span>
107
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/templates/banner-hero</span></span>
108
- <span class="line"></span>
109
- <span class="line"><span style="color:#6A737D"># From an organization</span></span>
110
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:myorg/design-templates/social-media/og-image</span></span>
111
- <span class="line"></span></code></pre>
112
- <h4 id="3-direct-urls">3. Direct URLs</h4>
113
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Install from any publicly accessible URL</span></span>
114
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/templates/my-template.json</span></span>
115
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://cdn.example.com/templates/awesome-banner.json</span></span>
116
- <span class="line"></span></code></pre>
117
- <p><strong>Requirements:</strong></p>
118
- <ul>
119
- <li>URL must return JSON in the registry template format</li>
120
- <li>Must be publicly accessible (no authentication)</li>
121
- </ul>
122
- <h4 id="4-local-filesystem">4. Local Filesystem</h4>
123
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Relative path</span></span>
124
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/banner-hero</span></span>
125
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ../shared-templates/product-card</span></span>
126
- <span class="line"></span>
127
- <span class="line"><span style="color:#6A737D"># Absolute path</span></span>
128
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> /Users/you/templates/social-card</span></span>
94
+ <h4 id="1-official-templates">1. Official Templates</h4>
95
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> image-template</span></span>
96
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> video-template</span></span>
129
97
  <span class="line"></span></code></pre>
130
- <p><strong>Use cases:</strong></p>
131
- <ul>
132
- <li>Development and testing</li>
133
- <li>Private templates</li>
134
- <li>Shared team templates (monorepo)</li>
135
- <li>Before publishing to registry</li>
136
- </ul>
137
- <p>Templates are installed to: <code>_dsgn/templates/&lt;template&gt;/</code> (customizable in <code>dsgn.json</code>)</p>
98
+ <p>Templates are installed to: <code>_loopwind/templates/&lt;template&gt;/</code> (customizable in <code>loopwind.json</code>)</p>
138
99
  <p><strong>Benefits:</strong></p>
139
100
  <ul>
140
- <li>Templates are local to your project (like npm packages)</li>
141
- <li>Different projects can use different template versions</li>
101
+ <li>Templates are local to your project</li>
142
102
  <li>Version controlled with your project</li>
143
103
  <li>Easy to share within your team</li>
144
- <li>Works offline once installed</li>
145
104
  </ul>
146
- <h3 id="render-an-image">Render an Image</h3>
147
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;subtitle&quot;:&quot;Built with dsgn&quot;}&#39;</span></span>
148
- <span class="line"></span></code></pre>
149
- <p>Output: <code>banner-hero.png</code> (1600x900px)</p>
150
- <p>You can also use a props file:</p>
151
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
105
+ <h3 id="output-a-template">Output a Template</h3>
106
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> template-name</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;subtitle&quot;:&quot;Built with loopwind&quot;}&#39;</span></span>
152
107
  <span class="line"></span></code></pre>
153
108
  <h2 id="commands">Commands</h2>
154
- <h3 id="dsgn-add-source"><code>dsgn add &lt;source&gt;</code></h3>
109
+ <h3 id="loopwind-add-source"><code>loopwind add &lt;source&gt;</code></h3>
155
110
  <p>Install a template from various sources:</p>
156
111
  <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># From registry</span></span>
157
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
112
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
158
113
  <span class="line"></span>
159
114
  <span class="line"><span style="color:#6A737D"># From GitHub</span></span>
160
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/path/to/template</span></span>
115
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/path/to/template</span></span>
161
116
  <span class="line"></span>
162
117
  <span class="line"><span style="color:#6A737D"># From URL</span></span>
163
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/my-template.json</span></span>
118
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/my-template.json</span></span>
164
119
  <span class="line"></span>
165
120
  <span class="line"><span style="color:#6A737D"># From local path</span></span>
166
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/custom-banner</span></span>
121
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/custom-banner</span></span>
167
122
  <span class="line"></span></code></pre>
168
- <h3 id="dsgn-list"><code>dsgn list</code></h3>
123
+ <h3 id="loopwind-list"><code>loopwind list</code></h3>
169
124
  <p>List all installed templates:</p>
170
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> list</span></span>
125
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> list</span></span>
171
126
  <span class="line"></span></code></pre>
172
- <h3 id="dsgn-render-template-props-options"><code>dsgn render &lt;template&gt; &lt;props&gt; [options]</code></h3>
127
+ <h3 id="loopwind-render-template-props-options"><code>loopwind render &lt;template&gt; &lt;props&gt; [options]</code></h3>
173
128
  <p>Render an image or video:</p>
174
129
  <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Image with inline props</span></span>
175
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;}&#39;</span></span>
130
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello World&quot;}&#39;</span></span>
176
131
  <span class="line"></span>
177
132
  <span class="line"><span style="color:#6A737D"># Video with inline props</span></span>
178
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
133
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
179
134
  <span class="line"></span>
180
135
  <span class="line"><span style="color:#6A737D"># Using a props file</span></span>
181
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
136
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
182
137
  <span class="line"></span>
183
138
  <span class="line"><span style="color:#6A737D"># Custom output</span></span>
184
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> custom-name.png</span></span>
139
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> custom-name.png</span></span>
185
140
  <span class="line"></span>
186
141
  <span class="line"><span style="color:#6A737D"># Different format</span></span>
187
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> jpeg</span></span>
142
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> jpeg</span></span>
188
143
  <span class="line"></span></code></pre>
189
144
  <p>Options:</p>
190
145
  <ul>
191
- <li><code>--out, -o</code> - Output filename (default: <code>&lt;template&gt;.&lt;ext&gt;</code>)</li>
146
+ <li><code>--out, -o</code> - Output filename (default: <code>_loopwind/outputs/&lt;template&gt;.&lt;ext&gt;</code>)</li>
192
147
  <li><code>--format</code> - Output format: <code>png</code>, <code>jpeg</code>, <code>svg</code> (images only)</li>
193
148
  <li><code>--quality</code> - JPEG quality 1-100 (default: 92)</li>
194
149
  </ul>
195
- <h3 id="dsgn-validate-template"><code>dsgn validate &lt;template&gt;</code></h3>
150
+ <h3 id="loopwind-validate-template"><code>loopwind validate &lt;template&gt;</code></h3>
196
151
  <p>Validate a template:</p>
197
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> validate</span><span style="color:#9ECBFF"> banner-hero</span></span>
152
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> validate</span><span style="color:#9ECBFF"> banner-hero</span></span>
198
153
  <span class="line"></span></code></pre>
199
154
  <p>Checks:</p>
200
155
  <ul>
201
156
  <li>Template file exists and is valid React</li>
202
- <li><code>meta.json</code> exists and is valid</li>
157
+ <li><code>export const meta</code> exists and is valid</li>
203
158
  <li>Required props are defined</li>
204
159
  <li>Fonts exist (if specified)</li>
205
160
  </ul>
206
- <h3 id="dsgn-init"><code>dsgn init</code></h3>
207
- <p>Initialize dsgn in a project:</p>
208
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> init</span></span>
161
+ <h3 id="loopwind-init"><code>loopwind init</code></h3>
162
+ <p>Initialize loopwind in a project:</p>
163
+ <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> init</span></span>
209
164
  <span class="line"></span></code></pre>
210
- <p>Creates <code>dsgn.json</code> configuration file.</p>
165
+ <p>Creates <code>loopwind.json</code> configuration file.</p>
211
166
  <h2 id="next-steps">Next Steps</h2>
212
167
  <ul>
213
168
  <li><a href="/templates">Learn about Templates</a></li>