npm - loopwind - Versions diffs - 0.17.0 → 0.18.0 - Mend

loopwind 0.17.0 → 0.18.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 (352) hide show

package/website/dist/index.html CHANGED Viewed

@@ -1,174 +1,140 @@
-<!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">
+<!DOCTYPE html><html lang="en" data-astro-cid-mw7aashj> <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, serverless, WASM, Open Graph, social media, marketing 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/api/og/index"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt"><meta property="og:site_name" content="loopwind"><meta property="og:locale" content="en_US"><!-- 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/api/og/index"><meta name="twitter:image:alt"><meta name="twitter:creator" content="@loopwind"><meta name="twitter:site" content="@loopwind"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="language" content="English"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><!-- Mobile Web App --><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="loopwind"><!-- Structured Data (JSON-LD) --><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"loopwind","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","description":"CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates.","url":"https://loopwind.dev/","author":{"@type":"Organization","name":"loopwind","url":"https://loopwind.dev/"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"softwareVersion":"0.11.0","releaseNotes":"https://github.com/loopwind/loopwind/releases","screenshot":"https://loopwind.dev/api/og/index","featureList":["Image generation from React templates","Video generation with animations","Tailwind CSS support","shadcn/ui design system","CLI-based workflow","Serverless rendering","TypeScript support","AI Agent friendly"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"loopwind","url":"https://loopwind.dev/","logo":"https://loopwind.dev/favicon.svg","sameAs":["https://github.com/loopwind/loopwind","https://www.npmjs.com/package/loopwind"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://loopwind.dev/"}]}</script><link rel="stylesheet" href="/_astro/agents.Yx-L_igG.css">
 <style>.code-video-demo[data-astro-cid-hwce6zkj]{margin-top:2rem;margin-bottom:2rem}
-</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 -->
+</style><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
+</script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline bg-accent text-accent-foreground font-medium" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link 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> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="/preview" class="mobile-menu-link 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> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="/config" class="mobile-menu-link 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> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link 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="/agents" class="mobile-menu-link 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> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link 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> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar 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> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline bg-accent text-accent-foreground font-medium" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-1.5 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-1.5 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-1.5 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="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 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-1.5 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-1.5 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-1.5 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="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 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="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 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-linear-to-br from-background to-primary/10 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 -->
 The shadcn/ui for design & marketing
 </div> <!-- Title --> <h1 class="text-2xl md:text-4xl font-bold text-foreground mb-4 leading-tight text-balance" data-astro-cid-bbe6dxrz>
-CLI-based dynamic image & video generator for developers and AI Agents
+Programmatic marketing & storytelling automation for developers and AI Agents
 </h1> <!-- Description --> <p class="text-base md:text-lg text-muted-foreground mb-6 leading-relaxed text-balance" data-astro-cid-bbe6dxrz>
-Generate images and videos with React, Tailwind and Shadcn/ui classes.
+Generate images and videos with React, Tailwind and Shadcn/ui utility classes.
       Perfect for template-based marketing automation, social media, and dynamic
       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.
