loopwind 0.10.3 → 0.10.4

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 (22) hide show
  1. package/REGISTRY_SETUP.md +5 -15
  2. package/TEMPLATE_SOURCES.md +15 -31
  3. package/package.json +5 -4
  4. package/test-templates/demo-intro-props.json +4 -0
  5. package/website/README.md +42 -16
  6. package/website/dist/.gitkeep +3 -0
  7. package/website/dist/_astro/agents.I1-fN38o.css +1 -0
  8. package/website/dist/agents/index.html +51 -0
  9. package/website/dist/animation/index.html +605 -0
  10. package/website/dist/fonts/index.html +42 -41
  11. package/website/dist/helpers/index.html +6 -8
  12. package/website/dist/images/index.html +33 -39
  13. package/website/dist/index.html +70 -115
  14. package/website/dist/llm.txt +954 -322
  15. package/website/dist/robots.txt +5 -0
  16. package/website/dist/sdk/index.html +435 -0
  17. package/website/dist/styling/index.html +6 -8
  18. package/website/dist/templates/index.html +19 -21
  19. package/website/dist/video/index.html +193 -79
  20. package/website/package-lock.json +7558 -2595
  21. package/website/public/.gitkeep +3 -0
  22. package/website/dist/_astro/fonts.DHdiHGBO.css +0 -1
package/website/dist/video/index.html CHANGED
@@ -1,27 +1,34 @@
1
- <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
2
- _dsgn
3
- </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline 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="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> LLM Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="video-rendering">Video Rendering</h1>
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/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"><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/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/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/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="video-rendering">Video Rendering</h1>
4
2
  <p>Create animated videos programmatically using React components. Perfect for automated video generation, social media content, and dynamic animations.</p>
5
3
  <h2 id="quick-start">Quick Start</h2>
6
4
  <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>
7
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
5
+ <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>
8
6
  <span class="line"></span>
9
7
  <span class="line"><span style="color:#6A737D"># With custom encoding</span></span>
10
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome!&quot;}&#39;</span><span style="color:#79B8FF"> --preset</span><span style="color:#9ECBFF"> ultrafast</span></span>
8
+ <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"> --preset</span><span style="color:#9ECBFF"> ultrafast</span></span>
11
9
  <span class="line"></span>
12
10
  <span class="line"><span style="color:#6A737D"># Or use a props file</span></span>
13
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> props.json</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> intro.mp4</span></span>
11
+ <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>
14
12
  <span class="line"></span></code></pre>
15
13
  <h2 id="video-template-structure">Video Template Structure</h2>
16
14
  <h3 id="basic-template">Basic Template</h3>
17
15
  <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>
16
+ <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>
17
+ <span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">&quot;video-intro&quot;</span><span style="color:#E1E4E8">,</span></span>
18
+ <span class="line"><span style="color:#E1E4E8"> type: </span><span style="color:#9ECBFF">&quot;video&quot;</span><span style="color:#E1E4E8">,</span></span>
19
+ <span class="line"><span style="color:#E1E4E8"> description: </span><span style="color:#9ECBFF">&quot;Animated intro with fade-in title&quot;</span><span style="color:#E1E4E8">,</span></span>
20
+ <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>
21
+ <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>
22
+ <span class="line"><span style="color:#E1E4E8"> props: { title: </span><span style="color:#9ECBFF">&quot;string&quot;</span><span style="color:#E1E4E8"> }</span></span>
23
+ <span class="line"><span style="color:#E1E4E8">};</span></span>
24
+ <span class="line"></span>
18
25
  <span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> VideoIntro</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">frame</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8"> }) {</span></span>
19
26
  <span class="line"><span style="color:#6A737D"> // Animate opacity based on progress</span></span>
20
27
  <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> titleOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
21
- <span class="line"><span style="color:#E1E4E8"> </span></span>
28
+ <span class="line"></span>
22
29
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
23
30
  <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>
24
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8"> </span></span>
31
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span></span>
25
32
  <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
26
33
  <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>
27
34
  <span class="line"><span style="color:#E1E4E8"> opacity: titleOpacity</span></span>
@@ -29,7 +36,7 @@ _dsgn
29
36
  <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
30
37
  <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
31
38
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
32
- <span class="line"><span style="color:#E1E4E8"> </span></span>
39
+ <span class="line"></span>
33
40
  <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Show frame counter */</span><span style="color:#E1E4E8">}</span></span>
