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

loopwind 0.17.0 → 0.18.1

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 (341) hide show

package/website/dist/sdk/index.html CHANGED Viewed

@@ -1,4 +1,5 @@
-<!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/sdk/"><!-- 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/sdk/"><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/sdk/"><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"></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 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-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="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="sdk">SDK</h1>
+<!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/sdk/"><!-- 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/sdk/"><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/sdk"><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/sdk/"><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/sdk"><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/sdk","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/"},{"@type":"ListItem","position":2,"name":"Sdk","item":"https://loopwind.dev/sdk"}]}</script><link rel="stylesheet" href="/_astro/agents.Yx-L_igG.css"><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 text-muted-foreground hover:text-foreground hover:bg-accent/50" 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 text-muted-foreground hover:text-foreground hover:bg-accent/50" 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 mr-64" data-astro-cid-mw7aashj>  <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="sdk">SDK</h1>
 <p>Use <strong>loopwind</strong> programmatically in your Next.js API routes, serverless functions, or Node.js applications. Perfect for building image/video generation APIs!</p>
 <h2 id="installation">Installation</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:#9ECBFF"> loopwind</span></span>
@@ -24,10 +25,219 @@
 <span class="line"><span style="color:#E1E4E8">  description: </span><span style="color:#9ECBFF">&#39;Generated with loopwind SDK&#39;</span><span style="color:#E1E4E8">,</span></span>
 <span class="line"><span style="color:#E1E4E8">});</span></span>
 <span class="line"></span></code></pre>