-</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>
-<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 }) {
-  return (
-    &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;
-      &lt;h1 style={tw(&#39;text-8xl font-bold text-white ease-out animate-bounce-in/0/0.4&#39;)}&gt;
-        {title}
-      &lt;/h1&gt;
-      &lt;p style={tw(&#39;text-2xl text-white/80 ease-out animate-fade-in-up/0.3/0.7&#39;)}&gt;
-        {subtitle}
-      &lt;/p&gt;
-    &lt;/div&gt;
-  );
-}</code>
-      </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>
+</p> <!-- CTA Buttons --> <div class="flex flex-wrap gap-3" data-astro-cid-bbe6dxrz> <a href="/getting-started" 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> </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="generate-images-and-videos-with-code">Generate Images and Videos with Code</h2>
+<p>Write React components, render them as images or videos. No design tools needed.</p>
+<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>Video Templates</h3> <div class="flex flex-col gap-6" data-astro-cid-hwce6zkj> <!-- Video Below --> <div data-astro-cid-hwce6zkj> <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>
 Your browser doesn't support video.
-</video> </div> </div> </div> </div>
-<p><strong>Render it:</strong></p>
-<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>
-<span class="line"></span></code></pre>
-<p><strong>Output:</strong> <code>_loopwind/outputs/intro.mp4</code> (1920×1080px, 3 seconds @ 30fps)</p>
-<p><strong>Perfect for:</strong> Social media intros, animated logos, tutorial overlays, and product showcases.</p>
-<h2 id="image-templates">Image Templates</h2>
-<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>
-<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>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<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>
-<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>
-<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>
+</video> </div> </div> <!-- Code --> <div data-astro-cid-hwce6zkj> <div class="overflow-hidden rounded-lg border border-border" data-astro-cid-hwce6zkj> <pre class="astro-code github-dark !m-0 p-0" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-astro-cid-hwce6zkj data-language="tsx"><code><span class="line"><span style="color:#6A737D">// _loopwind/templates/video-intro.tsx</span></span>
+<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">'video-intro'</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  type: </span><span style="color:#9ECBFF">'video'</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  size: { width: </span><span style="color:#79B8FF">1200</span><span style="color:#E1E4E8">, height: </span><span style="color:#79B8FF">676</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#E1E4E8">  video: { fps: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">, duration: </span><span style="color:#79B8FF">3</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#E1E4E8">  props: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    title: </span><span style="color:#9ECBFF">'string'</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    subtitle: </span><span style="color:#9ECBFF">'string'</span></span>
+<span class="line"><span style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#E1E4E8">};</span></span>
 <span class="line"></span>
-<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<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>
-<span class="line"><span style="color:#E1E4E8">            {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">          &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
-<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-xl text-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">            {description}</span></span>
-<span class="line"><span style="color:#E1E4E8">          &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<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>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<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>
-<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">img</span></span>
-<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>
-<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>
-<span class="line"><span style="color:#E1E4E8">        /&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<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">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8"> }) {</span></span>
+<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#E1E4E8">    &#x3C;</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">'flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 gap-4'</span><span style="color:#E1E4E8">)}></span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;</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">'relative flex flex-row items-center gap-2 ease-out'</span><span style="color:#E1E4E8">)}></span></span>
+<span class="line"><span style="color:#E1E4E8">        {</span><span style="color:#6A737D">/* loop-ping/500: scale up + fade out every 500ms (radar effect) */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">        &#x3C;</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">'w-3 h-3 bg-white rounded-full loop-ping/500'</span><span style="color:#E1E4E8">)} /></span></span>
+<span class="line"><span style="color:#E1E4E8">        &#x3C;</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">'text-white'</span><span style="color:#E1E4E8">)}>Label&#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* enter-fade-in/0/1200: fade in starting at 0ms, lasting 1200ms */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;</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">'text-7xl font-bold text-white enter-fade-in/0/1200'</span><span style="color:#E1E4E8">)}></span></span>
+<span class="line"><span style="color:#E1E4E8">        {title}</span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* enter-fade-in/300/1200: fade in starting at 300ms, lasting 1200ms */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;</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">'text-2xl text-white/80 ease-out enter-fade-in/300/1200'</span><span style="color:#E1E4E8">)}></span></span>
+<span class="line"><span style="color:#E1E4E8">        {subtitle}</span></span>
+<span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span>
+<span class="line"><span style="color:#E1E4E8">    &#x3C;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
 <span class="line"><span style="color:#E1E4E8">  );</span></span>
 <span class="line"><span style="color:#E1E4E8">}</span></span>
+<span class="line"></span></code></pre> </div> </div> </div> </div>
+<p><strong>Render it in one command:</strong></p>
+<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>
+<span class="line"></span></code></pre>
+<p><strong>Perfect for:</strong> Social media intros, animated logos, product demos, tutorial overlays.</p>
+<hr/>
+<h2 id="image-templates">Image Templates</h2>
+<p>Generate Open Graph images, Twitter cards, and more:</p>
+<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:#E1E4E8">{imageCode}</span></span>
 <span class="line"></span></code></pre>
 <p><strong>Render it:</strong></p>
-<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>
+<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 post&quot;}&#39;</span></span>
 <span class="line"></span></code></pre>
 <p><strong>Output:</strong> <code>_loopwind/outputs/og-image.png</code> (1200×630px)</p>
-<p><strong>Perfect for:</strong> Open Graph images, Twitter cards, blog headers, product cards, and quote graphics.</p>
-<h2 id="features">Features</h2>
+<hr/>
+<h2 id="why-loopwind">Why loopwind?</h2>
+<h3 id="-beautiful-by-default">🎨 Beautiful by Default</h3>
+<p>Built on shadcn/ui design system with semantic colors (<code>text-primary</code>, <code>bg-card</code>) and Tailwind CSS utilities. Your templates look professional out of the box.</p>
+<h3 id="-blazing-fast-rendering">⚡ Blazing Fast Rendering</h3>
 <ul>