34
41
  <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;absolute bottom-10 right-10 text-white text-sm&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
35
42
  <span class="line"><span style="color:#E1E4E8"> Frame: {frame}</span></span>
@@ -38,24 +45,6 @@ _dsgn
38
45
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
39
46
  <span class="line"><span style="color:#E1E4E8">}</span></span>
40
47
  <span class="line"></span></code></pre>
41
- <h3 id="metadata-metajson">Metadata (meta.json)</h3>
42
- <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>
43
- <span class="line"><span style="color:#79B8FF"> &quot;name&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;video-intro&quot;</span><span style="color:#E1E4E8">,</span></span>
44
- <span class="line"><span style="color:#79B8FF"> &quot;type&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;video&quot;</span><span style="color:#E1E4E8">,</span></span>
45
- <span class="line"><span style="color:#79B8FF"> &quot;description&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Animated intro with fade-in title&quot;</span><span style="color:#E1E4E8">,</span></span>
46
- <span class="line"><span style="color:#79B8FF"> &quot;size&quot;</span><span style="color:#E1E4E8">: {</span></span>
47
- <span class="line"><span style="color:#79B8FF"> &quot;width&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1920</span><span style="color:#E1E4E8">,</span></span>
48
- <span class="line"><span style="color:#79B8FF"> &quot;height&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1080</span></span>
49
- <span class="line"><span style="color:#E1E4E8"> },</span></span>
50
- <span class="line"><span style="color:#79B8FF"> &quot;video&quot;</span><span style="color:#E1E4E8">: {</span></span>
51
- <span class="line"><span style="color:#79B8FF"> &quot;fps&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">,</span></span>
52
- <span class="line"><span style="color:#79B8FF"> &quot;duration&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">3</span></span>
53
- <span class="line"><span style="color:#E1E4E8"> },</span></span>
54
- <span class="line"><span style="color:#79B8FF"> &quot;props&quot;</span><span style="color:#E1E4E8">: {</span></span>
55
- <span class="line"><span style="color:#79B8FF"> &quot;title&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;string&quot;</span></span>
56
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
57
- <span class="line"><span style="color:#E1E4E8">}</span></span>
58
- <span class="line"></span></code></pre>
59
48
  <h3 id="props-file">Props File</h3>
60
49
  <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>
61
50
  <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>
@@ -84,7 +73,39 @@ _dsgn
84
73
  <span class="line"><span style="color:#E1E4E8">}</span></span>
85
74
  <span class="line"></span></code></pre>
86
75
  <h2 id="animation-patterns">Animation Patterns</h2>
87
- <h3 id="fade-inout">Fade In/Out</h3>
76
+ <h3 id="pulse-animation">Pulse Animation</h3>
77
+ <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"> PulseVideo</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>
78
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
79
+ <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-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
80
+ <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 animate-pulse&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
81
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
82
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
83
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
84
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
85
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
86
+ <span class="line"></span></code></pre>
87
+ <h3 id="spin-animation">Spin Animation</h3>
88
+ <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"> SpinVideo</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>
89
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
90
+ <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-purple-600 to-pink-600 gap-8&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
91
+ <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-white border-t-transparent rounded-full animate-spin&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
92
+ <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&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
93
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
94
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
95
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
96
+ <span class="line"></span></code></pre>
97
+ <h3 id="bounce-animation">Bounce Animation</h3>
98
+ <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"> BounceVideo</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>
99
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
100
+ <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-blue-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
101
+ <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 animate-bounce&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
102
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
103
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
104
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
105
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
106
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
107
+ <span class="line"></span></code></pre>
108
+ <h3 id="fade-with-progress">Fade with Progress</h3>
88
109
  <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"> FadeVideo</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>
