loopwind 0.10.3 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +4 -4
  2. package/REGISTRY_SETUP.md +5 -15
  3. package/TEMPLATE_SOURCES.md +15 -31
  4. package/dist/commands/init.js +5 -5
  5. package/dist/commands/init.js.map +1 -1
  6. package/dist/lib/config.d.ts.map +1 -1
  7. package/dist/lib/config.js +14 -4
  8. package/dist/lib/config.js.map +1 -1
  9. package/dist/lib/renderer.d.ts.map +1 -1
  10. package/dist/lib/renderer.js +7 -3
  11. package/dist/lib/renderer.js.map +1 -1
  12. package/package.json +5 -4
  13. package/test-templates/demo-intro-props.json +4 -0
  14. package/website/README.md +42 -16
  15. package/website/dist/.gitkeep +3 -0
  16. package/website/dist/_astro/agents.I1-fN38o.css +1 -0
  17. package/website/dist/agents/index.html +51 -0
  18. package/website/dist/animation/index.html +605 -0
  19. package/website/dist/fonts/index.html +42 -41
  20. package/website/dist/helpers/index.html +6 -8
  21. package/website/dist/images/index.html +33 -39
  22. package/website/dist/index.html +70 -115
  23. package/website/dist/llm.txt +954 -322
  24. package/website/dist/robots.txt +5 -0
  25. package/website/dist/sdk/index.html +435 -0
  26. package/website/dist/styling/index.html +6 -8
  27. package/website/dist/templates/index.html +19 -21
  28. package/website/dist/video/index.html +193 -79
  29. package/website/package-lock.json +7558 -2595
  30. package/website/public/.gitkeep +3 -0
  31. package/website/dist/_astro/fonts.DHdiHGBO.css +0 -1