-<li>🎨 <strong>shadcn/ui Design System</strong>: Beautiful, semantic colors out of the box (<code>text-primary</code>, <code>bg-card</code>, etc.)</li>
-<li>✨ <strong>Template-based</strong>: Install design templates like you install UI components</li>
-<li>🖼️ <strong>Serverless Image Rendering</strong>: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers</li>
-<li>🎬 <strong>Serverless Video Rendering</strong>: WASM-based MP4 encoding - 12x faster than traditional approaches</li>
-<li>🎨 <strong>Tailwind CSS Support</strong>: Style templates with Tailwind utility classes + opacity modifiers (<code>bg-primary/50</code>)</li>
-<li>📱 <strong>Built-in Helpers</strong>: QR codes, image embedding, video backgrounds, template composition</li>
-<li>✅ <strong>Smart Validation</strong>: Automatic prop and template validation with helpful error messages</li>
-<li>🚀 <strong>Framework-agnostic</strong>: Works with Node, Bun, Deno, Laravel, Python, and more</li>
-<li>🤖 <strong>Agent-friendly</strong>: Machine-readable metadata for LLMs</li>
-<li>📦 <strong>Easy installation</strong>: <code>npx loopwind add template-name</code></li>
-<li>🌐 <strong>Pure JavaScript/WASM</strong>: No native dependencies, works everywhere</li>
+<li><strong>Serverless-ready</strong>: Pure JavaScript rendering with Satori - works on Vercel, Netlify, Cloudflare Workers</li>
+<li><strong>WASM-powered video</strong>: MP4 encoding that’s 12x faster than traditional approaches</li>
+<li><strong>No dependencies</strong>: No FFmpeg, no Chrome, no Docker. Just JavaScript.</li>
 </ul>
-<h2 id="quick-start">Quick Start</h2>
-<h3 id="installation">Installation</h3>
-<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>
-<span class="line"></span></code></pre>
-<p>Or use with npx:</p>
-<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>
-<span class="line"></span></code></pre>
-<h3 id="initialize-in-your-project">Initialize in Your Project</h3>
-<p>Navigate to any project folder and run:</p>
-<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>
+<h3 id="-template-marketplace-coming-soon">📦 Template Marketplace (coming soon)</h3>
+<p>Install templates like UI components. Browse, add, and customize in seconds:</p>
+<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"> banner-hero</span></span>
+<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> video-intro</span></span>
+<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> product-card</span></span>
 <span class="line"></span></code></pre>
-<p>This creates a <code>_loopwind/</code> folder where templates and outputs will be located.</p>
-<h3 id="install-a-template">Install a Template</h3>
-<h4 id="1-official-templates">1. Official Templates</h4>
-<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>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> video-template</span></span>
+<h3 id="-built-for-ai-agents">🤖 Built for AI Agents</h3>
+<p>Machine-readable metadata and simple CLI make it perfect for automation:</p>
+<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"># Generate social media content programmatically</span></span>
+<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;&#39;</span><span style="color:#E1E4E8">$TITLE</span><span style="color:#9ECBFF">&#39;&quot;,&quot;description&quot;:&quot;&#39;</span><span style="color:#E1E4E8">$DESC</span><span style="color:#9ECBFF">&#39;&quot;}&#39;</span></span>
 <span class="line"></span></code></pre>
-<p>Templates are installed to: <code>_loopwind/templates/&lt;template&gt;/</code> (customizable in <code>loopwind.json</code>)</p>
-<p><strong>Benefits:</strong></p>
+<h3 id="-framework-agnostic">🚀 Framework Agnostic</h3>
+<p>Works everywhere: Node.js, Bun, Deno, Python, PHP, Go. If it can run a CLI command, it can use loopwind.</p>
+<hr/>
+<h2 id="key-features">Key Features</h2>
 <ul>
-<li>Templates are local to your project</li>
-<li>Version controlled with your project</li>
-<li>Easy to share within your team</li>
+<li>✨ <strong>Template-based workflow</strong> - Install and customize design templates</li>
+<li>🎬 <strong>Animation classes</strong> - <code>enter-fade-in/0/500</code>, <code>loop-spin/1000</code> - no manual calculations</li>
+<li>📱 <strong>Built-in helpers</strong> - QR codes, image embedding, video backgrounds, template composition</li>
+<li>✅ <strong>Smart validation</strong> - Automatic prop and template validation with helpful errors</li>
+<li>🎨 <strong>Full Tailwind support</strong> - Including opacity modifiers (<code>bg-primary/50</code>)</li>
+<li>🔧 <strong>Zero config</strong> - Works out of the box, customize when you need to</li>
+<li>📝 <strong>Type-safe</strong> - Full TypeScript support with prop validation</li>
+<li>🌐 <strong>Edge-ready</strong> - Runs anywhere JavaScript runs</li>
 </ul>