89
110
  <span class="line"><span style="color:#6A737D"> // Fade in first 20%, stay visible, fade out last 20%</span></span>
90
111
  <span class="line"><span style="color:#F97583"> let</span><span style="color:#E1E4E8"> opacity </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
@@ -131,16 +152,68 @@ _dsgn
131
152
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
132
153
  <span class="line"><span style="color:#E1E4E8">}</span></span>
133
154
  <span class="line"></span></code></pre>
134
- <h3 id="rotation">Rotation</h3>
155
+ <h3 id="progress-based-rotation">Progress-Based Rotation</h3>
135
156
  <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"> RotateVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
136
- <span class="line"><span style="color:#6A737D"> // Rotate 360 degrees</span></span>
157
+ <span class="line"><span style="color:#6A737D"> // Rotate 360 degrees based on progress</span></span>
137
158
  <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> rotation</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 360</span><span style="color:#E1E4E8">;</span></span>
138
159
  <span class="line"><span style="color:#E1E4E8"> </span></span>
139
160
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
140
- <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>
141
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-32 h-32 bg-blue-500 rounded-lg&#39;</span><span style="color:#E1E4E8">),</span></span>
142
- <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`rotate(${</span><span style="color:#E1E4E8">rotation</span><span style="color:#9ECBFF">}deg)`</span></span>
143
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
161
+ <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-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
162
+ <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>
163
+ <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-32 h-32 bg-blue-500 rounded-lg&#39;</span><span style="color:#E1E4E8">),</span></span>
164
+ <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`rotate(${</span><span style="color:#E1E4E8">rotation</span><span style="color:#9ECBFF">}deg)`</span></span>
165
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
166
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
167
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
168
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
169
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
170
+ <span class="line"></span></code></pre>
171
+ <h3 id="using-tailwind-animations">Using Tailwind Animations</h3>
172
+ <p>Combine Tailwind’s built-in animations with progress-based animations:</p>
173
+ <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"> PulsingLogo</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">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">logo</span><span style="color:#E1E4E8"> }) {</span></span>
174
+ <span class="line"><span style="color:#6A737D"> // Fade in based on progress</span></span>
175
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> opacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">min</span><span style="color:#E1E4E8">(progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">);</span></span>
176
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
177
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
178
+ <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-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
179
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Tailwind&#39;s animate-pulse + custom opacity */</span><span style="color:#E1E4E8">}</span></span>
180
+ <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:#F97583">...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;animate-pulse&#39;</span><span style="color:#E1E4E8">), opacity }}&gt;</span></span>
181
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(logo)} </span><span style="color:#B392F0">style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-64 h-64&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
182
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
183
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
184
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
185
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
186
+ <span class="line"></span></code></pre>
187
+ <p><strong>Available Tailwind animations:</strong></p>
188
+ <ul>
189
+ <li><code>animate-spin</code> - Continuous rotation</li>
190
+ <li><code>animate-pulse</code> - Subtle fade in/out</li>
191
+ <li><code>animate-bounce</code> - Bouncing motion</li>
192
+ <li><code>animate-ping</code> - Ripple effect (great for badges)</li>
193
+ </ul>
194
+ <p><strong>Example with multiple animations:</strong></p>
195
+ <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"> NotificationVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
196
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> slideX</span><span style="color:#F97583"> =</span><span style="color:#F97583"> -</span><span style="color:#79B8FF">100</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">// Slide in from left</span></span>
197
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
198
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
199
+ <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-purple-600 to-blue-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
200
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8"> </span></span>
201
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
202
+ <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center gap-4 bg-white rounded-2xl p-6 shadow-2xl&#39;</span><span style="color:#E1E4E8">),</span></span>
203
+ <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`translateX(${</span><span style="color:#E1E4E8">slideX</span><span style="color:#9ECBFF">}%)`</span></span>
204
+ <span class="line"><span style="color:#E1E4E8"> }}</span></span>
205
+ <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
206
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Pinging indicator */</span><span style="color:#E1E4E8">}</span></span>
207
+ <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;relative&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
208
+ <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-3 h-3 bg-green-500 rounded-full animate-ping absolute&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
209
+ <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-3 h-3 bg-green-500 rounded-full&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
210
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
211
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
212
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
213
+ <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-2xl font-bold text-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
214
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;New notification&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
215
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
216
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
144
217
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
145
218
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
146
219
  <span class="line"><span style="color:#E1E4E8">}</span></span>