package/website/dist/animation/index.html ADDED
@@ -0,0 +1,605 @@
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/animation/"><!-- 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/animation/"><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/animation/"><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="animation">Animation</h1>
2
+ <p>loopwind provides <strong>Tailwind-style animation classes</strong> that work with <code>progress</code> and <code>frame</code> to create smooth video animations without writing custom code.</p>
3
+ <blockquote>
4
+ <p><strong>Note:</strong> Animation classes only work with <strong>video templates</strong> and <strong>GIFs</strong>. For static images, animations will have no effect since there’s no <code>progress</code> or <code>frame</code> context.</p>
5
+ </blockquote>
6
+ <h2 id="quick-start">Quick Start</h2>
7
+ <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">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>
8
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
9
+ <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>
10
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Bounce in from below during first 40% */</span><span style="color:#E1E4E8">}</span></span>
11
+ <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 animate-bounce-in-up/0/0.4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
12
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
13
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
14
+ <span class="line"></span>
15
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Fade in with upward motion from 30% to 70% */</span><span style="color:#E1E4E8">}</span></span>
16
+ <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 animate-fade-in-up/0.3/0.7&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
17
+ <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
18
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
19
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
20
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
21
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
22
+ <span class="line"></span></code></pre>
23
+ <h2 id="transition-animations">Transition Animations</h2>
24
+ <p>Format: <code>animate-{type}/{start}/{end}</code></p>
25
+ <ul>
26
+ <li><code>{type}</code> - The animation type (fade-in, bounce-in-up, etc.)</li>
27
+ <li><code>{start}</code> - Progress value to start (0-1)</li>
28
+ <li><code>{end}</code> - Progress value to end (0-1)</li>
29
+ </ul>
30
+ <h3 id="fade-animations">Fade Animations</h3>
31
+ <p>Simple opacity transitions with optional direction.</p>
32
+ <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 in from 0% to 50% of the video</span></span>
33
+ <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;animate-fade-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Hello&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
34
+ <span class="line"></span>
35
+ <span class="line"><span style="color:#6A737D">// Fade out from 50% to 100%</span></span>
36
+ <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;animate-fade-out/0.5/1&#39;</span><span style="color:#E1E4E8">)}&gt;Goodbye&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
37
+ <span class="line"></span></code></pre>
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+
56
+
57
+
58
+
59
+
60
+
61
+
62
+
63
+
64
+
65
+
66
+
67
+
68
+
69
+
70
+
71
+
72
+
73
+
74
+
75
+
76
+
77
+
78
+
79
+
80
+
81
+
82
+
83
+
84
+
85
+
86
+
87
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-fade-in/0/1</code></td><td>Fade in (opacity 0 → 1)</td></tr><tr><td><code>animate-fade-out/0/1</code></td><td>Fade out (opacity 1 → 0)</td></tr><tr><td><code>animate-fade-in-up/0/1</code></td><td>Fade in + slide up (30px)</td></tr><tr><td><code>animate-fade-in-down/0/1</code></td><td>Fade in + slide down (30px)</td></tr><tr><td><code>animate-fade-in-left/0/1</code></td><td>Fade in + slide from left (30px)</td></tr><tr><td><code>animate-fade-in-right/0/1</code></td><td>Fade in + slide from right (30px)</td></tr><tr><td><code>animate-fade-out-up/0/1</code></td><td>Fade out + slide up</td></tr><tr><td><code>animate-fade-out-down/0/1</code></td><td>Fade out + slide down</td></tr><tr><td><code>animate-fade-out-left/0/1</code></td><td>Fade out + slide left</td></tr><tr><td><code>animate-fade-out-right/0/1</code></td><td>Fade out + slide right</td></tr></tbody></table>
88
+ <h3 id="slide-animations">Slide Animations</h3>
89
+ <p>Larger movement (100px) with fade.</p>
90
+ <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">// Slide in from left</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;animate-slide-left/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
92
+ <span class="line"></span>
93
+ <span class="line"><span style="color:#6A737D">// Slide up from bottom</span></span>
94
+ <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;animate-slide-up/0.2/0.8&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
95
+ <span class="line"></span></code></pre>
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-slide-left/0/1</code></td><td>Slide in from left (100px)</td></tr><tr><td><code>animate-slide-right/0/1</code></td><td>Slide in from right (100px)</td></tr><tr><td><code>animate-slide-up/0/1</code></td><td>Slide in from bottom (100px)</td></tr><tr><td><code>animate-slide-down/0/1</code></td><td>Slide in from top (100px)</td></tr></tbody></table>
122
+ <h3 id="bounce-animations">Bounce Animations</h3>
123
+ <p>Playful entrance with overshoot effect.</p>
124
+ <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">// Bounce in with scale overshoot</span></span>
125
+ <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;animate-bounce-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncy!&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
126
+ <span class="line"></span>
127
+ <span class="line"><span style="color:#6A737D">// Bounce in from below</span></span>
128
+ <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;animate-bounce-in-up/0/0.6&#39;</span><span style="color:#E1E4E8">)}&gt;Pop!&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
129
+ <span class="line"></span></code></pre>
130
+
131
+
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+
140
+
141
+
142
+
143
+
144
+
145
+
146
+
147
+
148
+
149
+
150
+
151
+
152
+
153
+
154
+
155
+
156
+
157
+
158
+
159
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-bounce-in/0/1</code></td><td>Bounce in with scale overshoot</td></tr><tr><td><code>animate-bounce-in-up/0/1</code></td><td>Bounce in from below</td></tr><tr><td><code>animate-bounce-in-down/0/1</code></td><td>Bounce in from above</td></tr><tr><td><code>animate-bounce-in-left/0/1</code></td><td>Bounce in from left</td></tr><tr><td><code>animate-bounce-in-right/0/1</code></td><td>Bounce in from right</td></tr></tbody></table>
160
+ <h3 id="scale--zoom-animations">Scale &amp; Zoom Animations</h3>
161
+ <p>Size-based transitions.</p>
162
+ <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">// Scale in from 50%</span></span>
163
+ <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;animate-scale-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Growing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
164
+ <span class="line"></span>
165
+ <span class="line"><span style="color:#6A737D">// Zoom in from 0%</span></span>
166
+ <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;animate-zoom-in/0/1&#39;</span><span style="color:#E1E4E8">)}&gt;Zooming&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
167
+ <span class="line"></span></code></pre>
168
+
169
+
170
+
171
+
172
+
173
+
174
+
175
+
176
+
177
+
178
+
179
+
180
+
181
+
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+
190
+
191
+
192
+
193
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-scale-in/0/1</code></td><td>Scale up from 50% to 100%</td></tr><tr><td><code>animate-scale-out/0/1</code></td><td>Scale up to 150% + fade out</td></tr><tr><td><code>animate-zoom-in/0/1</code></td><td>Zoom in from 0% to 100%</td></tr><tr><td><code>animate-zoom-out/0/1</code></td><td>Zoom out from 100% to 200% + fade</td></tr></tbody></table>
194
+ <h3 id="rotate--flip-animations">Rotate &amp; Flip Animations</h3>
195
+ <p>Rotation-based transitions.</p>
196
+ <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">// Rotate in 180 degrees</span></span>
197
+ <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;animate-rotate-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
198
+ <span class="line"></span>
199
+ <span class="line"><span style="color:#6A737D">// 3D flip on X axis</span></span>
200
+ <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;animate-flip-in-x/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Flipping&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
201
+ <span class="line"></span></code></pre>
202
+
203
+
204
+
205
+
206
+
207
+
208
+
209
+
210
+
211
+
212
+
213
+
214
+
215
+
216
+
217
+
218
+
219
+
220
+
221
+
222
+
223
+
224
+
225
+
226
+
227
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-rotate-in/0/1</code></td><td>Rotate in from -180°</td></tr><tr><td><code>animate-rotate-out/0/1</code></td><td>Rotate out to 180°</td></tr><tr><td><code>animate-flip-in-x/0/1</code></td><td>3D flip on horizontal axis</td></tr><tr><td><code>animate-flip-in-y/0/1</code></td><td>3D flip on vertical axis</td></tr></tbody></table>
228
+ <h2 id="loop-animations">Loop Animations</h2>
229
+ <p>Format: <code>animate-{type}/{frameLength}</code></p>
230
+ <p>Loop animations repeat every <code>{frameLength}</code> frames. At 30fps:</p>
231
+ <ul>
232
+ <li><code>/30</code> = 1 second loop</li>
233
+ <li><code>/15</code> = 0.5 second loop</li>
234
+ <li><code>/60</code> = 2 second loop</li>
235
+ </ul>
236
+ <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">// Pulse opacity every 15 frames (0.5s at 30fps)</span></span>
237
+ <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;animate-pulse/15&#39;</span><span style="color:#E1E4E8">)}&gt;Pulsing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
238
+ <span class="line"></span>
239
+ <span class="line"><span style="color:#6A737D">// Bounce every 20 frames</span></span>
240
+ <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;animate-bounce/20&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
241
+ <span class="line"></span>
242
+ <span class="line"><span style="color:#6A737D">// Full rotation every 60 frames (2s)</span></span>
243
+ <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;animate-spin/60&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
244
+ <span class="line"></span></code></pre>
245
+
246
+
247
+
248
+
249
+
250
+
251
+
252
+
253
+
254
+
255
+
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+
268
+
269
+
270
+
271
+
272
+
273
+
274
+
275
+
276
+
277
+
278
+ <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>animate-pulse/{n}</code></td><td>Opacity pulse (0.5 → 1 → 0.5)</td></tr><tr><td><code>animate-bounce/{n}</code></td><td>Bounce up and down</td></tr><tr><td><code>animate-spin/{n}</code></td><td>Full 360° rotation</td></tr><tr><td><code>animate-ping/{n}</code></td><td>Scale up + fade out (radar effect)</td></tr><tr><td><code>animate-wiggle/{n}</code></td><td>Side to side wiggle</td></tr><tr><td><code>animate-float/{n}</code></td><td>Gentle up and down floating</td></tr></tbody></table>
279
+ <h2 id="easing-functions">Easing Functions</h2>
280
+ <p>Add an easing class <strong>before</strong> the animation class to control the timing curve.</p>
281
+ <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">// Ease in (accelerate)</span></span>
282
+ <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;ease-in animate-fade-in/0/1&#39;</span><span style="color:#E1E4E8">)}&gt;Accelerating&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
283
+ <span class="line"></span>
284
+ <span class="line"><span style="color:#6A737D">// Ease out (decelerate) - default</span></span>
285
+ <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;ease-out animate-fade-in/0/1&#39;</span><span style="color:#E1E4E8">)}&gt;Decelerating&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
286
+ <span class="line"></span>
287
+ <span class="line"><span style="color:#6A737D">// Ease in-out (smooth)</span></span>
288
+ <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;ease-in-out animate-fade-in/0/1&#39;</span><span style="color:#E1E4E8">)}&gt;Smooth&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
289
+ <span class="line"></span>
290
+ <span class="line"><span style="color:#6A737D">// Strong cubic easing</span></span>
291
+ <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;ease-out-cubic animate-bounce-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;Dramatic&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
292
+ <span class="line"></span></code></pre>
293
+
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
302
+
303
+
304
+
305
+
306
+
307
+
308
+
309
+
310
+
311
+
312
+
313
+
314
+
315
+
316
+
317
+
318
+
319
+
320
+
321
+
322
+
323
+
324
+
325
+
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+
342
+
343
+
344
+
345
+
346
+
347
+
348
+
349
+
350
+
351
+
352
+
353
+ <table><thead><tr><th>Class</th><th>Description</th><th>Best For</th></tr></thead><tbody><tr><td><code>linear</code></td><td>Constant speed</td><td>Mechanical motion</td></tr><tr><td><code>ease-in</code></td><td>Slow start, fast end</td><td>Exit animations</td></tr><tr><td><code>ease-out</code></td><td>Fast start, slow end (default)</td><td>Enter animations</td></tr><tr><td><code>ease-in-out</code></td><td>Slow start and end</td><td>Subtle transitions</td></tr><tr><td><code>ease-in-cubic</code></td><td>Strong slow start</td><td>Dramatic exits</td></tr><tr><td><code>ease-out-cubic</code></td><td>Strong fast start</td><td>Impactful entrances</td></tr><tr><td><code>ease-in-out-cubic</code></td><td>Strong both ends</td><td>Emphasis animations</td></tr><tr><td><code>ease-in-quart</code></td><td>Very strong slow start</td><td>Powerful exits</td></tr><tr><td><code>ease-out-quart</code></td><td>Very strong fast start</td><td>Punchy entrances</td></tr><tr><td><code>ease-in-out-quart</code></td><td>Very strong both ends</td><td>Maximum drama</td></tr></tbody></table>
354
+ <h2 id="staggered-animations">Staggered Animations</h2>
355
+ <p>Create sequenced animations by offsetting the start/end times:</p>
356
+ <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"> StaggeredList</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">items</span><span style="color:#E1E4E8"> }) {</span></span>
357
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
358
+ <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 gap-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
359
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* First item: 0% to 30% */</span><span style="color:#E1E4E8">}</span></span>
360
+ <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;ease-out animate-fade-in-left/0/0.3&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
361
+ <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">]}</span></span>
362
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
363
+ <span class="line"></span>
364
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Second item: 10% to 40% */</span><span style="color:#E1E4E8">}</span></span>
365
+ <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;ease-out animate-fade-in-left/0.1/0.4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
366
+ <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">]}</span></span>
367
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
368
+ <span class="line"></span>
369
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Third item: 20% to 50% */</span><span style="color:#E1E4E8">}</span></span>
370
+ <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;ease-out animate-fade-in-left/0.2/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
371
+ <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">]}</span></span>
372
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
373
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
374
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
375
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
376
+ <span class="line"></span></code></pre>
377
+ <h3 id="dynamic-staggering">Dynamic Staggering</h3>
378
+ <p>For dynamic lists, calculate the timing programmatically:</p>
379
+ <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"> DynamicStagger</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">items</span><span style="color:#E1E4E8"> }) {</span></span>
380
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
381
+ <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 gap-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
382
+ <span class="line"><span style="color:#E1E4E8"> {items.</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">item</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">i</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
383
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> start</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> i </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 0.1</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Each item starts 10% later</span></span>
384
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> end</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> start </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 0.3</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Each animation lasts 30%</span></span>
385
+ <span class="line"></span>
386
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
387
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
388
+ <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
389
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">`ease-out animate-fade-in-up/${</span><span style="color:#E1E4E8">start</span><span style="color:#9ECBFF">}/${</span><span style="color:#E1E4E8">end</span><span style="color:#9ECBFF">}`</span><span style="color:#E1E4E8">)}</span></span>
390
+ <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
391
+ <span class="line"><span style="color:#E1E4E8"> {item}</span></span>
392
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
393
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
394
+ <span class="line"><span style="color:#E1E4E8"> })}</span></span>
395
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
396
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
397
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
398
+ <span class="line"></span></code></pre>
399
+ <h2 id="combining-animations">Combining Animations</h2>
400
+ <p>You can combine multiple animation classes. They will be applied together:</p>
401
+ <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">// Note: Multiple transforms will be combined</span></span>
402
+ <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;animate-fade-in/0/0.5 animate-scale-in/0/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
403
+ <span class="line"><span style="color:#E1E4E8"> Fade + Scale</span></span>
404
+ <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
405
+ <span class="line"></span></code></pre>
406
+ <p>For more complex combinations, use manual animation with <code>progress</code>:</p>
407
+ <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"> ComplexAnimation</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>
408
+ <span class="line"><span style="color:#6A737D"> // Custom compound animation</span></span>
409
+ <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">(</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">, progress </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 3</span><span style="color:#E1E4E8">);</span></span>
410
+ <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>
411
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> rotation</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:#F97583"> -</span><span style="color:#79B8FF">10</span><span style="color:#E1E4E8">;</span></span>
412
+ <span class="line"></span>
413
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
414
+ <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
415
+ <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>
416
+ <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&#39;</span><span style="color:#E1E4E8">),</span></span>
417
+ <span class="line"><span style="color:#E1E4E8"> opacity,</span></span>
418
+ <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">}) rotate(${</span><span style="color:#E1E4E8">rotation</span><span style="color:#9ECBFF">}deg)`</span></span>
419
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
420
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
421
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
422
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
423
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
424
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
425
+ <span class="line"></span></code></pre>
426
+ <h2 id="common-patterns">Common Patterns</h2>
427
+ <h3 id="intro-sequence">Intro Sequence</h3>
428
+ <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"> IntroVideo</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">logo</span><span style="color:#E1E4E8"> }) {</span></span>
429
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
430
+ <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>
431
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Logo appears first */</span><span style="color:#E1E4E8">}</span></span>
432
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
433
+ <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{logo}</span></span>
434
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-20 mb-8 ease-out animate-scale-in/0/0.3&#39;</span><span style="color:#E1E4E8">)}</span></span>
435
+ <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
436
+ <span class="line"></span>
437
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Title bounces in */</span><span style="color:#E1E4E8">}</span></span>
438
+ <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-7xl font-bold text-white ease-out animate-bounce-in-up/0.2/0.5&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
439
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
440
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
441
+ <span class="line"></span>
442
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Subtitle fades in last */</span><span style="color:#E1E4E8">}</span></span>
443
+ <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 animate-fade-in-up/0.4/0.7&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
444
+ <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
445
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
446
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
447
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
448
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
449
+ <span class="line"></span></code></pre>
450
+ <h3 id="text-reveal">Text Reveal</h3>
451
+ <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"> TextReveal</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">words</span><span style="color:#E1E4E8"> }) {</span></span>
452
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
453
+ <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-wrap gap-2 justify-center&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
454
+ <span class="line"><span style="color:#E1E4E8"> {words.</span><span style="color:#B392F0">split</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39; &#39;</span><span style="color:#E1E4E8">).</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">word</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">i</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> (</span></span>
455
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</span></span>
456
+ <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
457
+ <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">`text-4xl font-bold ease-out animate-fade-in-up/${</span><span style="color:#E1E4E8">i</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 0.1</span><span style="color:#9ECBFF">}/${</span><span style="color:#E1E4E8">i</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 0.1</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> 0.2</span><span style="color:#9ECBFF">}`</span><span style="color:#E1E4E8">)}</span></span>
458
+ <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
459
+ <span class="line"><span style="color:#E1E4E8"> {word}</span></span>
460
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
461
+ <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
462
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
463
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
464
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
465
+ <span class="line"></span></code></pre>
466
+ <h3 id="looping-background-element">Looping Background Element</h3>
467
+ <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"> AnimatedBackground</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">children</span><span style="color:#E1E4E8"> }) {</span></span>
468
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
469
+ <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 w-full h-full&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
470
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Floating background circles */</span><span style="color:#E1E4E8">}</span></span>
471
+ <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 top-10 left-10 w-20 h-20 rounded-full bg-white/10 animate-float/60&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
472
+ <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-20 right-20 w-32 h-32 rounded-full bg-white/10 animate-pulse/45&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
473
+ <span class="line"></span>
474
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Main content */</span><span style="color:#E1E4E8">}</span></span>
475
+ <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 z-10&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
476
+ <span class="line"><span style="color:#E1E4E8"> {children}</span></span>
477
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
478
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
479
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
480
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
481
+ <span class="line"></span></code></pre>
482
+ <h3 id="exit-animation">Exit Animation</h3>
483
+ <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"> ExitAnimation</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>
484
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
485
+ <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-black&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
486
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Visible from 0-70%, then exits */</span><span style="color:#E1E4E8">}</span></span>
487
+ <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-in animate-fade-out-up/0.7/1&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
488
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
489
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
490
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
491
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
492
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
493
+ <span class="line"></span></code></pre>
494
+ <h2 id="manual-animation-with-progress-and-frame">Manual Animation with <code>progress</code> and <code>frame</code></h2>
495
+ <p>For complete control beyond animation classes, use <code>progress</code> and <code>frame</code> directly.</p>
496
+ <h3 id="available-props">Available Props</h3>
497
+
498
+
499
+
500
+
501
+
502
+
503
+
504
+
505
+
506
+
507
+
508
+
509
+
510
+
511
+
512
+
513
+
514
+
515
+
516
+
517
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><code>progress</code></td><td><code>number</code></td><td>0 to 1 through the video (0% to 100%)</td></tr><tr><td><code>frame</code></td><td><code>number</code></td><td>Current frame number (0, 1, 2, … totalFrames-1)</td></tr></tbody></table>
518
+ <p>These are <strong>only available in video templates</strong>. Use them when animation classes aren’t flexible enough.</p>
519
+ <h3 id="using-progress">Using <code>progress</code></h3>
520
+ <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"> ProgressAnimation</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>
521
+ <span class="line"><span style="color:#6A737D"> // Custom fade based on progress</span></span>
522
+ <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>
523
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
524
+ <span class="line"><span style="color:#6A737D"> // Custom scale based on progress </span></span>
525
+ <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 style="color:#6A737D">// 0.8 to 1.0</span></span>
526
+ <span class="line"></span>
527
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
528
+ <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>
529
+ <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>
530
+ <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>
531
+ <span class="line"><span style="color:#E1E4E8"> opacity,</span></span>
532
+ <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>
533
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
534
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
535
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
536
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
537
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
538
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
539
+ <span class="line"></span></code></pre>
540
+ <h3 id="using-frame">Using <code>frame</code></h3>
541
+ <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"> FrameAnimation</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">title</span><span style="color:#E1E4E8"> }) {</span></span>
542
+ <span class="line"><span style="color:#6A737D"> // Color cycling using frame number</span></span>
543
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> hue</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (frame </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 5</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">%</span><span style="color:#79B8FF"> 360</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Cycle through colors</span></span>
544
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
545
+ <span class="line"><span style="color:#6A737D"> // Pulsing based on frame</span></span>
546
+ <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>
547
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> pulse</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">sin</span><span style="color:#E1E4E8">(frame </span><span style="color:#F97583">/</span><span style="color:#E1E4E8"> fps </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> Math.</span><span style="color:#79B8FF">PI</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 2</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 0.2</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> 0.8</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// 0.6 to 1.0</span></span>
548
+ <span class="line"></span>
549
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
550
+ <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-black&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
551
+ <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>
552
+ <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&#39;</span><span style="color:#E1E4E8">),</span></span>
553
+ <span class="line"><span style="color:#E1E4E8"> color: </span><span style="color:#9ECBFF">`hsl(${</span><span style="color:#E1E4E8">hue</span><span style="color:#9ECBFF">}, 70%, 60%)`</span><span style="color:#E1E4E8">,</span></span>
554
+ <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`scale(${</span><span style="color:#E1E4E8">pulse</span><span style="color:#9ECBFF">})`</span></span>
555
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
556
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
557
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
558
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
559
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
560
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
561
+ <span class="line"></span></code></pre>
562
+ <h3 id="custom-easing">Custom Easing</h3>
563
+ <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"> CustomEasing</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>
564
+ <span class="line"><span style="color:#6A737D"> // Smoothstep easing</span></span>
565
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> eased</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">3</span><span style="color:#F97583"> -</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> progress);</span></span>
566
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
567
+ <span class="line"><span style="color:#6A737D"> // Elastic easing</span></span>
568
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> elastic</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">pow</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">-</span><span style="color:#79B8FF">10</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> progress) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">sin</span><span style="color:#E1E4E8">((progress </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 0.075</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> Math.</span><span style="color:#79B8FF">PI</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 0.3</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8">;</span></span>
569
+ <span class="line"></span>
570
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
571
+ <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
572
+ <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>
573
+ <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&#39;</span><span style="color:#E1E4E8">),</span></span>
574
+ <span class="line"><span style="color:#E1E4E8"> opacity: eased,</span></span>
575
+ <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`translateY(${</span><span style="color:#9ECBFF">(</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> elastic</span><span style="color:#9ECBFF">) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 100</span><span style="color:#9ECBFF">}px)`</span></span>
576
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
577
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
578
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
579
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
580
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
581
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
582
+ <span class="line"></span></code></pre>
583
+ <h3 id="when-to-use-manual-animation">When to Use Manual Animation</h3>
584
+ <p>Use <code>progress</code>/<code>frame</code> instead of animation classes when you need:</p>
585
+ <ul>
586
+ <li><strong>Custom easing functions</strong> (elastic, spring, bounce with specific curves)</li>
587
+ <li><strong>Color cycling or gradients</strong> based on time</li>
588
+ <li><strong>Mathematical animations</strong> (sine waves, spirals, etc.)</li>
589
+ <li><strong>Complex multi-property animations</strong> that need precise coordination</li>
590
+ <li><strong>Conditional logic</strong> based on specific frame numbers</li>
591
+ </ul>
592
+ <p>For everything else, prefer animation classes - they’re simpler and more maintainable.</p>
593
+ <h2 id="performance-tips">Performance Tips</h2>
594
+ <ol>
595
+ <li><strong>Use Tailwind classes</strong> when possible - they’re optimized for the renderer</li>
596
+ <li><strong>Avoid too many nested animations</strong> - each adds computation per frame</li>
597
+ <li><strong>Use loop animations sparingly</strong> - they’re computed every frame</li>
598
+ <li><strong>Prefer opacity and transform</strong> - they’re the most performant properties</li>
599
+ </ol>
600
+ <h2 id="next-steps">Next Steps</h2>
601
+ <ul>
602
+ <li><a href="/video">Video Templates</a> - Creating video templates</li>
603
+ <li><a href="/sdk">SDK</a> - Programmatic rendering with animations</li>
604
+ <li><a href="/helpers">Helpers</a> - QR codes, images, and more</li>
605
+ </ul> </article> </div> </main> </div> </body></html>