npm - loopwind - Versions diffs - 0.23.0 → 0.24.0 - Mend

loopwind 0.23.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (497) hide show

package/website/dist/video/index.html DELETED Viewed

@@ -1,354 +0,0 @@
-<!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/video/"><!-- 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/video/"><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/video"><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/video/"><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/video"><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/video","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":"Video","item":"https://loopwind.dev/video"}]}</script><link rel="stylesheet" href="/_astro/agents.CZXv4DCM.css">
-<style>.hero[data-astro-cid-bbe6dxrz]{position:relative}html{scroll-behavior:smooth}.mobile-header[data-astro-cid-mw7aashj]{display:none}.toc-sidebar[data-astro-cid-mw7aashj]{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar{width:4px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-track{background:transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb{background-color:#ffffff1a;border-radius:2px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb:hover{background-color:#fff3}#copy-to-llm-btn[data-astro-cid-mw7aashj]{cursor:pointer}@media (max-width: 768px){.mobile-header[data-astro-cid-mw7aashj]{display:block}.desktop-sidebar[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;margin-right:0!important;padding:5rem 1.5rem 1.5rem}.toc-sidebar[data-astro-cid-mw7aashj]{display:none}#copy-to-llm-btn[data-astro-cid-mw7aashj]{width:100%;justify-content:center}}@media (max-width: 1280px){.toc-sidebar[data-astro-cid-mw7aashj]{display:none!important}main[data-astro-cid-mw7aashj]{margin-right:0!important}}
-</style><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
-</script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline 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="/playground" 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> Playground </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="/playground" 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> Playground </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="video-rendering">Video Rendering</h1>
-<p>Create animated videos programmatically using React components. Perfect for automated video generation, social media content, and dynamic animations.</p>
-<h2 id="quick-start">Quick Start</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:#6A737D"># Render a video template with inline props</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Faster encoding with FFmpeg (requires FFmpeg installed)</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --ffmpeg</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Or use a props file</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> props.json</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
-<span class="line"></span></code></pre>
-<h2 id="video-template-structure">Video Template Structure</h2>
-<h3 id="basic-template">Basic Template</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// video-intro.tsx</span></span>
-<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
-<span class="line"><span style="color:#E1E4E8">  name: </span><span style="color:#9ECBFF">&quot;video-intro&quot;</span><span style="color:#E1E4E8">,</span></span>
-<span class="line"><span style="color:#E1E4E8">  type: </span><span style="color:#9ECBFF">&quot;video&quot;</span><span style="color:#E1E4E8">,</span></span>
-<span class="line"><span style="color:#E1E4E8">  description: </span><span style="color:#9ECBFF">&quot;Animated intro with bounce-in title&quot;</span><span style="color:#E1E4E8">,</span></span>
-<span class="line"><span style="color:#E1E4E8">  size: { width: </span><span style="color:#79B8FF">1920</span><span style="color:#E1E4E8">, height: </span><span style="color:#79B8FF">1080</span><span style="color:#E1E4E8"> },</span></span>
-<span class="line"><span style="color:#E1E4E8">  video: { fps: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">, duration: </span><span style="color:#79B8FF">3</span><span style="color:#E1E4E8"> },</span></span>
-<span class="line"><span style="color:#E1E4E8">  props: { title: </span><span style="color:#9ECBFF">&quot;string&quot;</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:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> VideoIntro</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Bounce in from below at start */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white ease-out enter-bounce-in-up/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&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="props-file">Props File</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
-<span class="line"><span style="color:#79B8FF">  &quot;title&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Welcome!&quot;</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h2 id="animation">Animation</h2>
-<p>loopwind provides <strong>Tailwind-style animation classes</strong> for creating smooth video animations without writing custom code.</p>
-<p>Use declarative animation classes with millisecond-based timing:</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> AnimatedIntro</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Bounce in from below: starts at 0ms, lasts 400ms */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Fade in with upward motion: starts at 300ms, lasts 400ms */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/300/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {subtitle}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  );</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h3 id="common-animation-patterns">Common Animation Patterns</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Fade animations</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-fade-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Fade in&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-fade-in-up/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;Fade in with slide&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D">// Slide animations</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-slide-left/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Slide from left&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit-slide-up/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;Slide out up&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D">// Bounce and scale</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-bounce-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncy entrance&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-scale-in/0/400&#39;</span><span style="color:#E1E4E8">)}&gt;Scale up&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D">// Loop animations (continuous)</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-float/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Continuous floating&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-pulse/800&#39;</span><span style="color:#E1E4E8">)}&gt;Pulsing effect&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span></code></pre>
-<h3 id="utility-based-animations">Utility-Based Animations</h3>
-<p>Animate any transform or opacity property directly:</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Translate, rotate, scale</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-5/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Slide 20px from left&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-rotate-90/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Rotate 90 degrees&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-scale-100/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Scale from 0 to 100%&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D">// Combine multiple animations</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-y-10/0/500 enter-rotate-45/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  Fly and spin</span></span>
-<span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"></span></code></pre>
-<p><strong>See the full <a href="/animation">Animation documentation</a></strong> for all animation classes, easing functions, staggered animations, and advanced patterns.</p>
-<h3 id="programmatic-animations">Programmatic Animations</h3>
-<p>For complex custom animations, use the <code>progress</code> prop directly:</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> CustomAnimation</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> opacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
-<span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> scale</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 0.8</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> (progress </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 0.2</span><span style="color:#E1E4E8">);</span></span>
-<span class="line"><span style="color:#E1E4E8">  </span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
-<span class="line"><span style="color:#F97583">      ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white&#39;</span><span style="color:#E1E4E8">),</span></span>
-<span class="line"><span style="color:#E1E4E8">      opacity,</span></span>
-<span class="line"><span style="color:#E1E4E8">      transform: </span><span style="color:#9ECBFF">`scale(${</span><span style="color:#E1E4E8">scale</span><span style="color:#9ECBFF">})`</span></span>
-<span class="line"><span style="color:#E1E4E8">    }}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  );</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<p>Most use cases are better served by animation classes, but <code>progress</code> and <code>frame</code> props give you complete control when needed.</p>
-<h2 id="fps-and-duration">FPS and Duration</h2>
-<h3 id="common-frame-rates">Common Frame Rates</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Film standard</span></span>
-<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
-<span class="line"><span style="color:#6A737D">  // ...</span></span>
-<span class="line"><span style="color:#E1E4E8">  video: { fps: </span><span style="color:#79B8FF">24</span><span style="color:#E1E4E8">, duration: </span><span style="color:#79B8FF">5</span><span style="color:#E1E4E8"> }</span></span>
-<span class="line"><span style="color:#E1E4E8">};</span></span>
-<span class="line"></span></code></pre>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// YouTube/web standard</span></span>
-<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
-<span class="line"><span style="color:#6A737D">  // ...</span></span>
-<span class="line"><span style="color:#E1E4E8">  video: { fps: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">, duration: </span><span style="color:#79B8FF">3</span><span style="color:#E1E4E8"> }</span></span>
-<span class="line"><span style="color:#E1E4E8">};</span></span>
-<span class="line"></span></code></pre>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Smooth animations</span></span>
-<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
-<span class="line"><span style="color:#6A737D">  // ...</span></span>
-<span class="line"><span style="color:#E1E4E8">  video: { fps: </span><span style="color:#79B8FF">60</span><span style="color:#E1E4E8">, duration: </span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8"> }</span></span>
-<span class="line"><span style="color:#E1E4E8">};</span></span>
-<span class="line"></span></code></pre>
-<p><strong>Total frames = fps × duration</strong></p>
-<ul>
-<li>24fps × 5s = 120 frames</li>
-<li>30fps × 3s = 90 frames</li>
-<li>60fps × 2s = 120 frames</li>
-</ul>
-<h3 id="choosing-fps">Choosing FPS</h3>
-<ul>
-<li><strong>24fps</strong>: Cinematic look, smaller files</li>
-<li><strong>30fps</strong>: Standard web video, good balance</li>
-<li><strong>60fps</strong>: Smooth animations, larger files</li>
-</ul>
-<h2 id="encoding-options">Encoding Options</h2>
-<p>loopwind supports two encoding backends:</p>
-<h3 id="wasm-encoder-default">WASM Encoder (Default)</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span></span>
-<span class="line"></span></code></pre>
-<p>Pure JavaScript/WASM H.264 encoder. <strong>Serverless-compatible</strong> - works on Vercel, Cloudflare Workers, AWS Lambda, and anywhere JavaScript runs.</p>
-<h3 id="ffmpeg-encoder-faster">FFmpeg Encoder (Faster)</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --ffmpeg</span></span>
-<span class="line"></span></code></pre>
-<p>Uses FFmpeg for <strong>2x faster encoding</strong> and smaller file sizes. Requires FFmpeg installed on your system.</p>
-<p><strong>Install FFmpeg:</strong></p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># macOS</span></span>
-<span class="line"><span style="color:#B392F0">brew</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> ffmpeg</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Ubuntu/Debian</span></span>
-<span class="line"><span style="color:#B392F0">sudo</span><span style="color:#9ECBFF"> apt</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> ffmpeg</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Windows</span></span>
-<span class="line"><span style="color:#B392F0">winget</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> ffmpeg</span></span>
-<span class="line"></span></code></pre>
-<h3 id="quality-settings">Quality Settings</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Higher quality (lower CRF = better quality, default: 23)</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --crf</span><span style="color:#79B8FF"> 18</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Lower quality, smaller files</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --crf</span><span style="color:#79B8FF"> 28</span></span>
-<span class="line"></span></code></pre>
-<h3 id="when-to-use-each">When to Use Each</h3>
-<table><thead><tr><th>Encoder</th><th>Use Case</th></tr></thead><tbody><tr><td><strong>WASM (default)</strong></td><td>Serverless, CI/CD, no dependencies needed</td></tr><tr><td><strong>FFmpeg (<code>--ffmpeg</code>)</strong></td><td>Local development, faster iteration, smaller files</td></tr></tbody></table>
-<h2 id="performance">Performance</h2>
-<h3 id="rendering-speed">Rendering Speed</h3>
-<p>On an M1 Mac:</p>
-<ul>
-<li><strong>30fps, 3s video</strong> (90 frames): ~15-20 seconds</li>
-<li><strong>60fps, 3s video</strong> (180 frames): ~30-40 seconds</li>
-</ul>
-<p>Speed depends on:</p>
-<ul>
-<li>Template complexity</li>
-<li>Image/video embedding</li>
-<li>CPU performance</li>
-<li>Frame count</li>
-</ul>
-<h3 id="optimization-tips">Optimization Tips</h3>
-<ol>
-<li><strong>Lower FPS for previews</strong>: Test at 15fps, render final at 30fps</li>
-<li><strong>Shorter duration</strong>: Preview with 1s, expand for final</li>
-<li><strong>Simplify templates</strong>: Complex layouts take longer</li>
-<li><strong>Pre-optimize media</strong>: Resize images/videos before embedding</li>
-</ol>
-<h3 id="memory-usage">Memory Usage</h3>
-<p>Video frames are cached in memory during rendering:</p>
-<ul>
-<li><strong>1920x1080 @ 30fps for 3s</strong>: ~500MB RAM</li>
-<li><strong>1920x1080 @ 60fps for 5s</strong>: ~1.7GB RAM</li>
-</ul>
-<p>For long videos, consider rendering in segments.</p>
-<h2 id="common-video-templates">Common Video Templates</h2>
-<h3 id="loading-spinner">Loading Spinner</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> LoadingVideo</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>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex flex-col items-center justify-center w-full h-full bg-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Spinner fades out at 60% (1800ms for 3s video) */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit-fade-out/1800/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-32 h-32 border-8 border-blue-500 border-t-transparent rounded-full loop-spin/1000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      </span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Title fades in after spinner */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-6xl font-bold text-white mt-12 ease-out enter-fade-in-up/1800/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&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="progress-bar">Progress Bar</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> ProgressVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex flex-col items-center justify-center w-full h-full bg-gray-900 p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Title bounces in */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-5xl font-bold text-white mb-12 ease-out enter-bounce-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {title}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      </span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Progress bar container fades in */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full max-w-2xl h-4 bg-gray-700 rounded-full overflow-hidden ease-out enter-fade-in/300/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-full bg-gradient-to-r from-blue-500 to-green-500 w-full&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      </span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Subtitle fades in last */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-2xl text-gray-400 mt-8 ease-out enter-fade-in/600/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {subtitle}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  );</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h3 id="countdown-timer">Countdown Timer</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> CountdownVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">frame</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">message</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> fps</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">;</span></span>
-<span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> secondsRemaining</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">ceil</span><span style="color:#E1E4E8">((</span><span style="color:#79B8FF">90</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> frame) </span><span style="color:#F97583">/</span><span style="color:#E1E4E8"> fps); </span><span style="color:#6A737D">// 3s countdown</span></span>
-<span class="line"><span style="color:#E1E4E8">  </span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex flex-col items-center justify-center w-full h-full bg-black&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Number scales in and pulses continuously */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-[200px] font-black text-white ease-out enter-scale-in/0/400 loop-pulse/1000&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {secondsRemaining}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      </span></span>
-<span class="line"><span style="color:#E1E4E8">      {</span><span style="color:#6A737D">/* Message fades in */</span><span style="color:#E1E4E8">}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-3xl text-gray-400 mt-8 ease-out enter-fade-in/400/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">        {message}</span></span>
-<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  );</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h2 id="output-formats">Output Formats</h2>
-<p>Videos can be rendered in two formats:</p>
-<h3 id="mp4-default">MP4 (Default)</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># MP4 - H.264 codec, smaller file size, best quality</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># With custom quality (lower CRF = better quality)</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --crf</span><span style="color:#79B8FF"> 18</span></span>
-<span class="line"></span></code></pre>
-<p><strong>Benefits:</strong></p>
-<ul>
-<li>Smaller file sizes</li>
-<li>Better color reproduction</li>
-<li>Universal playback support</li>
-<li>Best for social media, websites</li>
-</ul>
-<h3 id="gif">GIF</h3>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># GIF - animated, works everywhere</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> gif</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.gif</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#6A737D"># Or just use .gif extension</span></span>
-<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.gif</span></span>
-<span class="line"></span></code></pre>
-<p><strong>Benefits:</strong></p>
-<ul>
-<li>Works in emails, GitHub READMEs, Slack</li>
-<li>No video player needed</li>
-<li>Auto-loops by default</li>
-<li>Great for short animations</li>
-</ul>
-<p><strong>Limitations:</strong></p>
-<ul>
-<li>Limited to 256 colors per frame</li>
-<li>Larger file sizes than MP4</li>
-<li>Some color banding with gradients</li>
-</ul>
-<p><strong>When to use GIF:</strong></p>
-<ul>
-<li>Short loops (&lt; 5 seconds)</li>
-<li>Simple animations with solid colors</li>
-<li>Platforms that don’t support video (email, GitHub)</li>
-</ul>
-<p><strong>When to use MP4:</strong></p>
-<ul>
-<li>Longer videos</li>
-<li>Complex gradients or photos</li>
-<li>Best quality and smallest size</li>
-</ul>
-<h2 id="video-specific-props">Video-Specific Props</h2>
-<p>Every video template receives these additional props:</p>
-<h3 id="frame"><code>frame</code></h3>
-<p>Current frame number (0 to totalFrames - 1)</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> MyVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">frame</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#6A737D">  // Frame 0, 1, 2, 3, ... 89 (for 3s @ 30fps)</span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;Frame: {frame}&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;;</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h3 id="progress"><code>progress</code></h3>
-<p>Animation progress from 0 to 1</p>
-<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> MyVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8"> }) {</span></span>
-<span class="line"><span style="color:#6A737D">  // 0.0 at start, 0.5 at middle, 1.0 at end</span></span>
-<span class="line"><span style="color:#F97583">  const</span><span style="color:#79B8FF"> x</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 100</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Move from 0 to 100</span></span>
-<span class="line"><span style="color:#E1E4E8">  </span></span>
-<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ transform: </span><span style="color:#9ECBFF">`translateX(${</span><span style="color:#E1E4E8">x</span><span style="color:#9ECBFF">}px)`</span><span style="color:#E1E4E8"> }}&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">      Moving element</span></span>
-<span class="line"><span style="color:#E1E4E8">    &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
-<span class="line"><span style="color:#E1E4E8">  );</span></span>
-<span class="line"><span style="color:#E1E4E8">}</span></span>
-<span class="line"></span></code></pre>
-<h2 id="next-steps">Next Steps</h2>
-<ul>
-<li><a href="/animation">Animation - Complete animation guide</a></li>
-<li><a href="/images">Image Rendering</a></li>
-<li><a href="/helpers">Helpers - QR Codes and Template Composition</a></li>
-<li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
-<li><a href="/fonts">Custom Fonts in Videos</a></li>
-</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>