@@ -193,7 +266,7 @@ _dsgn
193
266
  <h3 id="how-video-sync-works">How Video Sync Works</h3>
194
267
  <ol>
195
268
  <li><strong>First pass</strong>: Template calls <code>video()</code> to register needed videos</li>
196
- <li><strong>Pre-processing</strong>: dsgn extracts all frames at template’s FPS</li>
269
+ <li><strong>Pre-processing</strong>: loopwind extracts all frames at template’s FPS</li>
197
270
  <li><strong>Rendering</strong>: Each frame uses the corresponding video frame</li>
198
271
  <li><strong>Caching</strong>: Frames are cached in memory for fast access</li>
199
272
  </ol>
@@ -480,26 +553,23 @@ _dsgn
480
553
  </ol>
481
554
  <h2 id="fps-and-duration">FPS and Duration</h2>
482
555
  <h3 id="common-frame-rates">Common Frame Rates</h3>
483
- <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>
484
- <span class="line"><span style="color:#79B8FF"> &quot;video&quot;</span><span style="color:#E1E4E8">: {</span></span>
485
- <span class="line"><span style="color:#79B8FF"> &quot;fps&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">24</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Film standard</span></span>
486
- <span class="line"><span style="color:#79B8FF"> &quot;duration&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">5</span></span>
487
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
488
- <span class="line"><span style="color:#E1E4E8">}</span></span>
556
+ <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>
557
+ <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>
558
+ <span class="line"><span style="color:#6A737D"> // ...</span></span>
559
+ <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>
560
+ <span class="line"><span style="color:#E1E4E8">};</span></span>
489
561
  <span class="line"></span></code></pre>
490
- <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>
491
- <span class="line"><span style="color:#79B8FF"> &quot;video&quot;</span><span style="color:#E1E4E8">: {</span></span>
492
- <span class="line"><span style="color:#79B8FF"> &quot;fps&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// YouTube/web standard</span></span>
493
- <span class="line"><span style="color:#79B8FF"> &quot;duration&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">3</span></span>
494
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
495
- <span class="line"><span style="color:#E1E4E8">}</span></span>
562
+ <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>
563
+ <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>
564
+ <span class="line"><span style="color:#6A737D"> // ...</span></span>
565
+ <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>
566
+ <span class="line"><span style="color:#E1E4E8">};</span></span>
496
567
  <span class="line"></span></code></pre>
497
- <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>
498
- <span class="line"><span style="color:#79B8FF"> &quot;video&quot;</span><span style="color:#E1E4E8">: {</span></span>
499
- <span class="line"><span style="color:#79B8FF"> &quot;fps&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">60</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Smooth animations</span></span>
500
- <span class="line"><span style="color:#79B8FF"> &quot;duration&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">2</span></span>
501
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
502
- <span class="line"><span style="color:#E1E4E8">}</span></span>
568
+ <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>
569
+ <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>
570
+ <span class="line"><span style="color:#6A737D"> // ...</span></span>
571
+ <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>
572
+ <span class="line"><span style="color:#E1E4E8">};</span></span>
503
573
  <span class="line"></span></code></pre>
504
574
  <p><strong>Total frames = fps × duration</strong></p>
505
575
  <ul>
@@ -515,15 +585,15 @@ _dsgn
515
585
  </ul>
516
586
  <h2 id="encoding-options">Encoding Options</h2>
517
587
  <h3 id="default-balanced">Default (Balanced)</h3>
518
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span></span>
588
+ <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>
519
589
  <span class="line"></span></code></pre>
520
590
  <p>Uses H.264 codec with good quality/size balance.</p>
521
591
  <h3 id="fast-encoding">Fast Encoding</h3>