+<h2 id="sdk-vs-cli">SDK vs CLI</h2>
+<p>The SDK is designed to be <strong>completely stateless</strong> and <strong>self-contained</strong> - perfect for serverless environments like Vercel, Netlify, or AWS Lambda.</p>
+<p><strong>Key differences:</strong></p>
+<table><thead><tr><th>Feature</th><th>CLI (<code>loopwind render</code>)</th><th>SDK (<code>renderImage()</code>)</th></tr></thead><tbody><tr><td><strong>Configuration</strong></td><td>Uses <code>loopwind.json</code> for colors, fonts, paths</td><td>Programmatic <code>StyleConfig</code> passed directly</td></tr><tr><td><strong>Templates</strong></td><td>File-based in <code>_loopwind/templates/</code></td><td>Defined with <code>defineTemplate()</code></td></tr><tr><td><strong>State</strong></td><td>Stateful (project directory)</td><td>Stateless (no filesystem reads)</td></tr><tr><td><strong>Use case</strong></td><td>Local development, project-based</td><td>APIs, serverless, dynamic generation</td></tr></tbody></table>
+<p><strong>Important:</strong> The SDK does <strong>not</strong> read <code>loopwind.json</code> from the filesystem. All configuration (colors, fonts) must be passed programmatically using <code>StyleConfig</code>.</p>
+<h2 id="style-configuration">Style Configuration</h2>
+<p>The SDK accepts configuration through the <code>StyleConfig</code> type, which you can pass in two places:</p>
+<ol>
+<li><strong>In <code>defineTemplate()</code></strong> - For fixed theme per template</li>
+<li><strong>In <code>renderImage()</code>/<code>renderVideo()</code></strong> - For dynamic theming at render time</li>
+</ol>
+<p><strong>Priority:</strong> Options config overrides template config.</p>
+<h3 id="basic-example">Basic Example</h3>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> { defineTemplate, renderImage, </span><span style="color:#F97583">type</span><span style="color:#E1E4E8"> StyleConfig } </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;loopwind/sdk&#39;</span><span style="color:#E1E4E8">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A737D">// Define your style config</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> config</span><span style="color:#F97583">:</span><span style="color:#B392F0"> StyleConfig</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">  colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    primary: </span><span style="color:#9ECBFF">&#39;#3b82f6&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    background: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    text: </span><span style="color:#9ECBFF">&#39;#09090b&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  },</span></span>
+<span class="line"><span style="color:#E1E4E8">  fonts: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    sans: [</span><span style="color:#9ECBFF">&#39;Inter&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;system-ui&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;sans-serif&#39;</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>
+<span class="line"><span style="color:#6A737D">// Option 1: Pass config to template definition</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> template</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;og-image&#39;</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">630</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#E1E4E8">  config, </span><span style="color:#6A737D">// Fixed theme for this template</span></span>
+<span class="line"><span style="color:#B392F0">  render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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-background&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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-6xl font-bold text-primary&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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:#6A737D">// Option 2: Pass config at render time</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> png</span><span style="color:#F97583"> =</span><span style="color:#F97583"> await</span><span style="color:#B392F0"> renderImage</span><span style="color:#E1E4E8">(template, { title: </span><span style="color:#9ECBFF">&#39;Hello&#39;</span><span style="color:#E1E4E8"> }, {</span></span>
+<span class="line"><span style="color:#E1E4E8">  config: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      primary: </span><span style="color:#9ECBFF">&#39;#8b5cf6&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Override template config</span></span>
+<span class="line"><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>
+<h3 id="dynamic-theming">Dynamic Theming</h3>
+<p>Perfect for multi-tenant apps or user-customizable themes:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> brandTemplate</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;branded-og&#39;</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">630</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#B392F0">  render</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 style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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 flex-col w-full h-full bg-background p-12 justify-between&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">div 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 gap-4&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">        &lt;</span><span style="color:#E1E4E8">div 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-16 h-16 rounded-full bg-brand&#39;</span><span style="color:#E1E4E8">)} </span><span style="color:#F97583">/&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#B392F0">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#F97583">        &lt;</span><span style="color:#E1E4E8">h1 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-7xl font-bold text-foreground mb-4&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">        &lt;</span><span style="color:#E1E4E8">p 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-3xl text-muted-foreground&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{subtitle}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">p</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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:#6A737D">// Render with different brand colors for each customer</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> customer1</span><span style="color:#F97583"> =</span><span style="color:#F97583"> await</span><span style="color:#B392F0"> renderImage</span><span style="color:#E1E4E8">(brandTemplate,</span></span>
+<span class="line"><span style="color:#E1E4E8">  { title: </span><span style="color:#9ECBFF">&#39;Welcome&#39;</span><span style="color:#E1E4E8">, subtitle: </span><span style="color:#9ECBFF">&#39;Customer 1&#39;</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#E1E4E8">  {</span></span>
+<span class="line"><span style="color:#E1E4E8">    config: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">        brand: </span><span style="color:#9ECBFF">&#39;#ef4444&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">        background: </span><span style="color:#9ECBFF">&#39;#fef2f2&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">        foreground: </span><span style="color:#9ECBFF">&#39;#7f1d1d&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#9ECBFF">        &#39;muted-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#991b1b&#39;</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 style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#E1E4E8">);</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> customer2</span><span style="color:#F97583"> =</span><span style="color:#F97583"> await</span><span style="color:#B392F0"> renderImage</span><span style="color:#E1E4E8">(brandTemplate,</span></span>
+<span class="line"><span style="color:#E1E4E8">  { title: </span><span style="color:#9ECBFF">&#39;Welcome&#39;</span><span style="color:#E1E4E8">, subtitle: </span><span style="color:#9ECBFF">&#39;Customer 2&#39;</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#E1E4E8">  {</span></span>
+<span class="line"><span style="color:#E1E4E8">    config: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">        brand: </span><span style="color:#9ECBFF">&#39;#3b82f6&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">        background: </span><span style="color:#9ECBFF">&#39;#eff6ff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">        foreground: </span><span style="color:#9ECBFF">&#39;#1e3a8a&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#9ECBFF">        &#39;muted-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#1e40af&#39;</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 style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#E1E4E8">);</span></span>
+<span class="line"></span></code></pre>
+<h3 id="full-styleconfig-example">Full StyleConfig Example</h3>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#F97583"> type</span><span style="color:#E1E4E8"> { StyleConfig } </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;loopwind/sdk&#39;</span><span style="color:#E1E4E8">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> config</span><span style="color:#F97583">:</span><span style="color:#B392F0"> StyleConfig</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#6A737D">  // Theme colors (any custom color names)</span></span>
+<span class="line"><span style="color:#E1E4E8">  colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    primary: </span><span style="color:#9ECBFF">&#39;#6366f1&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#9ECBFF">    &#39;primary-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    background: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    foreground: </span><span style="color:#9ECBFF">&#39;#0f172a&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    muted: </span><span style="color:#9ECBFF">&#39;#f1f5f9&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#9ECBFF">    &#39;muted-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#64748b&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    border: </span><span style="color:#9ECBFF">&#39;#e2e8f0&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    brand: </span><span style="color:#9ECBFF">&#39;#8b5cf6&#39;</span><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:#6A737D">  // Font families</span></span>
+<span class="line"><span style="color:#E1E4E8">  fonts: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    sans: [</span><span style="color:#9ECBFF">&#39;Inter&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;sans-serif&#39;</span><span style="color:#E1E4E8">],</span></span>
+<span class="line"><span style="color:#E1E4E8">    serif: [</span><span style="color:#9ECBFF">&#39;Playfair Display&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;serif&#39;</span><span style="color:#E1E4E8">],</span></span>
+<span class="line"><span style="color:#E1E4E8">    mono: [</span><span style="color:#9ECBFF">&#39;JetBrains Mono&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;monospace&#39;</span><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:#6A737D">  // Custom tokens (optional)</span></span>
+<span class="line"><span style="color:#E1E4E8">  tokens: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    borderRadius: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      sm: </span><span style="color:#9ECBFF">&#39;0.25rem&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      md: </span><span style="color:#9ECBFF">&#39;0.375rem&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      lg: </span><span style="color:#9ECBFF">&#39;0.5rem&#39;</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 style="color:#E1E4E8">};</span></span>
+<span class="line"></span></code></pre>
+<h3 id="font-files">Font Files</h3>
+<p>You can load custom fonts from local paths or external URLs:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> config</span><span style="color:#F97583">:</span><span style="color:#B392F0"> StyleConfig</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">  colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    text: </span><span style="color:#9ECBFF">&#39;#000000&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  },</span></span>
+<span class="line"><span style="color:#E1E4E8">  fonts: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    sans: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      family: [</span><span style="color:#9ECBFF">&#39;Inter&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;sans-serif&#39;</span><span style="color:#E1E4E8">],</span></span>
+<span class="line"><span style="color:#E1E4E8">      files: [</span></span>
+<span class="line"><span style="color:#6A737D">        // Local font file (relative to your project)</span></span>
+<span class="line"><span style="color:#E1E4E8">        { path: </span><span style="color:#9ECBFF">&#39;./fonts/Inter-Regular.woff&#39;</span><span style="color:#E1E4E8">, weight: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#6A737D">        // External URL</span></span>
+<span class="line"><span style="color:#E1E4E8">        {</span></span>
+<span class="line"><span style="color:#E1E4E8">          path: </span><span style="color:#9ECBFF">&#39;https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          weight: </span><span style="color:#79B8FF">700</span></span>
+<span class="line"><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 style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#E1E4E8">};</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> template</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  config,</span></span>
+<span class="line"><span style="color:#B392F0">  render</span><span style="color:#E1E4E8">: ({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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;font-sans&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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;font-bold&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">Bold uses weight </span><span style="color:#79B8FF">700</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">p 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;font-normal&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">Normal uses weight </span><span style="color:#79B8FF">400</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">p</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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>
+<p><strong>Supported formats:</strong></p>
+<ul>
+<li>✅ WOFF (<code>.woff</code>)</li>
+<li>✅ TTF (<code>.ttf</code>)</li>
+<li>✅ OTF (<code>.otf</code>)</li>
+<li>❌ WOFF2 (not supported)</li>
+</ul>
+<h3 id="alternative-hardcoded-colors">Alternative: Hardcoded Colors</h3>
+<p>If you prefer not to use config, you can still hardcode colors:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> template</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;og-image&#39;</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">630</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#B392F0">  render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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;bg-[#3B82F6] text-white p-12&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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-6xl font-bold&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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>
 <h2 id="core-functions">Core Functions</h2>
 <h3 id="definetemplate">defineTemplate()</h3>
 <p>Define a template programmatically without any file system dependencies:</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> { defineTemplate } </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;loopwind/sdk&#39;</span><span style="color:#E1E4E8">;</span></span>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> { defineTemplate, </span><span style="color:#F97583">type</span><span style="color:#E1E4E8"> StyleConfig } </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;loopwind/sdk&#39;</span><span style="color:#E1E4E8">;</span></span>
 <span class="line"></span>
 <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> template</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
 <span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;my-template&#39;</span><span style="color:#E1E4E8">,           </span><span style="color:#6A737D">// Template name</span></span>
@@ -37,13 +247,21 @@
 <span class="line"><span style="color:#6A737D">  // For videos only</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>
-<span class="line"><span style="color:#6A737D">  // Optional fonts</span></span>
-<span class="line"><span style="color:#E1E4E8">  fonts: [</span><span style="color:#9ECBFF">&#39;Inter&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;Roboto&#39;</span><span style="color:#E1E4E8">],</span></span>
+<span class="line"><span style="color:#6A737D">  // Optional style config (colors, fonts, etc.)</span></span>
+<span class="line"><span style="color:#E1E4E8">  config: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      primary: </span><span style="color:#9ECBFF">&#39;#3b82f6&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      background: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">    },</span></span>
+<span class="line"><span style="color:#E1E4E8">    fonts: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      sans: [</span><span style="color:#9ECBFF">&#39;Inter&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;sans-serif&#39;</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>
 <span class="line"><span style="color:#6A737D">  // The render function</span></span>
 <span class="line"><span style="color:#B392F0">  render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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-white&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
-<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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-6xl font-bold&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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-background&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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-6xl font-bold text-primary&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  ),</span></span>
 <span class="line"><span style="color:#E1E4E8">});</span></span>
@@ -55,6 +273,11 @@
 <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> buffer</span><span style="color:#F97583"> =</span><span style="color:#F97583"> await</span><span style="color:#B392F0"> renderImage</span><span style="color:#E1E4E8">(template, props, {</span></span>
 <span class="line"><span style="color:#E1E4E8">  format: </span><span style="color:#9ECBFF">&#39;png&#39;</span><span style="color:#E1E4E8">,    </span><span style="color:#6A737D">// &#39;png&#39;, &#39;jpeg&#39;, &#39;jpg&#39;, &#39;webp&#39;, &#39;svg&#39;</span></span>
 <span class="line"><span style="color:#E1E4E8">  quality: </span><span style="color:#79B8FF">92</span><span style="color:#E1E4E8">,      </span><span style="color:#6A737D">// JPEG/WebP quality (1-100)</span></span>
+<span class="line"><span style="color:#E1E4E8">  config: {         </span><span style="color:#6A737D">// Optional: Override template config</span></span>
+<span class="line"><span style="color:#E1E4E8">    colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      primary: </span><span style="color:#9ECBFF">&#39;#8b5cf6&#39;</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 style="color:#E1E4E8">});</span></span>
 <span class="line"></span></code></pre>
 <p><strong>Supported formats:</strong></p>
@@ -73,8 +296,43 @@
 <span class="line"><span style="color:#B392F0">  onProgress</span><span style="color:#E1E4E8">: (</span><span style="color:#FFAB70">frame</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">total</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">phase</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
 <span class="line"><span style="color:#E1E4E8">    console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">`${</span><span style="color:#E1E4E8">phase</span><span style="color:#9ECBFF">}: ${</span><span style="color:#E1E4E8">frame</span><span style="color:#9ECBFF">}/${</span><span style="color:#E1E4E8">total</span><span style="color:#9ECBFF">}`</span><span style="color:#E1E4E8">);</span></span>
 <span class="line"><span style="color:#E1E4E8">  },</span></span>
+<span class="line"><span style="color:#E1E4E8">  config: {         </span><span style="color:#6A737D">// Optional: Override template config</span></span>
+<span class="line"><span style="color:#E1E4E8">    colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      primary: </span><span style="color:#9ECBFF">&#39;#8b5cf6&#39;</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 style="color:#E1E4E8">});</span></span>
 <span class="line"></span></code></pre>
+<h2 id="importing-template-files">Importing Template Files</h2>
+<p>You can reuse file-based templates from <code>_loopwind/templates/</code> in your SDK code! Perfect for sharing templates between CLI and API.</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#6A737D">// Import a template file</span></span>
+<span class="line"><span style="color:#F97583">import</span><span style="color:#79B8FF"> *</span><span style="color:#F97583"> as</span><span style="color:#E1E4E8"> videoIntro </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;./_loopwind/templates/video-intro/template&#39;</span><span style="color:#E1E4E8">;</span></span>
+<span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> { defineTemplateFromFile, renderVideo } </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> &#39;loopwind/sdk&#39;</span><span style="color:#E1E4E8">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A737D">// Create SDK template from file with optional config override</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> template</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplateFromFile</span><span style="color:#E1E4E8">(videoIntro, {</span></span>
+<span class="line"><span style="color:#E1E4E8">  config: {</span></span>
+<span class="line"><span style="color:#E1E4E8">    colors: {</span></span>
+<span class="line"><span style="color:#E1E4E8">      primary: </span><span style="color:#9ECBFF">&#39;#ff0000&#39;</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 style="color:#E1E4E8">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A737D">// Render with props</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> mp4</span><span style="color:#F97583"> =</span><span style="color:#F97583"> await</span><span style="color:#B392F0"> renderVideo</span><span style="color:#E1E4E8">(template, {</span></span>
+<span class="line"><span style="color:#E1E4E8">  version: </span><span style="color:#9ECBFF">&#39;2.0.0&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  changes: [</span><span style="color:#9ECBFF">&#39;New feature added&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&#39;Bug fixes&#39;</span><span style="color:#E1E4E8">],</span></span>
+<span class="line"><span style="color:#E1E4E8">});</span></span>
+<span class="line"></span></code></pre>
+<p><strong>Benefits:</strong></p>
+<ul>
+<li>✅ Reuse templates between CLI and SDK</li>
+<li>✅ Keep templates in separate files (better organization)</li>
+<li>✅ Override config at SDK level</li>
+<li>✅ Type-safe with TypeScript</li>
+<li>✅ Works with any bundler (Next.js, Vite, webpack, etc.)</li>
+</ul>
+<p><strong>Note:</strong> Requires a bundler that handles TypeScript/TSX imports (Next.js, Vite, etc.)</p>
 <h2 id="nextjs-api-routes">Next.js API Routes</h2>
 <h3 id="image-generation">Image Generation</h3>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#6A737D">// pages/api/og-image.ts</span></span>
@@ -170,63 +428,135 @@
 <span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">)</span></span>
 <span class="line"></span></code></pre>
+<h3 id="using-qr">Using qr()</h3>
+<p>Generate QR codes as data URIs:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</span><span style="color:#E1E4E8">: ({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">qr</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">url</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">div 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-white p-12&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#FFAB70">img</span></span>
+<span class="line"><span style="color:#E1E4E8">      src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">qr</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">url</span><span style="color:#E1E4E8">, {</span></span>
+<span class="line"><span style="color:#FFAB70">        width</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#FFAB70">        margin</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#FFAB70">        errorCorrectionLevel</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;M&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#FFAB70">        color</span><span style="color:#E1E4E8">: {</span></span>
+<span class="line"><span style="color:#FFAB70">          dark</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#000000&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#FFAB70">          light</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span></span>
+<span class="line"><span style="color:#E1E4E8">        }</span></span>
+<span class="line"><span style="color:#E1E4E8">      })}</span></span>
+<span class="line"><span style="color:#E1E4E8">      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-48 h-48&#39;</span><span style="color:#E1E4E8">)}</span></span>
+<span class="line"><span style="color:#F97583">    /&gt;</span></span>
+<span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">)</span></span>
+<span class="line"></span></code></pre>
+<p><strong>Options:</strong></p>
+<ul>
+<li><code>width</code> - QR code size in pixels (default: 200)</li>
+<li><code>margin</code> - Quiet zone margin (default: 4)</li>
+<li><code>errorCorrectionLevel</code> - <code>&#39;L&#39;</code>, <code>&#39;M&#39;</code>, <code>&#39;Q&#39;</code>, or <code>&#39;H&#39;</code> (default: ‘M’)</li>
+<li><code>color.dark</code> - Dark module color (default: ‘#000000’)</li>
+<li><code>color.light</code> - Light module color (default: ‘#ffffff’)</li>
+</ul>
+<h3 id="using-image">Using image()</h3>
+<p>Embed local images as data URIs:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">div 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&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Image path relative to template directory */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#FFAB70">img</span></span>
+<span class="line"><span style="color:#E1E4E8">      src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;logo.png&#39;</span><span style="color:#E1E4E8">)}</span></span>
+<span class="line"><span style="color:#E1E4E8">      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-32 h-32&#39;</span><span style="color:#E1E4E8">)}</span></span>
+<span class="line"><span style="color:#F97583">    /&gt;</span></span>
+<span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">)</span></span>
+<span class="line"></span></code></pre>
+<p><strong>Note:</strong> Images must be in the same directory as your template file when using <code>defineTemplateFromFile()</code>, or embedded as data URIs when using <code>defineTemplate()</code>.</p>
+<h3 id="using-template">Using template()</h3>
+<p>Compose templates by embedding one template inside another:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#6A737D">// Card template</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> cardTemplate</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;card&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">  size: { width: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">, height: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#B392F0">  render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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-blue-500&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h2 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-2xl font-bold text-white&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">{title}</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h2</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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:#6A737D">// Main template embedding the card</span></span>
+<span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> mainTemplate</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> defineTemplate</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&#39;main&#39;</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">630</span><span style="color:#E1E4E8"> },</span></span>
+<span class="line"><span style="color:#B392F0">  render</span><span style="color:#E1E4E8">: ({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">template</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">div 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 flex-col gap-4 w-full h-full bg-gray-100 p-8&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#E1E4E8">h1 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-4xl font-bold&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">My Cards</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Embed card template */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">      &lt;</span><span style="color:#FFAB70">img</span></span>
+<span class="line"><span style="color:#E1E4E8">        src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;card&#39;</span><span style="color:#E1E4E8">, { </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;Card 1&#39;</span><span style="color:#E1E4E8"> })}</span></span>
+<span class="line"><span style="color:#E1E4E8">        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-96&#39;</span><span style="color:#E1E4E8">)}</span></span>
+<span class="line"><span style="color:#F97583">      /&gt;</span></span>
+<span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</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>
 <h3 id="video-animations">Video Animations</h3>
-<p>Use Tailwind-style animation classes for easy video animations!</p>
-<h4 id="transition-animations">Transition Animations</h4>
-<p>Format: <code>animate-{type}/{start}/{end}</code> with optional easing</p>
+<p>Use Tailwind-style animation classes for easy video animations! All timing values are in <strong>milliseconds</strong>.</p>
+<h4 id="enter-animations">Enter Animations</h4>
+<p>Format: <code>enter-{type}/{startMs}/{endMs}</code> with optional easing</p>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">div 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&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Fade in from progress 0 to 0.5 */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold animate-fade-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Fade in from 0ms to 1500ms */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold enter-fade-in/0/1500&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">}</span></span>
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">)</span></span>
 <span class="line"></span></code></pre>
-<p><strong>Available transition animations:</strong></p>
+<p><strong>Available enter animations:</strong></p>
 <p><em>Fade:</em></p>
 <ul>
-<li><code>animate-fade-in/0/1</code> - Fade in</li>
-<li><code>animate-fade-out/0/1</code> - Fade out</li>
-<li><code>animate-fade-in-up/0/1</code> - Fade in + slide up</li>
-<li><code>animate-fade-in-down/0/1</code> - Fade in + slide down</li>
-<li><code>animate-fade-in-left/0/1</code> - Fade in + slide from left</li>
-<li><code>animate-fade-in-right/0/1</code> - Fade in + slide from right</li>
-<li><code>animate-fade-out-up/0/1</code> - Fade out + slide up</li>
-<li><code>animate-fade-out-down/0/1</code> - Fade out + slide down</li>
+<li><code>enter-fade-in/0/500</code> - Fade in</li>
+<li><code>enter-fade-in-up/0/500</code> - Fade in + slide up</li>
+<li><code>enter-fade-in-down/0/500</code> - Fade in + slide down</li>
+<li><code>enter-fade-in-left/0/500</code> - Fade in + slide from left</li>
+<li><code>enter-fade-in-right/0/500</code> - Fade in + slide from right</li>
 </ul>
 <p><em>Slide:</em></p>
 <ul>
-<li><code>animate-slide-left/0/1</code> - Slide in from left (100px)</li>
-<li><code>animate-slide-right/0/1</code> - Slide in from right (100px)</li>
-<li><code>animate-slide-up/0/1</code> - Slide in from bottom (100px)</li>
-<li><code>animate-slide-down/0/1</code> - Slide in from top (100px)</li>
+<li><code>enter-slide-left/0/500</code> - Slide in from left (100px)</li>
+<li><code>enter-slide-right/0/500</code> - Slide in from right (100px)</li>
+<li><code>enter-slide-up/0/500</code> - Slide in from bottom (100px)</li>
+<li><code>enter-slide-down/0/500</code> - Slide in from top (100px)</li>
 </ul>
 <p><em>Bounce:</em></p>
 <ul>
-<li><code>animate-bounce-in/0/1</code> - Bounce in with scale overshoot</li>
-<li><code>animate-bounce-in-up/0/1</code> - Bounce in from below</li>
-<li><code>animate-bounce-in-down/0/1</code> - Bounce in from above</li>
-<li><code>animate-bounce-in-left/0/1</code> - Bounce in from left</li>
-<li><code>animate-bounce-in-right/0/1</code> - Bounce in from right</li>
+<li><code>enter-bounce-in/0/500</code> - Bounce in with scale overshoot</li>
+<li><code>enter-bounce-in-up/0/500</code> - Bounce in from below</li>
+<li><code>enter-bounce-in-down/0/500</code> - Bounce in from above</li>
+<li><code>enter-bounce-in-left/0/500</code> - Bounce in from left</li>
+<li><code>enter-bounce-in-right/0/500</code> - Bounce in from right</li>
 </ul>
 <p><em>Scale &amp; Zoom:</em></p>
 <ul>
-<li><code>animate-scale-in/0/1</code> - Scale up from 50%</li>
-<li><code>animate-scale-out/0/1</code> - Scale up and fade out</li>
-<li><code>animate-zoom-in/0/1</code> - Zoom in from 0%</li>
-<li><code>animate-zoom-out/0/1</code> - Zoom out to 200%</li>
+<li><code>enter-scale-in/0/500</code> - Scale up from 50%</li>
+<li><code>enter-zoom-in/0/500</code> - Zoom in from 0%</li>
 </ul>
 <p><em>Rotate &amp; Flip:</em></p>
 <ul>
-<li><code>animate-rotate-in/0/1</code> - Rotate in (180°)</li>
-<li><code>animate-rotate-out/0/1</code> - Rotate out (180°)</li>
-<li><code>animate-flip-in-x/0/1</code> - Flip in horizontally</li>
-<li><code>animate-flip-in-y/0/1</code> - Flip in vertically</li>
+<li><code>enter-rotate-in/0/500</code> - Rotate in (180°)</li>
+<li><code>enter-flip-in-x/0/500</code> - Flip in horizontally</li>
+<li><code>enter-flip-in-y/0/500</code> - Flip in vertically</li>
+</ul>
+<h4 id="exit-animations">Exit Animations</h4>
+<p>Format: <code>exit-{type}/{startMs}/{endMs}</code></p>
+<ul>
+<li><code>exit-fade-out/2500/3000</code> - Fade out</li>
+<li><code>exit-fade-out-up/2500/3000</code> - Fade out + slide up</li>
+<li><code>exit-slide-left/2500/3000</code> - Slide out to left</li>
+<li><code>exit-scale-out/2500/3000</code> - Scale out to 150%</li>
+<li><code>exit-zoom-out/2500/3000</code> - Zoom out to 200%</li>
 </ul>
 <p><strong>Easing modifiers:</strong></p>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#6A737D">// Add easing before animation class</span></span>
-<span class="line"><span style="color:#F97583">&lt;</span><span style="color:#E1E4E8">h1 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;ease-in-out animate-fade-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#F97583">&lt;</span><span style="color:#E1E4E8">h1 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;ease-in-out enter-fade-in/0/1500&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"></span></code></pre>
 <ul>
 <li><code>linear</code> - Linear</li>
@@ -238,11 +568,11 @@
 <li><code>ease-in-out-cubic</code> - Strong ease in/out</li>
 </ul>
 <h4 id="loop-animations">Loop Animations</h4>
-<p>Format: <code>animate-{type}/{frameLength}</code></p>
+<p>Format: <code>loop-{type}/{durationMs}</code></p>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">div 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&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Pulse every 15 frames */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold animate-pulse/15&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Pulse every 500ms */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold loop-fade/500&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">}</span></span>
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
@@ -250,28 +580,36 @@
 <span class="line"></span></code></pre>
 <p><strong>Available loop animations:</strong></p>
 <ul>
-<li><code>animate-pulse/10</code> - Opacity pulse</li>
-<li><code>animate-bounce/10</code> - Bounce up and down</li>
-<li><code>animate-spin/30</code> - Full rotation</li>
-<li><code>animate-ping/20</code> - Scale up and fade out</li>
-<li><code>animate-wiggle/10</code> - Side to side wiggle</li>
-<li><code>animate-float/30</code> - Gentle floating</li>
+<li><code>loop-fade/1000</code> - Opacity pulse</li>
+<li><code>loop-bounce/1000</code> - Bounce up and down</li>
+<li><code>loop-spin/1000</code> - Full rotation</li>
+<li><code>loop-ping/1000</code> - Scale up and fade out</li>
+<li><code>loop-wiggle/1000</code> - Side to side wiggle</li>
+<li><code>loop-float/1000</code> - Gentle floating</li>
 </ul>
 <h4 id="staggered-animations">Staggered Animations</h4>
 <p>Combine multiple animations with different timings:</p>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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 style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">div 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 flex-col items-center justify-center w-full h-full&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Title fades in first */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold ease-out animate-slide-up/0/0.3&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Title slides in first */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold ease-out enter-slide-up/0/900&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">}</span></span>
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Subtitle fades in after */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">p 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-2xl mt-4 ease-out animate-slide-up/0.2/0.5&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#6A737D">/* Subtitle slides in after */</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">    &lt;</span><span style="color:#E1E4E8">p 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-2xl mt-4 ease-out enter-slide-up/600/1500&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8">}</span></span>
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">p</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">div</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">)</span></span>
 <span class="line"></span></code></pre>
+<h4 id="combined-enter-and-exit">Combined Enter and Exit</h4>
+<p>You can use both on the same element:</p>
+<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">h1 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-8xl font-bold enter-fade-in/0/500 exit-fade-out/2500/3000&#39;</span><span style="color:#E1E4E8">)}</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    {</span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#F97583">  &lt;/</span><span style="color:#E1E4E8">h1</span><span style="color:#F97583">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">)</span></span>
+<span class="line"></span></code></pre>
 <h4 id="manual-animations">Manual Animations</h4>
 <p>You can still use <code>progress</code> and <code>frame</code> directly for custom animations:</p>
 <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">render</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">frame</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
@@ -432,4 +770,4 @@
 <ul>
 <li><code>http://localhost:3000/api/og-image?title=Hello</code></li>
 <li><code>http://localhost:3000/api/intro-video?title=Welcome</code></li>
-</ul> </article> </div> </main> </div>  </body></html>
+</ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) --> <aside id="toc-sidebar" class="toc-sidebar fixed top-0 right-0 h-screen w-64 overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="px-6 py-8" data-astro-cid-mw7aashj> <h3 class="text-xs font-semibold text-muted-foreground mb-4 uppercase tracking-wider" data-astro-cid-mw7aashj>On this page</h3> <nav id="toc-nav" data-astro-cid-mw7aashj> <!-- TOC will be populated by JavaScript --> </nav> </div> </aside> </div>  </body></html>