varg.ai-sdk 0.1.0 → 0.4.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (236) hide show
  1. package/.claude/settings.local.json +1 -1
  2. package/.env.example +3 -0
  3. package/.github/workflows/ci.yml +23 -0
  4. package/.husky/README.md +102 -0
  5. package/.husky/commit-msg +6 -0
  6. package/.husky/pre-commit +9 -0
  7. package/.husky/pre-push +6 -0
  8. package/.size-limit.json +8 -0
  9. package/.test-hooks.ts +5 -0
  10. package/CLAUDE.md +10 -3
  11. package/CONTRIBUTING.md +150 -0
  12. package/LICENSE.md +53 -0
  13. package/README.md +56 -209
  14. package/SKILLS.md +26 -10
  15. package/biome.json +7 -1
  16. package/bun.lock +1286 -0
  17. package/commitlint.config.js +22 -0
  18. package/docs/index.html +1130 -0
  19. package/docs/prompting.md +326 -0
  20. package/docs/react.md +834 -0
  21. package/docs/sdk.md +812 -0
  22. package/ffmpeg/CLAUDE.md +68 -0
  23. package/package.json +48 -8
  24. package/pipeline/cookbooks/scripts/animate-frames-parallel.ts +84 -0
  25. package/pipeline/cookbooks/scripts/combine-scenes.sh +53 -0
  26. package/pipeline/cookbooks/scripts/generate-frames-parallel.ts +99 -0
  27. package/pipeline/cookbooks/scripts/still-to-video.sh +37 -0
  28. package/pipeline/cookbooks/text-to-tiktok.md +669 -0
  29. package/pipeline/cookbooks/trendwatching.md +156 -0
  30. package/plan.md +281 -0
  31. package/scripts/.gitkeep +0 -0
  32. package/src/ai-sdk/cache.ts +142 -0
  33. package/src/ai-sdk/examples/cached-generation.ts +53 -0
  34. package/src/ai-sdk/examples/duet-scene-4.ts +53 -0
  35. package/src/ai-sdk/examples/duet-scene-5-audio.ts +32 -0
  36. package/src/ai-sdk/examples/duet-video.ts +56 -0
  37. package/src/ai-sdk/examples/editly-composition.ts +63 -0
  38. package/src/ai-sdk/examples/editly-test.ts +57 -0
  39. package/src/ai-sdk/examples/editly-video-test.ts +52 -0
  40. package/src/ai-sdk/examples/fal-lipsync.ts +43 -0
  41. package/src/ai-sdk/examples/higgsfield-image.ts +61 -0
  42. package/src/ai-sdk/examples/music-generation.ts +19 -0
  43. package/src/ai-sdk/examples/openai-sora.ts +34 -0
  44. package/src/ai-sdk/examples/replicate-bg-removal.ts +52 -0
  45. package/src/ai-sdk/examples/simpsons-scene.ts +61 -0
  46. package/src/ai-sdk/examples/talking-lion.ts +55 -0
  47. package/src/ai-sdk/examples/video-generation.ts +39 -0
  48. package/src/ai-sdk/examples/workflow-animated-girl.ts +104 -0
  49. package/src/ai-sdk/examples/workflow-before-after.ts +114 -0
  50. package/src/ai-sdk/examples/workflow-character-grid.ts +112 -0
  51. package/src/ai-sdk/examples/workflow-slideshow.ts +161 -0
  52. package/src/ai-sdk/file-cache.ts +112 -0
  53. package/src/ai-sdk/file.ts +238 -0
  54. package/src/ai-sdk/generate-element.ts +92 -0
  55. package/src/ai-sdk/generate-music.ts +46 -0
  56. package/src/ai-sdk/generate-video.ts +165 -0
  57. package/src/ai-sdk/index.ts +72 -0
  58. package/src/ai-sdk/music-model.ts +110 -0
  59. package/src/ai-sdk/providers/editly/editly.test.ts +1108 -0
  60. package/src/ai-sdk/providers/editly/ffmpeg.ts +60 -0
  61. package/src/ai-sdk/providers/editly/index.ts +817 -0
  62. package/src/ai-sdk/providers/editly/layers.ts +776 -0
  63. package/src/ai-sdk/providers/editly/plan.md +144 -0
  64. package/src/ai-sdk/providers/editly/types.ts +328 -0
  65. package/src/ai-sdk/providers/elevenlabs-provider.ts +255 -0
  66. package/src/ai-sdk/providers/fal-provider.ts +512 -0
  67. package/src/ai-sdk/providers/higgsfield.ts +379 -0
  68. package/src/ai-sdk/providers/openai.ts +251 -0
  69. package/src/ai-sdk/providers/replicate.ts +16 -0
  70. package/src/ai-sdk/video-model.ts +185 -0
  71. package/src/cli/commands/find.tsx +137 -0
  72. package/src/cli/commands/help.tsx +85 -0
  73. package/src/cli/commands/index.ts +6 -0
  74. package/src/cli/commands/list.tsx +238 -0
  75. package/src/cli/commands/render.tsx +71 -0
  76. package/src/cli/commands/run.tsx +511 -0
  77. package/src/cli/commands/which.tsx +253 -0
  78. package/src/cli/index.ts +114 -0
  79. package/src/cli/quiet.ts +44 -0
  80. package/src/cli/types.ts +32 -0
  81. package/src/cli/ui/components/Badge.tsx +29 -0
  82. package/src/cli/ui/components/DataTable.tsx +51 -0
  83. package/src/cli/ui/components/Header.tsx +23 -0
  84. package/src/cli/ui/components/HelpBlock.tsx +44 -0
  85. package/src/cli/ui/components/KeyValue.tsx +33 -0
  86. package/src/cli/ui/components/OptionRow.tsx +81 -0
  87. package/src/cli/ui/components/Separator.tsx +23 -0
  88. package/src/cli/ui/components/StatusBox.tsx +108 -0
  89. package/src/cli/ui/components/VargBox.tsx +51 -0
  90. package/src/cli/ui/components/VargProgress.tsx +36 -0
  91. package/src/cli/ui/components/VargSpinner.tsx +34 -0
  92. package/src/cli/ui/components/VargText.tsx +56 -0
  93. package/src/cli/ui/components/index.ts +19 -0
  94. package/src/cli/ui/index.ts +12 -0
  95. package/src/cli/ui/render.ts +35 -0
  96. package/src/cli/ui/theme.ts +63 -0
  97. package/src/cli/utils.ts +78 -0
  98. package/src/core/executor/executor.ts +201 -0
  99. package/src/core/executor/index.ts +13 -0
  100. package/src/core/executor/job.ts +214 -0
  101. package/src/core/executor/pipeline.ts +222 -0
  102. package/src/core/index.ts +11 -0
  103. package/src/core/registry/index.ts +9 -0
  104. package/src/core/registry/loader.ts +149 -0
  105. package/src/core/registry/registry.ts +221 -0
  106. package/src/core/registry/resolver.ts +206 -0
  107. package/src/core/schema/helpers.ts +134 -0
  108. package/src/core/schema/index.ts +8 -0
  109. package/src/core/schema/shared.ts +102 -0
  110. package/src/core/schema/types.ts +279 -0
  111. package/src/core/schema/validator.ts +92 -0
  112. package/src/definitions/actions/captions.ts +261 -0
  113. package/src/definitions/actions/edit.ts +298 -0
  114. package/src/definitions/actions/image.ts +125 -0
  115. package/src/definitions/actions/index.ts +114 -0
  116. package/src/definitions/actions/music.ts +205 -0
  117. package/src/definitions/actions/sync.ts +128 -0
  118. package/{action/transcribe/index.ts → src/definitions/actions/transcribe.ts} +63 -90
  119. package/src/definitions/actions/upload.ts +111 -0
  120. package/src/definitions/actions/video.ts +163 -0
  121. package/src/definitions/actions/voice.ts +119 -0
  122. package/src/definitions/index.ts +23 -0
  123. package/src/definitions/models/elevenlabs.ts +50 -0
  124. package/src/definitions/models/flux.ts +56 -0
  125. package/src/definitions/models/index.ts +36 -0
  126. package/src/definitions/models/kling.ts +56 -0
  127. package/src/definitions/models/llama.ts +54 -0
  128. package/src/definitions/models/nano-banana-pro.ts +102 -0
  129. package/src/definitions/models/sonauto.ts +68 -0
  130. package/src/definitions/models/soul.ts +65 -0
  131. package/src/definitions/models/wan.ts +54 -0
  132. package/src/definitions/models/whisper.ts +44 -0
  133. package/src/definitions/skills/index.ts +12 -0
  134. package/src/definitions/skills/talking-character.ts +87 -0
  135. package/src/definitions/skills/text-to-tiktok.ts +97 -0
  136. package/src/index.ts +118 -0
  137. package/src/providers/apify.ts +269 -0
  138. package/src/providers/base.ts +264 -0
  139. package/src/providers/elevenlabs.ts +217 -0
  140. package/src/providers/fal.ts +392 -0
  141. package/src/providers/ffmpeg.ts +544 -0
  142. package/src/providers/fireworks.ts +193 -0
  143. package/src/providers/groq.ts +149 -0
  144. package/src/providers/higgsfield.ts +145 -0
  145. package/src/providers/index.ts +143 -0
  146. package/src/providers/replicate.ts +147 -0
  147. package/src/providers/storage.ts +206 -0
  148. package/src/react/cli.ts +52 -0
  149. package/src/react/elements.ts +146 -0
  150. package/src/react/examples/branching.tsx +66 -0
  151. package/src/react/examples/captions-demo.tsx +37 -0
  152. package/src/react/examples/character-video.tsx +84 -0
  153. package/src/react/examples/grid.tsx +53 -0
  154. package/src/react/examples/layouts-demo.tsx +57 -0
  155. package/src/react/examples/madi.tsx +60 -0
  156. package/src/react/examples/music-test.tsx +35 -0
  157. package/src/react/examples/onlyfans-1m/workflow.tsx +88 -0
  158. package/src/react/examples/orange-portrait.tsx +41 -0
  159. package/src/react/examples/split-element-demo.tsx +60 -0
  160. package/src/react/examples/split-layout-demo.tsx +60 -0
  161. package/src/react/examples/split.tsx +41 -0
  162. package/src/react/examples/video-grid.tsx +46 -0
  163. package/src/react/index.ts +43 -0
  164. package/src/react/layouts/grid.tsx +28 -0
  165. package/src/react/layouts/index.ts +2 -0
  166. package/src/react/layouts/split.tsx +20 -0
  167. package/src/react/react.test.ts +309 -0
  168. package/src/react/render.ts +21 -0
  169. package/src/react/renderers/animate.ts +59 -0
  170. package/src/react/renderers/captions.ts +297 -0
  171. package/src/react/renderers/clip.ts +248 -0
  172. package/src/react/renderers/context.ts +17 -0
  173. package/src/react/renderers/image.ts +109 -0
  174. package/src/react/renderers/index.ts +22 -0
  175. package/src/react/renderers/music.ts +60 -0
  176. package/src/react/renderers/packshot.ts +84 -0
  177. package/src/react/renderers/progress.ts +173 -0
  178. package/src/react/renderers/render.ts +243 -0
  179. package/src/react/renderers/slider.ts +69 -0
  180. package/src/react/renderers/speech.ts +53 -0
  181. package/src/react/renderers/split.ts +91 -0
  182. package/src/react/renderers/subtitle.ts +16 -0
  183. package/src/react/renderers/swipe.ts +75 -0
  184. package/src/react/renderers/title.ts +17 -0
  185. package/src/react/renderers/utils.ts +124 -0
  186. package/src/react/renderers/video.ts +127 -0
  187. package/src/react/runtime/jsx-dev-runtime.ts +43 -0
  188. package/src/react/runtime/jsx-runtime.ts +35 -0
  189. package/src/react/types.ts +232 -0
  190. package/src/studio/index.ts +26 -0
  191. package/src/studio/scanner.ts +102 -0
  192. package/src/studio/server.ts +554 -0
  193. package/src/studio/stages.ts +251 -0
  194. package/src/studio/step-renderer.ts +279 -0
  195. package/src/studio/types.ts +60 -0
  196. package/src/studio/ui/cache.html +303 -0
  197. package/src/studio/ui/index.html +1820 -0
  198. package/src/tests/all.test.ts +509 -0
  199. package/src/tests/index.ts +33 -0
  200. package/src/tests/unit.test.ts +403 -0
  201. package/tsconfig.cli.json +8 -0
  202. package/tsconfig.json +21 -3
  203. package/TEST_RESULTS.md +0 -122
  204. package/action/captions/SKILL.md +0 -170
  205. package/action/captions/index.ts +0 -227
  206. package/action/edit/SKILL.md +0 -235
  207. package/action/edit/index.ts +0 -493
  208. package/action/image/SKILL.md +0 -140
  209. package/action/image/index.ts +0 -112
  210. package/action/sync/SKILL.md +0 -136
  211. package/action/sync/index.ts +0 -187
  212. package/action/transcribe/SKILL.md +0 -179
  213. package/action/video/SKILL.md +0 -116
  214. package/action/video/index.ts +0 -135
  215. package/action/voice/SKILL.md +0 -125
  216. package/action/voice/index.ts +0 -201
  217. package/index.ts +0 -38
  218. package/lib/README.md +0 -144
  219. package/lib/ai-sdk/fal.ts +0 -106
  220. package/lib/ai-sdk/replicate.ts +0 -107
  221. package/lib/elevenlabs.ts +0 -382
  222. package/lib/fal.ts +0 -478
  223. package/lib/ffmpeg.ts +0 -467
  224. package/lib/fireworks.ts +0 -235
  225. package/lib/groq.ts +0 -246
  226. package/lib/higgsfield.ts +0 -176
  227. package/lib/remotion/SKILL.md +0 -823
  228. package/lib/remotion/cli.ts +0 -115
  229. package/lib/remotion/functions.ts +0 -283
  230. package/lib/remotion/index.ts +0 -19
  231. package/lib/remotion/templates.ts +0 -73
  232. package/lib/replicate.ts +0 -304
  233. package/output.txt +0 -1
  234. package/test-import.ts +0 -7
  235. package/test-services.ts +0 -97
  236. package/utilities/s3.ts +0 -147