522
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --preset</span><span style="color:#9ECBFF"> ultrafast</span></span>
592
+ <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"> --preset</span><span style="color:#9ECBFF"> ultrafast</span></span>
523
593
  <span class="line"></span></code></pre>
524
594
  <p>Faster encoding, slightly larger files. Good for previews.</p>
525
595
  <h3 id="high-quality">High Quality</h3>
526
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> video-intro</span><span style="color:#9ECBFF"> &#39;{&quot;title&quot;:&quot;Welcome&quot;}&#39;</span><span style="color:#79B8FF"> --preset</span><span style="color:#9ECBFF"> slow</span></span>
596
+ <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"> --preset</span><span style="color:#9ECBFF"> slow</span></span>
527
597
  <span class="line"></span></code></pre>
528
598
  <p>Better compression, slower encoding. Good for final output.</p>
529
599
  <h2 id="performance">Performance</h2>
@@ -555,39 +625,36 @@ _dsgn
555
625
  </ul>
556
626
  <p>For long videos, consider rendering in segments.</p>
557
627
  <h2 id="common-video-templates">Common Video Templates</h2>
558
- <h3 id="social-media-intro">Social Media Intro</h3>
559
- <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"> SocialIntro</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">brand</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tagline</span><span style="color:#E1E4E8"> }) {</span></span>
560
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> logoScale</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.4</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.4</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
561
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> taglineOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&gt;</span><span style="color:#79B8FF"> 0.5</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> (progress </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 0.5</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.5</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 0</span><span style="color:#E1E4E8">;</span></span>
628
+ <h3 id="loading-spinner">Loading Spinner</h3>
629
+ <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">progress</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
630
+ <span class="line"><span style="color:#6A737D"> // Show spinner for first 60%, then fade to title</span></span>
631
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> spinnerOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&lt;</span><span style="color:#79B8FF"> 0.6</span><span style="color:#F97583"> ?</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583"> :</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> (progress </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 0.6</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.4</span><span style="color:#E1E4E8">);</span></span>
632
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> titleOpacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">&gt;</span><span style="color:#79B8FF"> 0.6</span><span style="color:#F97583"> ?</span><span style="color:#E1E4E8"> (progress </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 0.6</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.4</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 0</span><span style="color:#E1E4E8">;</span></span>
562
633
  <span class="line"><span style="color:#E1E4E8"> </span></span>
563
634
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
564
- <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-pink-500 to-purple-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
635
+ <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>
636
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Tailwind&#39;s animate-spin */</span><span style="color:#E1E4E8">}</span></span>
637
+ <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">{{ opacity: spinnerOpacity }}&gt;</span></span>
638
+ <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 animate-spin&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
639
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
640
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
565
641
  <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8"> </span></span>
566
642
  <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
567
- <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-9xl font-black text-white mb-8&#39;</span><span style="color:#E1E4E8">),</span></span>
568
- <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`scale(${</span><span style="color:#E1E4E8">logoScale</span><span style="color:#9ECBFF">})`</span></span>
643
+ <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-6xl font-bold text-white mt-12&#39;</span><span style="color:#E1E4E8">),</span></span>
644
+ <span class="line"><span style="color:#E1E4E8"> opacity: titleOpacity</span></span>
569
645
  <span class="line"><span style="color:#E1E4E8"> }}</span></span>
570
646
  <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
571
- <span class="line"><span style="color:#E1E4E8"> {brand}</span></span>
647
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
572
648
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
573
- <span class="line"><span style="color:#E1E4E8"> </span></span>
574
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8"> </span></span>
575
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
576
- <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-3xl text-white&#39;</span><span style="color:#E1E4E8">),</span></span>
577
- <span class="line"><span style="color:#E1E4E8"> opacity: taglineOpacity</span></span>
578
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
579
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
580
- <span class="line"><span style="color:#E1E4E8"> {tagline}</span></span>
581
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
582
649
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
583
650
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
584
651
  <span class="line"><span style="color:#E1E4E8">}</span></span>