-<h3 id="output-a-template">Output a Template</h3>
-<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>
-<span class="line"></span></code></pre>
-<h2 id="commands">Commands</h2>
-<h3 id="loopwind-add-source"><code>loopwind add &lt;source&gt;</code></h3>
-<p>Install a template from various sources:</p>
-<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>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># From GitHub</span></span>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># From URL</span></span>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># From local path</span></span>
-<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>
-<span class="line"></span></code></pre>
-<h3 id="loopwind-list"><code>loopwind list</code></h3>
-<p>List all installed templates:</p>
-<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>
-<span class="line"></span></code></pre>
-<h3 id="loopwind-render-template-props-options"><code>loopwind render &lt;template&gt; &lt;props&gt; [options]</code></h3>
-<p>Render an image or video:</p>
-<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>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Video with inline props</span></span>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Using a props file</span></span>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Custom output</span></span>
-<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>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Different format</span></span>
-<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>
-<span class="line"></span></code></pre>
-<p>Options:</p>
+<hr/>
+<h2 id="use-cases">Use Cases</h2>
+<p><strong>Marketing Automation</strong></p>
 <ul>
-<li><code>--out, -o</code> - Output filename (default: <code>_loopwind/outputs/&lt;template&gt;.&lt;ext&gt;</code>)</li>
-<li><code>--format</code> - Output format: <code>png</code>, <code>jpeg</code>, <code>svg</code> (images only)</li>
-<li><code>--quality</code> - JPEG quality 1-100 (default: 92)</li>
+<li>Generate personalized email headers</li>
+<li>Create dynamic social media posts</li>
+<li>Automate Open Graph images</li>
 </ul>
-<h3 id="loopwind-validate-template"><code>loopwind validate &lt;template&gt;</code></h3>
-<p>Validate a template:</p>
-<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>
-<span class="line"></span></code></pre>
-<p>Checks:</p>
+<p><strong>Content Creation</strong></p>
+<ul>
+<li>Produce video intros and outros</li>
+<li>Generate thumbnail variations</li>
+<li>Create branded graphics at scale</li>
+</ul>
+<p><strong>Developer Tools</strong></p>
 <ul>
-<li>Template file exists and is valid React</li>
-<li><code>export const meta</code> exists and is valid</li>
-<li>Required props are defined</li>
-<li>Fonts exist (if specified)</li>
+<li>Build dynamic README badges</li>
+<li>Generate documentation images</li>
+<li>Create automated reports</li>
 </ul>
-<h3 id="loopwind-init"><code>loopwind init</code></h3>
-<p>Initialize loopwind in a project:</p>
-<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>
+<p><strong>E-commerce</strong></p>
+<ul>
+<li>Product card generation</li>
+<li>Sale announcement videos</li>
+<li>Dynamic pricing graphics</li>
+</ul>
+<hr/>
+<h2 id="get-started">Get Started</h2>
+<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>
+<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> init</span></span>
+<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> video-intro</span></span>
+<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;Hello World&quot;}&#39;</span></span>
 <span class="line"></span></code></pre>
-<p>Creates <code>loopwind.json</code> configuration file.</p>
-<h2 id="next-steps">Next Steps</h2>
+<p><a href="/getting-started">View Full Documentation</a> · <a href="/templates">Browse Templates</a> · <a href="/images">See Examples</a></p>
+<hr/>
+<h2 id="learn-more">Learn More</h2>
 <ul>
-<li><a href="/templates">Learn about Templates</a></li>
-<li><a href="/images">Image Rendering</a></li>
-<li><a href="/video">Video Rendering</a></li>
-<li><a href="/helpers">Helpers (QR, Template Composition)</a></li>
-<li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
-<li><a href="/fonts">Custom Fonts</a></li>
-</ul> </article> </div> </main> </div>  </body></html>
+<li><a href="/getting-started">Getting Started Guide</a> - Installation and first steps</li>
+<li><a href="/templates">Templates</a> - Create and customize templates</li>
+<li><a href="/images">Images</a> - Static image generation</li>
+<li><a href="/video">Video</a> - Animated video rendering</li>
+<li><a href="/styling">Styling</a> - Tailwind &amp; shadcn/ui integration</li>
+<li><a href="/sdk">SDK</a> - Programmatic usage</li>
+<li><a href="/agents">AI Agents</a> - Integration guide for LLMs</li>
+</ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) -->  </div>  </body></html>