package/docs/index.html ADDED
@@ -0,0 +1,1130 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>varg-react | JSX for AI Video</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --bg: #050505;
13
+ --bg-elevated: #0a0a0a;
14
+ --bg-card: #0f0f0f;
15
+ --bg-code: #0d0d0d;
16
+ --border: #1a1a1a;
17
+ --border-subtle: #141414;
18
+ --text: #e5e5e5;
19
+ --text-muted: #737373;
20
+ --text-dim: #525252;
21
+ --orange: #ff6b35;
22
+ --orange-glow: rgba(255, 107, 53, 0.15);
23
+ --orange-dim: #cc5629;
24
+ --green: #a5d6a7;
25
+ --blue: #82b1ff;
26
+ --purple: #ce93d8;
27
+ --pink: #f48fb1;
28
+ --yellow: #ffd54f;
29
+ }
30
+
31
+ * {
32
+ margin: 0;
33
+ padding: 0;
34
+ box-sizing: border-box;
35
+ }
36
+
37
+ html {
38
+ scroll-behavior: smooth;
39
+ }
40
+
41
+ body {
42
+ font-family: 'Sora', -apple-system, sans-serif;
43
+ background: var(--bg);
44
+ color: var(--text);
45
+ line-height: 1.6;
46
+ overflow-x: hidden;
47
+ }
48
+
49
+ /* Noise overlay */
50
+ body::before {
51
+ content: '';
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
58
+ opacity: 0.03;
59
+ pointer-events: none;
60
+ z-index: 1000;
61
+ }
62
+
63
+ .container {
64
+ max-width: 1200px;
65
+ margin: 0 auto;
66
+ padding: 0 24px;
67
+ }
68
+
69
+ /* Navigation */
70
+ nav {
71
+ position: fixed;
72
+ top: 0;
73
+ left: 0;
74
+ right: 0;
75
+ z-index: 100;
76
+ padding: 20px 0;
77
+ background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
78
+ backdrop-filter: blur(12px);
79
+ }
80
+
81
+ nav .container {
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ }
86
+
87
+ .logo {
88
+ font-family: 'JetBrains Mono', monospace;
89
+ font-weight: 600;
90
+ font-size: 18px;
91
+ color: var(--text);
92
+ text-decoration: none;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ }
97
+
98
+ .logo-icon {
99
+ width: 28px;
100
+ height: 28px;
101
+ background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dim) 100%);
102
+ border-radius: 6px;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ }
107
+
108
+ .logo-icon svg {
109
+ width: 16px;
110
+ height: 16px;
111
+ fill: white;
112
+ }
113
+
114
+ .nav-links {
115
+ display: flex;
116
+ gap: 32px;
117
+ align-items: center;
118
+ }
119
+
120
+ .nav-links a {
121
+ color: var(--text-muted);
122
+ text-decoration: none;
123
+ font-size: 14px;
124
+ font-weight: 400;
125
+ transition: color 0.2s;
126
+ }
127
+
128
+ .nav-links a:hover {
129
+ color: var(--text);
130
+ }
131
+
132
+ .nav-btn {
133
+ background: var(--orange);
134
+ color: #000;
135
+ padding: 8px 16px;
136
+ border-radius: 6px;
137
+ font-weight: 500;
138
+ font-size: 14px;
139
+ text-decoration: none;
140
+ transition: all 0.2s;
141
+ }
142
+
143
+ .nav-btn:hover {
144
+ background: var(--text);
145
+ color: #000;
146
+ }
147
+
148
+ /* Hero */
149
+ .hero {
150
+ min-height: 100vh;
151
+ display: flex;
152
+ flex-direction: column;
153
+ justify-content: center;
154
+ padding: 120px 0 80px;
155
+ position: relative;
156
+ }
157
+
158
+ .hero::before {
159
+ content: '';
160
+ position: absolute;
161
+ top: 0;
162
+ left: 50%;
163
+ transform: translateX(-50%);
164
+ width: 800px;
165
+ height: 600px;
166
+ background: radial-gradient(ellipse at center, var(--orange-glow) 0%, transparent 60%);
167
+ pointer-events: none;
168
+ }
169
+
170
+ .hero-content {
171
+ position: relative;
172
+ z-index: 1;
173
+ }
174
+
175
+ .hero-badge {
176
+ display: inline-flex;
177
+ align-items: center;
178
+ gap: 8px;
179
+ background: var(--bg-card);
180
+ border: 1px solid var(--border);
181
+ border-radius: 100px;
182
+ padding: 6px 14px;
183
+ font-size: 13px;
184
+ color: var(--text-muted);
185
+ margin-bottom: 32px;
186
+ }
187
+
188
+ .hero-badge-dot {
189
+ width: 6px;
190
+ height: 6px;
191
+ background: var(--orange);
192
+ border-radius: 50%;
193
+ animation: pulse 2s infinite;
194
+ }
195
+
196
+ @keyframes pulse {
197
+ 0%, 100% { opacity: 1; }
198
+ 50% { opacity: 0.4; }
199
+ }
200
+
201
+ .hero h1 {
202
+ font-size: clamp(48px, 10vw, 88px);
203
+ font-weight: 700;
204
+ line-height: 1;
205
+ letter-spacing: -0.03em;
206
+ margin-bottom: 24px;
207
+ background: linear-gradient(135deg, var(--text) 0%, var(--text-muted) 100%);
208
+ -webkit-background-clip: text;
209
+ -webkit-text-fill-color: transparent;
210
+ background-clip: text;
211
+ }
212
+
213
+ .hero h1 span {
214
+ background: linear-gradient(135deg, var(--orange) 0%, var(--yellow) 100%);
215
+ -webkit-background-clip: text;
216
+ background-clip: text;
217
+ }
218
+
219
+ .hero-sub {
220
+ font-size: clamp(18px, 2.5vw, 22px);
221
+ color: var(--text-muted);
222
+ max-width: 560px;
223
+ margin-bottom: 48px;
224
+ font-weight: 300;
225
+ }
226
+
227
+ .hero-cmd {
228
+ display: inline-flex;
229
+ align-items: center;
230
+ gap: 12px;
231
+ background: var(--bg-code);
232
+ border: 1px solid var(--border);
233
+ border-radius: 8px;
234
+ padding: 16px 24px;
235
+ font-family: 'JetBrains Mono', monospace;
236
+ font-size: 15px;
237
+ margin-bottom: 64px;
238
+ cursor: pointer;
239
+ transition: all 0.2s;
240
+ }
241
+
242
+ .hero-cmd:hover {
243
+ border-color: var(--orange);
244
+ box-shadow: 0 0 32px var(--orange-glow);
245
+ }
246
+
247
+ .hero-cmd-prompt {
248
+ color: var(--text-muted);
249
+ }
250
+
251
+ .hero-cmd-text {
252
+ color: var(--text);
253
+ }
254
+
255
+ .hero-cmd-copy {
256
+ color: var(--text-dim);
257
+ padding: 4px;
258
+ border-radius: 4px;
259
+ transition: all 0.2s;
260
+ }
261
+
262
+ .hero-cmd:hover .hero-cmd-copy {
263
+ color: var(--orange);
264
+ }
265
+
266
+ /* Code Block */
267
+ .code-block {
268
+ background: var(--bg-code);
269
+ border: 1px solid var(--border);
270
+ border-radius: 12px;
271
+ overflow: hidden;
272
+ max-width: 720px;
273
+ }
274
+
275
+ .code-header {
276
+ display: flex;
277
+ align-items: center;
278
+ gap: 8px;
279
+ padding: 12px 16px;
280
+ border-bottom: 1px solid var(--border-subtle);
281
+ background: var(--bg-card);
282
+ }
283
+
284
+ .code-dot {
285
+ width: 10px;
286
+ height: 10px;
287
+ border-radius: 50%;
288
+ background: var(--border);
289
+ }
290
+
291
+ .code-dot:nth-child(1) { background: #ff5f57; }
292
+ .code-dot:nth-child(2) { background: #ffbd2e; }
293
+ .code-dot:nth-child(3) { background: #28c840; }
294
+
295
+ .code-title {
296
+ margin-left: auto;
297
+ font-family: 'JetBrains Mono', monospace;
298
+ font-size: 12px;
299
+ color: var(--text-dim);
300
+ }
301
+
302
+ .code-content {
303
+ padding: 20px 24px;
304
+ overflow-x: auto;
305
+ }
306
+
307
+ pre {
308
+ font-family: 'JetBrains Mono', monospace;
309
+ font-size: 13px;
310
+ line-height: 1.7;
311
+ white-space: pre;
312
+ margin: 0;
313
+ }
314
+
315
+ .kw { color: var(--orange); }
316
+ .str { color: var(--green); }
317
+ .tag { color: var(--blue); }
318
+ .attr { color: var(--purple); }
319
+ .num { color: var(--pink); }
320
+ .cmt { color: var(--text-dim); }
321
+ .fn { color: var(--yellow); }
322
+ .op { color: var(--text-muted); }
323
+
324
+ /* Sections */
325
+ section {
326
+ padding: 120px 0;
327
+ }
328
+
329
+ .section-label {
330
+ font-family: 'JetBrains Mono', monospace;
331
+ font-size: 12px;
332
+ color: var(--orange);
333
+ text-transform: uppercase;
334
+ letter-spacing: 0.1em;
335
+ margin-bottom: 16px;
336
+ }
337
+
338
+ .section-title {
339
+ font-size: clamp(32px, 5vw, 48px);
340
+ font-weight: 600;
341
+ letter-spacing: -0.02em;
342
+ margin-bottom: 20px;
343
+ line-height: 1.2;
344
+ }
345
+
346
+ .section-desc {
347
+ font-size: 17px;
348
+ color: var(--text-muted);
349
+ max-width: 600px;
350
+ font-weight: 300;
351
+ }
352
+
353
+ /* Pillars Grid */
354
+ .pillars {
355
+ background: var(--bg-elevated);
356
+ border-top: 1px solid var(--border-subtle);
357
+ border-bottom: 1px solid var(--border-subtle);
358
+ }
359
+
360
+ .pillars-grid {
361
+ display: grid;
362
+ grid-template-columns: repeat(3, 1fr);
363
+ gap: 1px;
364
+ background: var(--border-subtle);
365
+ margin-top: 64px;
366
+ }
367
+
368
+ .pillar {
369
+ background: var(--bg-elevated);
370
+ padding: 48px 40px;
371
+ transition: all 0.3s;
372
+ }
373
+
374
+ .pillar:hover {
375
+ background: var(--bg-card);
376
+ }
377
+
378
+ .pillar-icon {
379
+ width: 48px;
380
+ height: 48px;
381
+ background: linear-gradient(135deg, var(--orange-glow) 0%, transparent 100%);
382
+ border: 1px solid var(--border);
383
+ border-radius: 12px;
384
+ display: flex;
385
+ align-items: center;
386
+ justify-content: center;
387
+ margin-bottom: 24px;
388
+ }
389
+
390
+ .pillar-icon svg {
391
+ width: 24px;
392
+ height: 24px;
393
+ stroke: var(--orange);
394
+ fill: none;
395
+ stroke-width: 1.5;
396
+ }
397
+
398
+ .pillar h3 {
399
+ font-size: 22px;
400
+ font-weight: 600;
401
+ margin-bottom: 16px;
402
+ }
403
+
404
+ .pillar p {
405
+ color: var(--text-muted);
406
+ font-size: 15px;
407
+ line-height: 1.7;
408
+ margin-bottom: 24px;
409
+ }
410
+
411
+ .pillar-highlight {
412
+ font-family: 'JetBrains Mono', monospace;
413
+ font-size: 12px;
414
+ color: var(--orange);
415
+ background: var(--orange-glow);
416
+ padding: 6px 12px;
417
+ border-radius: 4px;
418
+ display: inline-block;
419
+ }
420
+
421
+ .pillar-code {
422
+ background: var(--bg-code);
423
+ border: 1px solid var(--border-subtle);
424
+ border-radius: 8px;
425
+ padding: 16px;
426
+ margin-top: 20px;
427
+ }
428
+
429
+ .pillar-code pre {
430
+ font-size: 12px;
431
+ }
432
+
433
+ /* AI Agents Section */
434
+ .agents {
435
+ position: relative;
436
+ }
437
+
438
+ .agents::before {
439
+ content: '';
440
+ position: absolute;
441
+ top: 50%;
442
+ right: 0;
443
+ transform: translateY(-50%);
444
+ width: 500px;
445
+ height: 500px;
446
+ background: radial-gradient(ellipse at center, var(--orange-glow) 0%, transparent 60%);
447
+ pointer-events: none;
448
+ }
449
+
450
+ .agents-content {
451
+ display: grid;
452
+ grid-template-columns: 1fr 1fr;
453
+ gap: 80px;
454
+ align-items: center;
455
+ margin-top: 64px;
456
+ }
457
+
458
+ .agents-text h3 {
459
+ font-size: 28px;
460
+ font-weight: 600;
461
+ margin-bottom: 20px;
462
+ }
463
+
464
+ .agents-text p {
465
+ color: var(--text-muted);
466
+ font-size: 16px;
467
+ margin-bottom: 32px;
468
+ }
469
+
470
+ .agents-list {
471
+ list-style: none;
472
+ }
473
+
474
+ .agents-list li {
475
+ display: flex;
476
+ align-items: flex-start;
477
+ gap: 12px;
478
+ padding: 12px 0;
479
+ color: var(--text-muted);
480
+ font-size: 15px;
481
+ }
482
+
483
+ .agents-list li::before {
484
+ content: '';
485
+ width: 6px;
486
+ height: 6px;
487
+ background: var(--orange);
488
+ border-radius: 50%;
489
+ margin-top: 8px;
490
+ flex-shrink: 0;
491
+ }
492
+
493
+ .terminal {
494
+ background: var(--bg-code);
495
+ border: 1px solid var(--border);
496
+ border-radius: 12px;
497
+ overflow: hidden;
498
+ }
499
+
500
+ .terminal-header {
501
+ display: flex;
502
+ align-items: center;
503
+ gap: 8px;
504
+ padding: 12px 16px;
505
+ border-bottom: 1px solid var(--border-subtle);
506
+ background: var(--bg-card);
507
+ }
508
+
509
+ .terminal-body {
510
+ padding: 20px;
511
+ font-family: 'JetBrains Mono', monospace;
512
+ font-size: 12px;
513
+ line-height: 1.8;
514
+ }
515
+
516
+ .terminal-line {
517
+ display: flex;
518
+ gap: 8px;
519
+ }
520
+
521
+ .terminal-prompt {
522
+ color: var(--orange);
523
+ }
524
+
525
+ .terminal-cmd {
526
+ color: var(--text);
527
+ }
528
+
529
+ .terminal-output {
530
+ color: var(--text-muted);
531
+ padding-left: 20px;
532
+ }
533
+
534
+ .terminal-error {
535
+ color: #ff5f57;
536
+ }
537
+
538
+ .terminal-success {
539
+ color: #28c840;
540
+ }
541
+
542
+ /* Composability Section */
543
+ .compose {
544
+ background: var(--bg-elevated);
545
+ border-top: 1px solid var(--border-subtle);
546
+ border-bottom: 1px solid var(--border-subtle);
547
+ }
548
+
549
+ .compose-flow {
550
+ display: flex;
551
+ flex-wrap: wrap;
552
+ gap: 16px;
553
+ margin-top: 64px;
554
+ justify-content: center;
555
+ }
556
+
557
+ .compose-item {
558
+ background: var(--bg-card);
559
+ border: 1px solid var(--border);
560
+ border-radius: 8px;
561
+ padding: 20px 28px;
562
+ text-align: center;
563
+ transition: all 0.3s;
564
+ }
565
+
566
+ .compose-item:hover {
567
+ border-color: var(--orange);
568
+ transform: translateY(-2px);
569
+ }
570
+
571
+ .compose-item-tag {
572
+ font-family: 'JetBrains Mono', monospace;
573
+ font-size: 14px;
574
+ color: var(--blue);
575
+ margin-bottom: 8px;
576
+ }
577
+
578
+ .compose-item-desc {
579
+ font-size: 13px;
580
+ color: var(--text-muted);
581
+ }
582
+
583
+ .compose-arrow {
584
+ display: flex;
585
+ align-items: center;
586
+ color: var(--text-dim);
587
+ font-size: 20px;
588
+ }
589
+
590
+ .compose-equals {
591
+ display: flex;
592
+ align-items: center;
593
+ color: var(--orange);
594
+ font-weight: 600;
595
+ font-size: 18px;
596
+ }
597
+
598
+ .compose-result {
599
+ background: linear-gradient(135deg, var(--orange-glow) 0%, transparent 100%);
600
+ border-color: var(--orange);
601
+ }
602
+
603
+ .compose-result .compose-item-tag {
604
+ color: var(--orange);
605
+ }
606
+
607
+ /* Examples Section */
608
+ .examples-grid {
609
+ display: grid;
610
+ grid-template-columns: repeat(2, 1fr);
611
+ gap: 24px;
612
+ margin-top: 64px;
613
+ }
614
+
615
+ .example-card {
616
+ background: var(--bg-card);
617
+ border: 1px solid var(--border);
618
+ border-radius: 12px;
619
+ overflow: hidden;
620
+ transition: all 0.3s;
621
+ }
622
+
623
+ .example-card:hover {
624
+ border-color: var(--border);
625
+ transform: translateY(-4px);
626
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
627
+ }
628
+
629
+ .example-header {
630
+ padding: 20px 24px;
631
+ border-bottom: 1px solid var(--border-subtle);
632
+ display: flex;
633
+ align-items: center;
634
+ gap: 12px;
635
+ }
636
+
637
+ .example-icon {
638
+ width: 36px;
639
+ height: 36px;
640
+ background: var(--orange-glow);
641
+ border-radius: 8px;
642
+ display: flex;
643
+ align-items: center;
644
+ justify-content: center;
645
+ }
646
+
647
+ .example-icon svg {
648
+ width: 18px;
649
+ height: 18px;
650
+ stroke: var(--orange);
651
+ fill: none;
652
+ stroke-width: 1.5;
653
+ }
654
+
655
+ .example-title {
656
+ font-size: 16px;
657
+ font-weight: 500;
658
+ }
659
+
660
+ .example-code {
661
+ padding: 20px 24px;
662
+ }
663
+
664
+ .example-code pre {
665
+ font-size: 12px;
666
+ }
667
+
668
+ /* Footer */
669
+ footer {
670
+ padding: 80px 0;
671
+ border-top: 1px solid var(--border-subtle);
672
+ }
673
+
674
+ .footer-content {
675
+ display: flex;
676
+ justify-content: space-between;
677
+ align-items: center;
678
+ }
679
+
680
+ .footer-logo {
681
+ font-family: 'JetBrains Mono', monospace;
682
+ font-weight: 600;
683
+ font-size: 18px;
684
+ color: var(--text);
685
+ display: flex;
686
+ align-items: center;
687
+ gap: 8px;
688
+ }
689
+
690
+ .footer-links {
691
+ display: flex;
692
+ gap: 32px;
693
+ }
694
+
695
+ .footer-links a {
696
+ color: var(--text-muted);
697
+ text-decoration: none;
698
+ font-size: 14px;
699
+ transition: color 0.2s;
700
+ }
701
+
702
+ .footer-links a:hover {
703
+ color: var(--orange);
704
+ }
705
+
706
+ /* Responsive */
707
+ @media (max-width: 1024px) {
708
+ .pillars-grid {
709
+ grid-template-columns: 1fr;
710
+ }
711
+
712
+ .agents-content {
713
+ grid-template-columns: 1fr;
714
+ gap: 48px;
715
+ }
716
+
717
+ .examples-grid {
718
+ grid-template-columns: 1fr;
719
+ }
720
+ }
721
+
722
+ @media (max-width: 768px) {
723
+ .nav-links {
724
+ display: none;
725
+ }
726
+
727
+ .hero {
728
+ padding: 100px 0 60px;
729
+ }
730
+
731
+ .hero h1 {
732
+ font-size: 40px;
733
+ }
734
+
735
+ .compose-flow {
736
+ flex-direction: column;
737
+ align-items: center;
738
+ }
739
+
740
+ .compose-arrow {
741
+ transform: rotate(90deg);
742
+ }
743
+
744
+ .footer-content {
745
+ flex-direction: column;
746
+ gap: 24px;
747
+ text-align: center;
748
+ }
749
+
750
+ .code-block {
751
+ margin: 0 -24px;
752
+ border-radius: 0;
753
+ border-left: none;
754
+ border-right: none;
755
+ }
756
+ }
757
+
758
+ @media (max-width: 480px) {
759
+ .pillar {
760
+ padding: 32px 24px;
761
+ }
762
+
763
+ .hero-cmd {
764
+ padding: 12px 16px;
765
+ font-size: 13px;
766
+ }
767
+ }
768
+ </style>
769
+ </head>
770
+ <body>
771
+ <nav>
772
+ <div class="container">
773
+ <a href="#" class="logo">
774
+ <div class="logo-icon">
775
+ <svg viewBox="0 0 24 24"><polygon points="12,2 22,22 2,22"/></svg>
776
+ </div>
777
+ varg-react
778
+ </a>
779
+ <div class="nav-links">
780
+ <a href="#pillars">Features</a>
781
+ <a href="#agents">AI Agents</a>
782
+ <a href="#examples">Examples</a>
783
+ <a href="https://github.com/varghq/sdk" class="nav-btn">GitHub</a>
784
+ </div>
785
+ </div>
786
+ </nav>
787
+
788
+ <section class="hero">
789
+ <div class="container">
790
+ <div class="hero-content">
791
+ <div class="hero-badge">
792
+ <span class="hero-badge-dot"></span>
793
+ <span>Now in public beta</span>
794
+ </div>
795
+ <h1>JSX for <span>AI Video</span></h1>
796
+ <p class="hero-sub">Declarative video rendering with AI generation. Write JSX, get video. Same prompt = cache hit = instant.</p>
797
+
798
+ <div class="hero-cmd" onclick="navigator.clipboard.writeText('varg render example.tsx')">
799
+ <span class="hero-cmd-prompt">$</span>
800
+ <span class="hero-cmd-text">varg render example.tsx</span>
801
+ <span class="hero-cmd-copy">
802
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
803
+ <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
804
+ <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
805
+ </svg>
806
+ </span>
807
+ </div>
808
+
809
+ <div class="code-block">
810
+ <div class="code-header">
811
+ <div class="code-dot"></div>
812
+ <div class="code-dot"></div>
813
+ <div class="code-dot"></div>
814
+ <span class="code-title">portrait.tsx</span>
815
+ </div>
816
+ <div class="code-content">
817
+ <pre><span class="kw">import</span> { <span class="tag">Clip</span>, <span class="tag">Image</span>, <span class="tag">Render</span>, <span class="tag">Video</span> } <span class="kw">from</span> <span class="str">"@vargai/react"</span>;
818
+ <span class="kw">import</span> { <span class="fn">fal</span> } <span class="kw">from</span> <span class="str">"@vargai/fal"</span>;
819
+
820
+ <span class="kw">export default</span> (
821
+ &lt;<span class="tag">Render</span> <span class="attr">width</span>=<span class="op">{</span><span class="num">1080</span><span class="op">}</span> <span class="attr">height</span>=<span class="op">{</span><span class="num">1920</span><span class="op">}</span>&gt;
822
+ &lt;<span class="tag">Clip</span> <span class="attr">duration</span>=<span class="op">{</span><span class="num">5</span><span class="op">}</span>&gt;
823
+ &lt;<span class="tag">Video</span>
824
+ <span class="attr">prompt</span>=<span class="op">{{</span>
825
+ <span class="attr">text</span>: <span class="str">"Camera reveals full figure, dramatic lighting..."</span>,
826
+ <span class="attr">images</span>: [
827
+ <span class="fn">Image</span>({
828
+ <span class="attr">prompt</span>: { <span class="attr">text</span>: <span class="str">"Editorial portrait, orange rim light..."</span> },
829
+ <span class="attr">model</span>: <span class="fn">fal</span>.<span class="fn">imageModel</span>(<span class="str">"nano-banana-pro/edit"</span>),
830
+ }),
831
+ ],
832
+ <span class="op">}}</span>
833
+ <span class="attr">model</span>=<span class="op">{</span><span class="fn">fal</span>.<span class="fn">videoModel</span>(<span class="str">"kling-v2.5"</span>)<span class="op">}</span>
834
+ <span class="attr">duration</span>=<span class="op">{</span><span class="num">5</span><span class="op">}</span>
835
+ /&gt;
836
+ &lt;/<span class="tag">Clip</span>&gt;
837
+ &lt;/<span class="tag">Render</span>&gt;
838
+ );</pre>
839
+ </div>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ </section>
844
+
845
+ <section class="pillars" id="pillars">
846
+ <div class="container">
847
+ <span class="section-label">Core Principles</span>
848
+ <h2 class="section-title">Three pillars of video generation</h2>
849
+ <p class="section-desc">Built on principles that make complex video workflows feel simple.</p>
850
+
851
+ <div class="pillars-grid">
852
+ <div class="pillar">
853
+ <div class="pillar-icon">
854
+ <svg viewBox="0 0 24 24"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1M16 3h1a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/></svg>
855
+ </div>
856
+ <h3>Declarative</h3>
857
+ <p>Describe WHAT you want, not HOW to make it. No manual file handling, no temp files, no state management. Just JSX that describes your video structure. The engine handles orchestration, parallelization, and composition automatically.</p>
858
+ <div class="pillar-code">
859
+ <pre><span class="cmt">// describe structure, not steps</span>
860
+ &lt;<span class="tag">Render</span>&gt;
861
+ &lt;<span class="tag">Clip</span>&gt;&lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"scene 1"</span> /&gt;&lt;/<span class="tag">Clip</span>&gt;
862
+ &lt;<span class="tag">Clip</span>&gt;&lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"scene 2"</span> /&gt;&lt;/<span class="tag">Clip</span>&gt;
863
+ &lt;/<span class="tag">Render</span>&gt;</pre>
864
+ </div>
865
+ </div>
866
+
867
+ <div class="pillar">
868
+ <div class="pillar-icon">
869
+ <svg viewBox="0 0 24 24"><path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"/></svg>
870
+ </div>
871
+ <h3>Good Defaults</h3>
872
+ <p>Everything just works out of the box. Automatic caching, smart aspect ratio handling, audio ducking, transitions. You don't configure what you don't need to. But when you do need control, every parameter is there.</p>
873
+ <span class="pillar-highlight">same prompt = cache hit = instant</span>
874
+ </div>
875
+
876
+ <div class="pillar">
877
+ <div class="pillar-icon">
878
+ <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
879
+ </div>
880
+ <h3>Flexible</h3>
881
+ <p>Compose primitives into complex pipelines. TalkingHead? Just Image + Animate + Speech. Split screen? Two children in a Split component. Everything is composable. Build your own abstractions on top of the primitives.</p>
882
+ <div class="pillar-code">
883
+ <pre><span class="cmt">// compose your own components</span>
884
+ <span class="kw">const</span> <span class="fn">TalkingHead</span> = () =&gt; (
885
+ &lt;&gt;
886
+ &lt;<span class="tag">Animate</span> <span class="attr">image</span>=<span class="op">{</span>&lt;<span class="tag">Image</span> /&gt;<span class="op">}</span> /&gt;
887
+ &lt;<span class="tag">Speech</span>&gt;Hello!&lt;/<span class="tag">Speech</span>&gt;
888
+ &lt;/&gt;
889
+ );</pre>
890
+ </div>
891
+ </div>
892
+ </div>
893
+ </div>
894
+ </section>
895
+
896
+ <section class="agents" id="agents">
897
+ <div class="container">
898
+ <span class="section-label">AI Native</span>
899
+ <h2 class="section-title">Made for AI Agents</h2>
900
+ <p class="section-desc">AI agents write good varg-react code out of the box. The declarative API maps naturally to how LLMs think about structure.</p>
901
+
902
+ <div class="agents-content">
903
+ <div class="agents-text">
904
+ <h3>Clear errors, easy fixes</h3>
905
+ <p>For the 5% of cases where agents don't one-shot it, they receive clear runtime errors with actionable messages. No cryptic stack traces. No hidden state to debug.</p>
906
+ <ul class="agents-list">
907
+ <li>Agents generate correct code 95% of the time</li>
908
+ <li>Clear runtime errors for the other 5%</li>
909
+ <li>No magic strings or hidden state</li>
910
+ <li>Type-safe props catch mistakes early</li>
911
+ </ul>
912
+ </div>
913
+
914
+ <div class="terminal">
915
+ <div class="terminal-header">
916
+ <div class="code-dot"></div>
917
+ <div class="code-dot"></div>
918
+ <div class="code-dot"></div>
919
+ </div>
920
+ <div class="terminal-body">
921
+ <div class="terminal-line"><span class="terminal-prompt">$</span><span class="terminal-cmd"> varg render scene.tsx</span></div>
922
+ <div class="terminal-output"><span class="terminal-error">Error: Clip duration required when using Video</span></div>
923
+ <div class="terminal-output"><span class="terminal-error"> at Clip (line 12)</span></div>
924
+ <div class="terminal-output"><span class="terminal-error"> hint: add duration={5} or duration="auto"</span></div>
925
+ <br>
926
+ <div class="terminal-line"><span class="terminal-prompt">$</span><span class="terminal-cmd"> # agent fixes and retries</span></div>
927
+ <div class="terminal-line"><span class="terminal-prompt">$</span><span class="terminal-cmd"> varg render scene.tsx</span></div>
928
+ <div class="terminal-output"><span class="terminal-success">Rendering 3 clips...</span></div>
929
+ <div class="terminal-output"><span class="terminal-success">Done! output/scene.mp4</span></div>
930
+ </div>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </section>
935
+
936
+ <section class="compose">
937
+ <div class="container">
938
+ <span class="section-label">Primitives</span>
939
+ <h2 class="section-title">Everything Composes</h2>
940
+ <p class="section-desc">Combine simple primitives into complex pipelines. Each piece does one thing well.</p>
941
+
942
+ <div class="compose-flow">
943
+ <div class="compose-item">
944
+ <div class="compose-item-tag">&lt;Image /&gt;</div>
945
+ <div class="compose-item-desc">generates still</div>
946
+ </div>
947
+ <div class="compose-arrow">+</div>
948
+ <div class="compose-item">
949
+ <div class="compose-item-tag">&lt;Animate /&gt;</div>
950
+ <div class="compose-item-desc">adds motion</div>
951
+ </div>
952
+ <div class="compose-arrow">+</div>
953
+ <div class="compose-item">
954
+ <div class="compose-item-tag">&lt;Speech /&gt;</div>
955
+ <div class="compose-item-desc">generates audio</div>
956
+ </div>
957
+ <div class="compose-equals">=</div>
958
+ <div class="compose-item compose-result">
959
+ <div class="compose-item-tag">TalkingHead</div>
960
+ <div class="compose-item-desc">full character video</div>
961
+ </div>
962
+ </div>
963
+ </div>
964
+ </section>
965
+
966
+ <section class="examples" id="examples">
967
+ <div class="container">
968
+ <span class="section-label">Examples</span>
969
+ <h2 class="section-title">See it in action</h2>
970
+ <p class="section-desc">Real patterns from production. Copy, paste, render.</p>
971
+
972
+ <div class="examples-grid">
973
+ <div class="example-card">
974
+ <div class="example-header">
975
+ <div class="example-icon">
976
+ <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 1 0-16 0"/></svg>
977
+ </div>
978
+ <span class="example-title">Talking Head</span>
979
+ </div>
980
+ <div class="example-code">
981
+ <pre><span class="kw">const</span> <span class="fn">TalkingHead</span> = ({ <span class="attr">character</span>, <span class="attr">voice</span>, <span class="attr">children</span> }) =&gt; (
982
+ &lt;&gt;
983
+ &lt;<span class="tag">Animate</span>
984
+ <span class="attr">image</span>=<span class="op">{</span>&lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="op">{</span>character<span class="op">}</span> /&gt;<span class="op">}</span>
985
+ <span class="attr">motion</span>=<span class="str">"talking, blinking"</span>
986
+ /&gt;
987
+ &lt;<span class="tag">Speech</span> <span class="attr">voice</span>=<span class="op">{</span>voice<span class="op">}</span>&gt;<span class="op">{</span>children<span class="op">}</span>&lt;/<span class="tag">Speech</span>&gt;
988
+ &lt;/&gt;
989
+ );
990
+
991
+ &lt;<span class="tag">Clip</span> <span class="attr">duration</span>=<span class="str">"auto"</span>&gt;
992
+ &lt;<span class="tag">TalkingHead</span> <span class="attr">character</span>=<span class="str">"news anchor"</span> <span class="attr">voice</span>=<span class="str">"adam"</span>&gt;
993
+ Breaking news from the studio...
994
+ &lt;/<span class="tag">TalkingHead</span>&gt;
995
+ &lt;/<span class="tag">Clip</span>&gt;</pre>
996
+ </div>
997
+ </div>
998
+
999
+ <div class="example-card">
1000
+ <div class="example-header">
1001
+ <div class="example-icon">
1002
+ <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
1003
+ </div>
1004
+ <span class="example-title">Split Screen</span>
1005
+ </div>
1006
+ <div class="example-code">
1007
+ <pre><span class="kw">const</span> before = &lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"before state"</span> /&gt;;
1008
+ <span class="kw">const</span> after = &lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"after state"</span> /&gt;;
1009
+
1010
+ &lt;<span class="tag">Render</span> <span class="attr">width</span>=<span class="op">{</span><span class="num">1920</span><span class="op">}</span> <span class="attr">height</span>=<span class="op">{</span><span class="num">1080</span><span class="op">}</span>&gt;
1011
+ &lt;<span class="tag">Clip</span> <span class="attr">duration</span>=<span class="op">{</span><span class="num">5</span><span class="op">}</span>&gt;
1012
+ &lt;<span class="tag">Split</span> <span class="attr">left</span>=<span class="op">{</span>before<span class="op">}</span> <span class="attr">right</span>=<span class="op">{</span>after<span class="op">}</span> /&gt;
1013
+ &lt;<span class="tag">Title</span> <span class="attr">position</span>=<span class="str">"bottom"</span>&gt;
1014
+ 30 Day Transformation
1015
+ &lt;/<span class="tag">Title</span>&gt;
1016
+ &lt;/<span class="tag">Clip</span>&gt;
1017
+ &lt;/<span class="tag">Render</span>&gt;</pre>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <div class="example-card">
1022
+ <div class="example-header">
1023
+ <div class="example-icon">
1024
+ <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M12 12h.01"/><path d="M17 12h.01"/><path d="M7 12h.01"/></svg>
1025
+ </div>
1026
+ <span class="example-title">Slideshow</span>
1027
+ </div>
1028
+ <div class="example-code">
1029
+ <pre><span class="kw">const</span> scenes = [<span class="str">"sunset"</span>, <span class="str">"mountains"</span>, <span class="str">"ocean"</span>];
1030
+
1031
+ &lt;<span class="tag">Render</span>&gt;
1032
+ &lt;<span class="tag">Music</span> <span class="attr">prompt</span>=<span class="str">"ambient, peaceful"</span> <span class="attr">loop</span> /&gt;
1033
+
1034
+ <span class="op">{</span>scenes.<span class="fn">map</span>((scene, i) =&gt; (
1035
+ &lt;<span class="tag">Clip</span>
1036
+ <span class="attr">key</span>=<span class="op">{</span>i<span class="op">}</span>
1037
+ <span class="attr">duration</span>=<span class="op">{</span><span class="num">3</span><span class="op">}</span>
1038
+ <span class="attr">transition</span>=<span class="op">{{</span> <span class="attr">name</span>: <span class="str">"fade"</span> <span class="op">}}</span>
1039
+ &gt;
1040
+ &lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="op">{</span>scene<span class="op">}</span> <span class="attr">zoom</span>=<span class="str">"in"</span> /&gt;
1041
+ &lt;/<span class="tag">Clip</span>&gt;
1042
+ ))<span class="op">}</span>
1043
+ &lt;/<span class="tag">Render</span>&gt;</pre>
1044
+ </div>
1045
+ </div>
1046
+
1047
+ <div class="example-card">
1048
+ <div class="example-header">
1049
+ <div class="example-icon">
1050
+ <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
1051
+ </div>
1052
+ <span class="example-title">Before/After Slider</span>
1053
+ </div>
1054
+ <div class="example-code">
1055
+ <pre>&lt;<span class="tag">Clip</span> <span class="attr">duration</span>=<span class="op">{</span><span class="num">5</span><span class="op">}</span>&gt;
1056
+ &lt;<span class="tag">Slider</span> <span class="attr">direction</span>=<span class="str">"horizontal"</span>&gt;
1057
+ &lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"old photo, faded"</span> /&gt;
1058
+ &lt;<span class="tag">Image</span> <span class="attr">prompt</span>=<span class="str">"restored photo, vibrant"</span> /&gt;
1059
+ &lt;/<span class="tag">Slider</span>&gt;
1060
+
1061
+ &lt;<span class="tag">Title</span> <span class="attr">position</span>=<span class="str">"top"</span>&gt;
1062
+ AI Photo Restoration
1063
+ &lt;/<span class="tag">Title</span>&gt;
1064
+ &lt;/<span class="tag">Clip</span>&gt;</pre>
1065
+ </div>
1066
+ </div>
1067
+ </div>
1068
+ </div>
1069
+ </section>
1070
+
1071
+ <footer>
1072
+ <div class="container">
1073
+ <div class="footer-content">
1074
+ <div class="footer-logo">
1075
+ <div class="logo-icon">
1076
+ <svg viewBox="0 0 24 24"><polygon points="12,2 22,22 2,22" fill="white"/></svg>
1077
+ </div>
1078
+ varg-react
1079
+ </div>
1080
+ <div class="footer-links">
1081
+ <a href="https://github.com/varghq/sdk">GitHub</a>
1082
+ <a href="#">Docs</a>
1083
+ <a href="#">Discord</a>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ </footer>
1088
+
1089
+ <script>
1090
+ // Smooth reveal animations on scroll
1091
+ const observerOptions = {
1092
+ threshold: 0.1,
1093
+ rootMargin: '0px 0px -50px 0px'
1094
+ };
1095
+
1096
+ const observer = new IntersectionObserver((entries) => {
1097
+ entries.forEach(entry => {
1098
+ if (entry.isIntersecting) {
1099
+ entry.target.style.opacity = '1';
1100
+ entry.target.style.transform = 'translateY(0)';
1101
+ }
1102
+ });
1103
+ }, observerOptions);
1104
+
1105
+ document.querySelectorAll('.pillar, .example-card, .compose-item').forEach(el => {
1106
+ el.style.opacity = '0';
1107
+ el.style.transform = 'translateY(20px)';
1108
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1109
+ observer.observe(el);
1110
+ });
1111
+
1112
+ // Stagger animation for pillars
1113
+ document.querySelectorAll('.pillar').forEach((el, i) => {
1114
+ el.style.transitionDelay = `${i * 0.1}s`;
1115
+ });
1116
+
1117
+ // Copy command on click
1118
+ document.querySelector('.hero-cmd').addEventListener('click', function() {
1119
+ const text = this.querySelector('.hero-cmd-text').textContent;
1120
+ navigator.clipboard.writeText(text).then(() => {
1121
+ const copyIcon = this.querySelector('.hero-cmd-copy');
1122
+ copyIcon.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
1123
+ setTimeout(() => {
1124
+ copyIcon.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
1125
+ }, 2000);
1126
+ });
1127
+ });
1128
+ </script>
1129
+ </body>
1130
+ </html>