585
652
  <span class="line"></span></code></pre>
586
- <h3 id="progress-bar-animation">Progress Bar Animation</h3>
653
+ <h3 id="progress-bar-with-pulse">Progress Bar with Pulse</h3>
587
654
  <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">progress</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>
588
655
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
589
656
  <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>
590
- <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
657
+ <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 animate-pulse&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
591
658
  <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
592
659
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
593
660
  <span class="line"><span style="color:#E1E4E8"> </span></span>
@@ -608,14 +675,15 @@ _dsgn
608
675
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
609
676
  <span class="line"><span style="color:#E1E4E8">}</span></span>
610
677
  <span class="line"></span></code></pre>
611
- <h3 id="countdown-timer">Countdown Timer</h3>
678
+ <h3 id="countdown-timer-with-pulse">Countdown Timer with Pulse</h3>
612
679
  <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>
613
680
  <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>
614
681
  <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>
615
682
  <span class="line"><span style="color:#E1E4E8"> </span></span>
616
683
  <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
617
684
  <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>
618
- <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
685
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Add pulse animation when counting down */</span><span style="color:#E1E4E8">}</span></span>
686
+ <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 animate-pulse&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
619
687
  <span class="line"><span style="color:#E1E4E8"> {secondsRemaining}</span></span>
620
688
  <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
621
689
  <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
@@ -625,8 +693,54 @@ _dsgn
625
693
  <span class="line"><span style="color:#E1E4E8"> );</span></span>
626
694
  <span class="line"><span style="color:#E1E4E8">}</span></span>
627
695
  <span class="line"></span></code></pre>
628
- <h2 id="output-format">Output Format</h2>
629
- <p>Videos are always rendered as MP4 (H.264 codec) for maximum compatibility.</p>
696
+ <h2 id="output-formats">Output Formats</h2>
697
+ <p>Videos can be rendered in two formats:</p>
698
+ <h3 id="mp4-default">MP4 (Default)</h3>
699
+ <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>
700
+ <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>
701
+ <span class="line"></span>
702
+ <span class="line"><span style="color:#6A737D"># With custom quality (lower CRF = better quality)</span></span>
703
+ <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>
704
+ <span class="line"></span></code></pre>
705
+ <p><strong>Benefits:</strong></p>
706
+ <ul>
707
+ <li>Smaller file sizes</li>
708
+ <li>Better color reproduction</li>
709
+ <li>Universal playback support</li>
710
+ <li>Best for social media, websites</li>
711
+ </ul>
712
+ <h3 id="gif">GIF</h3>
713
+ <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>
714
+ <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>
715
+ <span class="line"></span>
716
+ <span class="line"><span style="color:#6A737D"># Or just use .gif extension</span></span>
717
+ <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>
718
+ <span class="line"></span></code></pre>
719
+ <p><strong>Benefits:</strong></p>
720
+ <ul>
721
+ <li>Works in emails, GitHub READMEs, Slack</li>
722
+ <li>No video player needed</li>
723
+ <li>Auto-loops by default</li>
724
+ <li>Great for short animations</li>
725
+ </ul>
726
+ <p><strong>Limitations:</strong></p>
727
+ <ul>
728
+ <li>Limited to 256 colors per frame</li>
729
+ <li>Larger file sizes than MP4</li>
730
+ <li>Some color banding with gradients</li>
731
+ </ul>
732
+ <p><strong>When to use GIF:</strong></p>
733
+ <ul>
734
+ <li>Short loops (&lt; 5 seconds)</li>
735
+ <li>Simple animations with solid colors</li>
736
+ <li>Platforms that don’t support video (email, GitHub)</li>
737
+ </ul>
738
+ <p><strong>When to use MP4:</strong></p>
739
+ <ul>
740
+ <li>Longer videos</li>
741
+ <li>Complex gradients or photos</li>
742
+ <li>Best quality and smallest size</li>
743
+ </ul>
630
744
  <h2 id="next-steps">Next Steps</h2>
631
745
  <ul>
632
746
  <li><a href="/images">Learn about Image Rendering</a></li>