loopwind 0.22.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (486) hide show
  1. package/README.md +13 -117
  2. package/dist/cli.js +16 -10
  3. package/dist/cli.js.map +1 -1
  4. package/dist/commands/add.d.ts.map +1 -1
  5. package/dist/commands/add.js +6 -10
  6. package/dist/commands/add.js.map +1 -1
  7. package/dist/commands/agent.d.ts +8 -0
  8. package/dist/commands/agent.d.ts.map +1 -0
  9. package/dist/commands/agent.js +101 -0
  10. package/dist/commands/agent.js.map +1 -0
  11. package/dist/commands/init.d.ts.map +1 -1
  12. package/dist/commands/init.js +17 -7
  13. package/dist/commands/init.js.map +1 -1
  14. package/dist/commands/render.d.ts.map +1 -1
  15. package/dist/commands/render.js +17 -19
  16. package/dist/commands/render.js.map +1 -1
  17. package/dist/default-templates/AGENTS.md +10 -24
  18. package/dist/lib/config.d.ts +2 -3
  19. package/dist/lib/config.d.ts.map +1 -1
  20. package/dist/lib/config.js +4 -9
  21. package/dist/lib/config.js.map +1 -1
  22. package/dist/lib/constants.d.ts +1 -3
  23. package/dist/lib/constants.d.ts.map +1 -1
  24. package/dist/lib/constants.js +2 -4
  25. package/dist/lib/constants.js.map +1 -1
  26. package/dist/lib/installer.d.ts +2 -0
  27. package/dist/lib/installer.d.ts.map +1 -1
  28. package/dist/lib/installer.js +6 -7
  29. package/dist/lib/installer.js.map +1 -1
  30. package/dist/lib/renderer.d.ts.map +1 -1
  31. package/dist/lib/renderer.js +14 -8
  32. package/dist/lib/renderer.js.map +1 -1
  33. package/dist/lib/resvg-init.d.ts +15 -0
  34. package/dist/lib/resvg-init.d.ts.map +1 -0
  35. package/dist/lib/resvg-init.js +55 -0
  36. package/dist/lib/resvg-init.js.map +1 -0
  37. package/dist/lib/tailwind/colors.d.ts +8 -0
  38. package/dist/lib/tailwind/colors.d.ts.map +1 -0
  39. package/dist/lib/tailwind/colors.js +102 -0
  40. package/dist/lib/tailwind/colors.js.map +1 -0
  41. package/dist/lib/tailwind/index.d.ts +10 -0
  42. package/dist/lib/tailwind/index.d.ts.map +1 -0
  43. package/dist/lib/tailwind/index.js +9 -0
  44. package/dist/lib/tailwind/index.js.map +1 -0
  45. package/dist/lib/tailwind/resolvers.d.ts +28 -0
  46. package/dist/lib/tailwind/resolvers.d.ts.map +1 -0
  47. package/dist/lib/tailwind/resolvers.js +94 -0
  48. package/dist/lib/tailwind/resolvers.js.map +1 -0
  49. package/dist/lib/tailwind/types.d.ts +29 -0
  50. package/dist/lib/tailwind/types.d.ts.map +1 -0
  51. package/dist/lib/tailwind/types.js +8 -0
  52. package/dist/lib/tailwind/types.js.map +1 -0
  53. package/dist/lib/tailwind-config-loader.d.ts +8 -45
  54. package/dist/lib/tailwind-config-loader.d.ts.map +1 -1
  55. package/dist/lib/tailwind-config-loader.js +6 -429
  56. package/dist/lib/tailwind-config-loader.js.map +1 -1
  57. package/dist/lib/tailwind.d.ts +1 -1
  58. package/dist/lib/tailwind.d.ts.map +1 -1
  59. package/dist/lib/tailwind.js +1 -1
  60. package/dist/lib/tailwind.js.map +1 -1
  61. package/dist/lib/utils.d.ts +13 -29
  62. package/dist/lib/utils.d.ts.map +1 -1
  63. package/dist/lib/utils.js +45 -155
  64. package/dist/lib/utils.js.map +1 -1
  65. package/dist/lib/video-renderer.d.ts.map +1 -1
  66. package/dist/lib/video-renderer.js +6 -5
  67. package/dist/lib/video-renderer.js.map +1 -1
  68. package/dist/types/config.d.ts +0 -2
  69. package/dist/types/config.d.ts.map +1 -1
  70. package/dist/types/config.js.map +1 -1
  71. package/package.json +2 -12
  72. package/REGISTRY_SETUP.md +0 -363
  73. package/_dsgn/templates/dashed-stroke-test/template.tsx +0 -73
  74. package/_dsgn/templates/path-follow-test/template.tsx +0 -176
  75. package/_dsgn/templates/path-simple-test/template.tsx +0 -98
  76. package/_dsgn/templates/stroke-dash-test/meta.json +0 -12
  77. package/_dsgn/templates/stroke-dash-test/template.tsx +0 -53
  78. package/dist/default-templates/image/template.d.ts +0 -20
  79. package/dist/default-templates/image/template.d.ts.map +0 -1
  80. package/dist/default-templates/image/template.js +0 -18
  81. package/dist/default-templates/image/template.js.map +0 -1
  82. package/dist/default-templates/image/template.tsx +0 -20
  83. package/dist/default-templates/kitchen-sink/template.tsx +0 -64
  84. package/dist/default-templates/page/template.tsx +0 -37
  85. package/dist/default-templates/video/template.d.ts +0 -26
  86. package/dist/default-templates/video/template.d.ts.map +0 -1
  87. package/dist/default-templates/video/template.js +0 -33
  88. package/dist/default-templates/video/template.js.map +0 -1
  89. package/dist/default-templates/video/template.tsx +0 -37
  90. package/dist/default-templates/website/pages/home.tsx +0 -17
  91. package/dist/default-templates/website/parts/footer.tsx +0 -17
  92. package/dist/default-templates/website/parts/header.tsx +0 -17
  93. package/dist/default-templates/website/template.tsx +0 -17
  94. package/dist/default-templates/website-template/pages/home.tsx +0 -13
  95. package/dist/default-templates/website-template/parts/footer.tsx +0 -15
  96. package/dist/default-templates/website-template/parts/header.tsx +0 -15
  97. package/dist/default-templates/website-template/template.tsx +0 -32
  98. package/dist/lib/encode-worker.d.ts +0 -2
  99. package/dist/lib/encode-worker.d.ts.map +0 -1
  100. package/dist/lib/encode-worker.js +0 -29
  101. package/dist/lib/encode-worker.js.map +0 -1
  102. package/dist/lib/mjpeg-muxer.d.ts +0 -46
  103. package/dist/lib/mjpeg-muxer.d.ts.map +0 -1
  104. package/dist/lib/mjpeg-muxer.js +0 -513
  105. package/dist/lib/mjpeg-muxer.js.map +0 -1
  106. package/dist/lib/tailwind-browser.d.ts +0 -27
  107. package/dist/lib/tailwind-browser.d.ts.map +0 -1
  108. package/dist/lib/tailwind-browser.js +0 -853
  109. package/dist/lib/tailwind-browser.js.map +0 -1
  110. package/dist/lib/video-player.d.ts +0 -25
  111. package/dist/lib/video-player.d.ts.map +0 -1
  112. package/dist/lib/video-player.js +0 -392
  113. package/dist/lib/video-player.js.map +0 -1
  114. package/dist/sdk/compiler.d.ts +0 -94
  115. package/dist/sdk/compiler.d.ts.map +0 -1
  116. package/dist/sdk/compiler.js +0 -122
  117. package/dist/sdk/compiler.js.map +0 -1
  118. package/dist/sdk/index.d.ts +0 -62
  119. package/dist/sdk/index.d.ts.map +0 -1
  120. package/dist/sdk/index.js +0 -141
  121. package/dist/sdk/index.js.map +0 -1
  122. package/dist/sdk/preview.d.ts +0 -65
  123. package/dist/sdk/preview.d.ts.map +0 -1
  124. package/dist/sdk/preview.js +0 -262
  125. package/dist/sdk/preview.js.map +0 -1
  126. package/dist/sdk/template.d.ts +0 -162
  127. package/dist/sdk/template.d.ts.map +0 -1
  128. package/dist/sdk/template.js +0 -231
  129. package/dist/sdk/template.js.map +0 -1
  130. package/examples/code-editor-templates.ts +0 -173
  131. package/examples/nextjs-api/README.md +0 -180
  132. package/examples/nextjs-api/package.json +0 -21
  133. package/examples/nextjs-api/pages/api/intro-video.ts +0 -53
  134. package/examples/nextjs-api/pages/api/og-image.ts +0 -50
  135. package/examples/nextjs-template-import.ts +0 -58
  136. package/examples/sdk-video-preview.tsx +0 -120
  137. package/examples/template-compiler-workflow.ts +0 -251
  138. package/examples/visual-builder-templates.ts +0 -336
  139. package/render-examples-600x400.mjs +0 -161
  140. package/render-spring-variants-fixed.mjs +0 -60
  141. package/render-staggered-text.mjs +0 -56
  142. package/test-font-files.mjs +0 -72
  143. package/test-jsx-support.mjs +0 -146
  144. package/test-sdk-config.mjs +0 -454
  145. package/test-sdk-source-config.mjs +0 -427
  146. package/test-sdk-user-templates.mjs +0 -469
  147. package/test-static-debug.tsx +0 -19
  148. package/test-templates/TESTS.md +0 -63
  149. package/test-templates/config-test.mjs +0 -17
  150. package/test-templates/demo-intro-props.json +0 -4
  151. package/test-templates/run-tests.sh +0 -44
  152. package/test-templates/test-sdk.mjs +0 -139
  153. package/test-video-props.json +0 -3
  154. package/website/.astro/content.db +0 -0
  155. package/website/.astro/integrations/_inox-tools_astro-when/types.d.ts +0 -1
  156. package/website/.astro/integrations/astro_db/db.d.ts +0 -15
  157. package/website/.astro/settings.json +0 -5
  158. package/website/.astro/types.d.ts +0 -2
  159. package/website/DEPLOYMENT.md +0 -143
  160. package/website/OG_IMAGES.md +0 -142
  161. package/website/README.md +0 -158
  162. package/website/astro.config.mjs +0 -46
  163. package/website/dist/.gitkeep +0 -5
  164. package/website/dist/_astro/agents.Yx-L_igG.css +0 -1
  165. package/website/dist/_routes.json +0 -30
  166. package/website/dist/_worker.js/_@astrojs-ssr-adapter.mjs +0 -1033
  167. package/website/dist/_worker.js/_astro-internal_middleware.mjs +0 -40
  168. package/website/dist/_worker.js/chunks/abap_BTmsHiP5.mjs +0 -1
  169. package/website/dist/_worker.js/chunks/actionscript-3_DmBelb1E.mjs +0 -1
  170. package/website/dist/_worker.js/chunks/ada_8-E0ahCN.mjs +0 -1
  171. package/website/dist/_worker.js/chunks/andromeeda_XI-CXx50.mjs +0 -1
  172. package/website/dist/_worker.js/chunks/angular-html_DKGh3gGH.mjs +0 -1
  173. package/website/dist/_worker.js/chunks/angular-ts_-qZGsJoA.mjs +0 -1
  174. package/website/dist/_worker.js/chunks/apache_ijTUt0Ee.mjs +0 -1
  175. package/website/dist/_worker.js/chunks/apex_agu1c6Sh.mjs +0 -1
  176. package/website/dist/_worker.js/chunks/apl_Bj2f7Art.mjs +0 -1
  177. package/website/dist/_worker.js/chunks/applescript_B_vXrOh3.mjs +0 -1
  178. package/website/dist/_worker.js/chunks/ara_DCEQ2rnh.mjs +0 -1
  179. package/website/dist/_worker.js/chunks/asciidoc_CGN_EkYS.mjs +0 -1
  180. package/website/dist/_worker.js/chunks/asm_BBWZgnDp.mjs +0 -1
  181. package/website/dist/_worker.js/chunks/astro/assets-service_j52rQLzU.mjs +0 -721
  182. package/website/dist/_worker.js/chunks/astro/server_Y5_QHO8v.mjs +0 -2401
  183. package/website/dist/_worker.js/chunks/astro-designed-error-pages_BNTLO-TA.mjs +0 -542
  184. package/website/dist/_worker.js/chunks/astro_Dr_hht3h.mjs +0 -1
  185. package/website/dist/_worker.js/chunks/aurora-x_9GHG8nSq.mjs +0 -1
  186. package/website/dist/_worker.js/chunks/awk_DHRvhXot.mjs +0 -1
  187. package/website/dist/_worker.js/chunks/ayu-dark_CcvqmEHE.mjs +0 -1
  188. package/website/dist/_worker.js/chunks/ballerina_C7SdeSZb.mjs +0 -1
  189. package/website/dist/_worker.js/chunks/bat_Dv4A3u45.mjs +0 -1
  190. package/website/dist/_worker.js/chunks/beancount_BfPf9Luv.mjs +0 -1
  191. package/website/dist/_worker.js/chunks/berry_B8rfM3lL.mjs +0 -1
  192. package/website/dist/_worker.js/chunks/bibtex_TcjYgtJM.mjs +0 -1
  193. package/website/dist/_worker.js/chunks/bicep_CrlFWCdN.mjs +0 -1
  194. package/website/dist/_worker.js/chunks/blade_lanKVYID.mjs +0 -1
  195. package/website/dist/_worker.js/chunks/bsl_BhppzXMB.mjs +0 -1
  196. package/website/dist/_worker.js/chunks/c_6FBALJTK.mjs +0 -1
  197. package/website/dist/_worker.js/chunks/cadence_2txU9LVE.mjs +0 -1
  198. package/website/dist/_worker.js/chunks/cairo_BkrFAIlP.mjs +0 -1
  199. package/website/dist/_worker.js/chunks/catppuccin-frappe_CkEqIYhU.mjs +0 -1
  200. package/website/dist/_worker.js/chunks/catppuccin-latte_DG4Gx_-v.mjs +0 -1
  201. package/website/dist/_worker.js/chunks/catppuccin-macchiato_Cwi3vCXf.mjs +0 -1
  202. package/website/dist/_worker.js/chunks/catppuccin-mocha_L9_OPlFX.mjs +0 -1
  203. package/website/dist/_worker.js/chunks/clarity_BEAe4Ulu.mjs +0 -1
  204. package/website/dist/_worker.js/chunks/clojure_VnUX6p2g.mjs +0 -1
  205. package/website/dist/_worker.js/chunks/cmake_0-SGkZEj.mjs +0 -1
  206. package/website/dist/_worker.js/chunks/cobol_92M_KGaE.mjs +0 -1
  207. package/website/dist/_worker.js/chunks/codeowners_CzMwskBv.mjs +0 -1
  208. package/website/dist/_worker.js/chunks/codeql_DWJZNHv1.mjs +0 -1
  209. package/website/dist/_worker.js/chunks/coffee_CQjKU2fh.mjs +0 -1
  210. package/website/dist/_worker.js/chunks/common-lisp_BBLWDpS5.mjs +0 -1
  211. package/website/dist/_worker.js/chunks/coq_hedRFV3D.mjs +0 -1
  212. package/website/dist/_worker.js/chunks/cpp_DlS1i6Zs.mjs +0 -1
  213. package/website/dist/_worker.js/chunks/crystal_D6n65fKV.mjs +0 -1
  214. package/website/dist/_worker.js/chunks/csharp_C6FCVFzc.mjs +0 -1
  215. package/website/dist/_worker.js/chunks/css_C5uJEgmJ.mjs +0 -1
  216. package/website/dist/_worker.js/chunks/csv_CtMYuuJl.mjs +0 -1
  217. package/website/dist/_worker.js/chunks/cue_BsPexqx6.mjs +0 -1
  218. package/website/dist/_worker.js/chunks/cypher_apzf6OBi.mjs +0 -1
  219. package/website/dist/_worker.js/chunks/d_DcvIRcgm.mjs +0 -1
  220. package/website/dist/_worker.js/chunks/dark-plus_C01ONtzj.mjs +0 -1
  221. package/website/dist/_worker.js/chunks/dart_WkzM5WrV.mjs +0 -1
  222. package/website/dist/_worker.js/chunks/dax_DjXAO5V4.mjs +0 -1
  223. package/website/dist/_worker.js/chunks/desktop_C92LCxdc.mjs +0 -1
  224. package/website/dist/_worker.js/chunks/diff_CVwM_9XJ.mjs +0 -1
  225. package/website/dist/_worker.js/chunks/docker_DPzgJf6Z.mjs +0 -1
  226. package/website/dist/_worker.js/chunks/dotenv_D_vgANvA.mjs +0 -1
  227. package/website/dist/_worker.js/chunks/dracula-soft_CLnUBwFm.mjs +0 -1
  228. package/website/dist/_worker.js/chunks/dracula_lBVpb6Lb.mjs +0 -1
  229. package/website/dist/_worker.js/chunks/dream-maker_DTLbzd_J.mjs +0 -1
  230. package/website/dist/_worker.js/chunks/edge_i54JYm3_.mjs +0 -1
  231. package/website/dist/_worker.js/chunks/elixir_BJCIjTu4.mjs +0 -1
  232. package/website/dist/_worker.js/chunks/elm_BbXD39-_.mjs +0 -1
  233. package/website/dist/_worker.js/chunks/emacs-lisp_pxa5cXaN.mjs +0 -1
  234. package/website/dist/_worker.js/chunks/erb_Ccjijeee.mjs +0 -1
  235. package/website/dist/_worker.js/chunks/erlang_B2VM_hi7.mjs +0 -1
  236. package/website/dist/_worker.js/chunks/everforest-dark_BxvIPBim.mjs +0 -1
  237. package/website/dist/_worker.js/chunks/everforest-light_B7VoyaJM.mjs +0 -1
  238. package/website/dist/_worker.js/chunks/fennel_D-uo7X6c.mjs +0 -1
  239. package/website/dist/_worker.js/chunks/fish_BjePoK3m.mjs +0 -1
  240. package/website/dist/_worker.js/chunks/fluent_C8fgkzLX.mjs +0 -1
  241. package/website/dist/_worker.js/chunks/fortran-fixed-form_D1pu5zrc.mjs +0 -1
  242. package/website/dist/_worker.js/chunks/fortran-free-form_CSGOhJD6.mjs +0 -1
  243. package/website/dist/_worker.js/chunks/fsharp_B0xy-A4Y.mjs +0 -1
  244. package/website/dist/_worker.js/chunks/gdresource_CWppjlHq.mjs +0 -1
  245. package/website/dist/_worker.js/chunks/gdscript_eQCHchcS.mjs +0 -1
  246. package/website/dist/_worker.js/chunks/gdshader_C4kxepX7.mjs +0 -1
  247. package/website/dist/_worker.js/chunks/genie_ACtQLcDW.mjs +0 -1
  248. package/website/dist/_worker.js/chunks/gherkin_BFp2uKUd.mjs +0 -1
  249. package/website/dist/_worker.js/chunks/git-commit_CLg9ZwMV.mjs +0 -1
  250. package/website/dist/_worker.js/chunks/git-rebase_DG8A80Nt.mjs +0 -1
  251. package/website/dist/_worker.js/chunks/github-dark-default_BI0EP2Kv.mjs +0 -1
  252. package/website/dist/_worker.js/chunks/github-dark-dimmed_a_NIC0Xb.mjs +0 -1
  253. package/website/dist/_worker.js/chunks/github-dark-high-contrast_jZGqT7hk.mjs +0 -1
  254. package/website/dist/_worker.js/chunks/github-dark_CHCDNd2O.mjs +0 -1
  255. package/website/dist/_worker.js/chunks/github-light-default_DRbOW5RG.mjs +0 -1
  256. package/website/dist/_worker.js/chunks/github-light-high-contrast_tn_kWutM.mjs +0 -1
  257. package/website/dist/_worker.js/chunks/github-light_D9brYzot.mjs +0 -1
  258. package/website/dist/_worker.js/chunks/gleam_Dmhu1oxW.mjs +0 -1
  259. package/website/dist/_worker.js/chunks/glimmer-js_BfZbXy8A.mjs +0 -1
  260. package/website/dist/_worker.js/chunks/glimmer-ts_B9QVICrD.mjs +0 -1
  261. package/website/dist/_worker.js/chunks/glsl_DD2PPwOs.mjs +0 -1
  262. package/website/dist/_worker.js/chunks/gnuplot_D2OYChUX.mjs +0 -1
  263. package/website/dist/_worker.js/chunks/go_DYGFTe3h.mjs +0 -1
  264. package/website/dist/_worker.js/chunks/graphql_B7XsT3nH.mjs +0 -1
  265. package/website/dist/_worker.js/chunks/groovy_BO12Uwkl.mjs +0 -1
  266. package/website/dist/_worker.js/chunks/hack_CB2_ztCP.mjs +0 -1
  267. package/website/dist/_worker.js/chunks/haml_CyfDcDD3.mjs +0 -1
  268. package/website/dist/_worker.js/chunks/handlebars_CfpxpWm2.mjs +0 -1
  269. package/website/dist/_worker.js/chunks/haskell_jUeC5uN5.mjs +0 -1
  270. package/website/dist/_worker.js/chunks/haxe_B6GxP1WB.mjs +0 -1
  271. package/website/dist/_worker.js/chunks/hcl_DwoHV2oh.mjs +0 -1
  272. package/website/dist/_worker.js/chunks/hjson_DV7cJRk4.mjs +0 -1
  273. package/website/dist/_worker.js/chunks/hlsl_BlFCscPI.mjs +0 -1
  274. package/website/dist/_worker.js/chunks/houston_COBFG1Mx.mjs +0 -1
  275. package/website/dist/_worker.js/chunks/html-derivative_C9pJ337h.mjs +0 -1
  276. package/website/dist/_worker.js/chunks/html_D1OkrZS5.mjs +0 -1
  277. package/website/dist/_worker.js/chunks/http_DIGXRqvJ.mjs +0 -1
  278. package/website/dist/_worker.js/chunks/hxml_DEwh9i-c.mjs +0 -1
  279. package/website/dist/_worker.js/chunks/hy_DDoIgW1K.mjs +0 -1
  280. package/website/dist/_worker.js/chunks/imba_B00zbHo4.mjs +0 -1
  281. package/website/dist/_worker.js/chunks/index_C1UTDwYg.mjs +0 -1861
  282. package/website/dist/_worker.js/chunks/ini_D7XQA_p8.mjs +0 -1
  283. package/website/dist/_worker.js/chunks/java_B9wdFd8K.mjs +0 -1
  284. package/website/dist/_worker.js/chunks/javascript_CLsPGOON.mjs +0 -1
  285. package/website/dist/_worker.js/chunks/jinja_jarBCAN1.mjs +0 -1
  286. package/website/dist/_worker.js/chunks/jison_oGg3J708.mjs +0 -1
  287. package/website/dist/_worker.js/chunks/json5_DlZ1Kyaa.mjs +0 -1
  288. package/website/dist/_worker.js/chunks/json_DaYk_FMp.mjs +0 -1
  289. package/website/dist/_worker.js/chunks/jsonc_DlwgfSDs.mjs +0 -1
  290. package/website/dist/_worker.js/chunks/jsonl_BbCCVaZF.mjs +0 -1
  291. package/website/dist/_worker.js/chunks/jsonnet_Dt-G75xe.mjs +0 -1
  292. package/website/dist/_worker.js/chunks/jssm_BtKFTj2A.mjs +0 -1
  293. package/website/dist/_worker.js/chunks/jsx_DDx_xAZ8.mjs +0 -1
  294. package/website/dist/_worker.js/chunks/julia_CK0lv68l.mjs +0 -1
  295. package/website/dist/_worker.js/chunks/kanagawa-dragon_BldAK3Oo.mjs +0 -1
  296. package/website/dist/_worker.js/chunks/kanagawa-lotus_DVM8FX9_.mjs +0 -1
  297. package/website/dist/_worker.js/chunks/kanagawa-wave_Dpih0AKP.mjs +0 -1
  298. package/website/dist/_worker.js/chunks/kotlin_kWneB9V_.mjs +0 -1
  299. package/website/dist/_worker.js/chunks/kusto_BKVATd95.mjs +0 -1
  300. package/website/dist/_worker.js/chunks/laserwave_BqatxsVl.mjs +0 -1
  301. package/website/dist/_worker.js/chunks/latex_LVDcGBbc.mjs +0 -1
  302. package/website/dist/_worker.js/chunks/lean_W7qo-5M2.mjs +0 -1
  303. package/website/dist/_worker.js/chunks/less_DFNwJnBH.mjs +0 -1
  304. package/website/dist/_worker.js/chunks/light-plus_Dp0AoWsO.mjs +0 -1
  305. package/website/dist/_worker.js/chunks/liquid_D24qs0pc.mjs +0 -1
  306. package/website/dist/_worker.js/chunks/log_IPWMXriF.mjs +0 -1
  307. package/website/dist/_worker.js/chunks/logo_C6KaatrQ.mjs +0 -1
  308. package/website/dist/_worker.js/chunks/lua_CwnEf-T7.mjs +0 -1
  309. package/website/dist/_worker.js/chunks/luau_Br3-CXjS.mjs +0 -1
  310. package/website/dist/_worker.js/chunks/make_UBNG-kOo.mjs +0 -1
  311. package/website/dist/_worker.js/chunks/markdown_C7mhJFCm.mjs +0 -1
  312. package/website/dist/_worker.js/chunks/marko_4tchUvI7.mjs +0 -1
  313. package/website/dist/_worker.js/chunks/material-theme-darker_SKtaNEPn.mjs +0 -1
  314. package/website/dist/_worker.js/chunks/material-theme-lighter_zOX_DZCH.mjs +0 -1
  315. package/website/dist/_worker.js/chunks/material-theme-ocean_BN9WbhdC.mjs +0 -1
  316. package/website/dist/_worker.js/chunks/material-theme-palenight_DT_covjH.mjs +0 -1
  317. package/website/dist/_worker.js/chunks/material-theme_6RpeM3kc.mjs +0 -1
  318. package/website/dist/_worker.js/chunks/matlab_DCOXsPKR.mjs +0 -1
  319. package/website/dist/_worker.js/chunks/mdc_B9gb2UFP.mjs +0 -1
  320. package/website/dist/_worker.js/chunks/mdx_DGU7Nu9u.mjs +0 -1
  321. package/website/dist/_worker.js/chunks/mermaid_B69URzsZ.mjs +0 -1
  322. package/website/dist/_worker.js/chunks/min-dark_BgxifOMI.mjs +0 -1
  323. package/website/dist/_worker.js/chunks/min-light_BrPjXxUp.mjs +0 -1
  324. package/website/dist/_worker.js/chunks/mipsasm_9U-4_t7k.mjs +0 -1
  325. package/website/dist/_worker.js/chunks/mojo_B0wt7ug3.mjs +0 -1
  326. package/website/dist/_worker.js/chunks/monokai_B6Pxpoyi.mjs +0 -1
  327. package/website/dist/_worker.js/chunks/move_1eid4CyR.mjs +0 -1
  328. package/website/dist/_worker.js/chunks/narrat_Ds6-p5JZ.mjs +0 -1
  329. package/website/dist/_worker.js/chunks/nextflow_v2N1Qlqa.mjs +0 -1
  330. package/website/dist/_worker.js/chunks/nginx_Bp9Ab2NH.mjs +0 -1
  331. package/website/dist/_worker.js/chunks/night-owl_CdwOw_sc.mjs +0 -1
  332. package/website/dist/_worker.js/chunks/nim_BXGDUe53.mjs +0 -1
  333. package/website/dist/_worker.js/chunks/nix_CUig1nJH.mjs +0 -1
  334. package/website/dist/_worker.js/chunks/noop-middleware_DlWGj5t5.mjs +0 -10
  335. package/website/dist/_worker.js/chunks/nord_SPoG1iae.mjs +0 -1
  336. package/website/dist/_worker.js/chunks/nushell_DJw1Lca8.mjs +0 -1
  337. package/website/dist/_worker.js/chunks/objective-c_Bktzl_CO.mjs +0 -1
  338. package/website/dist/_worker.js/chunks/objective-cpp_CP4DWdDp.mjs +0 -1
  339. package/website/dist/_worker.js/chunks/ocaml_CeEAs7bZ.mjs +0 -1
  340. package/website/dist/_worker.js/chunks/one-dark-pro_-hIwCNMi.mjs +0 -1
  341. package/website/dist/_worker.js/chunks/one-light_DSmYvJ05.mjs +0 -1
  342. package/website/dist/_worker.js/chunks/pascal_C-S_Ms_o.mjs +0 -1
  343. package/website/dist/_worker.js/chunks/perl_CKamvo15.mjs +0 -1
  344. package/website/dist/_worker.js/chunks/php_BlmcX_F3.mjs +0 -1
  345. package/website/dist/_worker.js/chunks/plastic_Ryt8tVoA.mjs +0 -1
  346. package/website/dist/_worker.js/chunks/plsql_Cb3v7cBj.mjs +0 -1
  347. package/website/dist/_worker.js/chunks/po_DZbdNRlo.mjs +0 -1
  348. package/website/dist/_worker.js/chunks/poimandres_bYmE3_5d.mjs +0 -1
  349. package/website/dist/_worker.js/chunks/polar_pJkMGwoW.mjs +0 -1
  350. package/website/dist/_worker.js/chunks/postcss_BAXSOKgk.mjs +0 -1
  351. package/website/dist/_worker.js/chunks/powerquery_oITMGN4x.mjs +0 -1
  352. package/website/dist/_worker.js/chunks/powershell_6306-xIF.mjs +0 -1
  353. package/website/dist/_worker.js/chunks/prisma_DSDxnZGz.mjs +0 -1
  354. package/website/dist/_worker.js/chunks/prolog_CxG7tjZR.mjs +0 -1
  355. package/website/dist/_worker.js/chunks/proto_CS9ByXm1.mjs +0 -1
  356. package/website/dist/_worker.js/chunks/pug_BMtLJo6U.mjs +0 -1
  357. package/website/dist/_worker.js/chunks/puppet_BfeeSzee.mjs +0 -1
  358. package/website/dist/_worker.js/chunks/purescript_BFfueNaH.mjs +0 -1
  359. package/website/dist/_worker.js/chunks/python_Cc4Faapv.mjs +0 -1
  360. package/website/dist/_worker.js/chunks/qml_C1CTJTK8.mjs +0 -1
  361. package/website/dist/_worker.js/chunks/qmldir_nG1KaqKR.mjs +0 -1
  362. package/website/dist/_worker.js/chunks/qss_Cncxk263.mjs +0 -1
  363. package/website/dist/_worker.js/chunks/r_ChR54Ihi.mjs +0 -1
  364. package/website/dist/_worker.js/chunks/racket_BDrhptDs.mjs +0 -1
  365. package/website/dist/_worker.js/chunks/raku_07OUHa0P.mjs +0 -1
  366. package/website/dist/_worker.js/chunks/razor_DIP3INLa.mjs +0 -1
  367. package/website/dist/_worker.js/chunks/red_DOPXfj-6.mjs +0 -1
  368. package/website/dist/_worker.js/chunks/reg_B64SwEDj.mjs +0 -1
  369. package/website/dist/_worker.js/chunks/regexp_ButFGoB5.mjs +0 -1
  370. package/website/dist/_worker.js/chunks/rel_BWJAWqZD.mjs +0 -1
  371. package/website/dist/_worker.js/chunks/riscv_79gXlbsF.mjs +0 -1
  372. package/website/dist/_worker.js/chunks/rose-pine-dawn_DHIjVGd3.mjs +0 -1
  373. package/website/dist/_worker.js/chunks/rose-pine-moon_t86aEbs0.mjs +0 -1
  374. package/website/dist/_worker.js/chunks/rose-pine_BHgrcDCs.mjs +0 -1
  375. package/website/dist/_worker.js/chunks/rst_D3F4Fcpj.mjs +0 -1
  376. package/website/dist/_worker.js/chunks/ruby_Cs7vM9iv.mjs +0 -1
  377. package/website/dist/_worker.js/chunks/rust_DpyRVatH.mjs +0 -1
  378. package/website/dist/_worker.js/chunks/sas_DW45xZXN.mjs +0 -1
  379. package/website/dist/_worker.js/chunks/sass_C6SiMwN_.mjs +0 -1
  380. package/website/dist/_worker.js/chunks/scala_DlZOjNZk.mjs +0 -1
  381. package/website/dist/_worker.js/chunks/scheme_D2ezSJXu.mjs +0 -1
  382. package/website/dist/_worker.js/chunks/scss_DG5Spjqu.mjs +0 -1
  383. package/website/dist/_worker.js/chunks/sdbl_ZCYaj4VN.mjs +0 -1
  384. package/website/dist/_worker.js/chunks/shaderlab_CAcRkg1_.mjs +0 -1
  385. package/website/dist/_worker.js/chunks/shellscript_BWwhkDVh.mjs +0 -1
  386. package/website/dist/_worker.js/chunks/shellsession_BfEA3juK.mjs +0 -1
  387. package/website/dist/_worker.js/chunks/slack-dark_CL3lSpCc.mjs +0 -1
  388. package/website/dist/_worker.js/chunks/slack-ochin_DdZKOQVh.mjs +0 -1
  389. package/website/dist/_worker.js/chunks/smalltalk_DgilzSui.mjs +0 -1
  390. package/website/dist/_worker.js/chunks/snazzy-light_eJU08Pz_.mjs +0 -1
  391. package/website/dist/_worker.js/chunks/solarized-dark_Dg_YQywx.mjs +0 -1
  392. package/website/dist/_worker.js/chunks/solarized-light_BnIsrA6p.mjs +0 -1
  393. package/website/dist/_worker.js/chunks/solidity_DkseH8pQ.mjs +0 -1
  394. package/website/dist/_worker.js/chunks/soy_DU7bOYoG.mjs +0 -1
  395. package/website/dist/_worker.js/chunks/sparql_BuI1DBDH.mjs +0 -1
  396. package/website/dist/_worker.js/chunks/splunk_B8Ha9Pkg.mjs +0 -1
  397. package/website/dist/_worker.js/chunks/sql_BniHwea5.mjs +0 -1
  398. package/website/dist/_worker.js/chunks/ssh-config_CkE1GuVe.mjs +0 -1
  399. package/website/dist/_worker.js/chunks/stata_Dtqpbd_l.mjs +0 -1
  400. package/website/dist/_worker.js/chunks/stylus_CXTtglzO.mjs +0 -1
  401. package/website/dist/_worker.js/chunks/svelte_BjWYcUCN.mjs +0 -1
  402. package/website/dist/_worker.js/chunks/swift_BzHql_rM.mjs +0 -1
  403. package/website/dist/_worker.js/chunks/synthwave-84_DLRNhxNA.mjs +0 -1
  404. package/website/dist/_worker.js/chunks/system-verilog_ChyInPph.mjs +0 -1
  405. package/website/dist/_worker.js/chunks/systemd_Bi9Qa2qD.mjs +0 -1
  406. package/website/dist/_worker.js/chunks/talonscript_B3sH_Y-V.mjs +0 -1
  407. package/website/dist/_worker.js/chunks/tasl_BJ5yipRs.mjs +0 -1
  408. package/website/dist/_worker.js/chunks/tcl_CoJQjNoP.mjs +0 -1
  409. package/website/dist/_worker.js/chunks/templ_CrU7Ffil.mjs +0 -1
  410. package/website/dist/_worker.js/chunks/terraform_DT9JSFpC.mjs +0 -1
  411. package/website/dist/_worker.js/chunks/tex_5PKu2yA0.mjs +0 -1
  412. package/website/dist/_worker.js/chunks/tokyo-night_Buo8OK7-.mjs +0 -1
  413. package/website/dist/_worker.js/chunks/toml_CPuXX3oc.mjs +0 -1
  414. package/website/dist/_worker.js/chunks/ts-tags_D0M_1VSH.mjs +0 -1
  415. package/website/dist/_worker.js/chunks/tsv_CuivVNot.mjs +0 -1
  416. package/website/dist/_worker.js/chunks/tsx_MkuGr8MY.mjs +0 -1
  417. package/website/dist/_worker.js/chunks/turtle_BqgEPK7f.mjs +0 -1
  418. package/website/dist/_worker.js/chunks/twig_r1G9rpYJ.mjs +0 -1
  419. package/website/dist/_worker.js/chunks/typescript_Au5buqzM.mjs +0 -1
  420. package/website/dist/_worker.js/chunks/typespec_47rhBK_z.mjs +0 -1
  421. package/website/dist/_worker.js/chunks/typst_BAtuQLh-.mjs +0 -1
  422. package/website/dist/_worker.js/chunks/v_BIvWImHg.mjs +0 -1
  423. package/website/dist/_worker.js/chunks/vala_DYEacj30.mjs +0 -1
  424. package/website/dist/_worker.js/chunks/vb_CikQuqGJ.mjs +0 -1
  425. package/website/dist/_worker.js/chunks/verilog_BQRENwI-.mjs +0 -1
  426. package/website/dist/_worker.js/chunks/vesper_DA0kvTmj.mjs +0 -1
  427. package/website/dist/_worker.js/chunks/vhdl_DHscJIyg.mjs +0 -1
  428. package/website/dist/_worker.js/chunks/viml_F2pvMwvG.mjs +0 -1
  429. package/website/dist/_worker.js/chunks/vitesse-black_D9tjNzd0.mjs +0 -1
  430. package/website/dist/_worker.js/chunks/vitesse-dark_Bnm5d0hd.mjs +0 -1
  431. package/website/dist/_worker.js/chunks/vitesse-light_CHwbyjNR.mjs +0 -1
  432. package/website/dist/_worker.js/chunks/vue-html_DyYtbbMK.mjs +0 -1
  433. package/website/dist/_worker.js/chunks/vue_DofN6juy.mjs +0 -1
  434. package/website/dist/_worker.js/chunks/vyper_CiR0m-OV.mjs +0 -1
  435. package/website/dist/_worker.js/chunks/wasm_CwIGgRGf.mjs +0 -1
  436. package/website/dist/_worker.js/chunks/wasm_jKWhg0J0.mjs +0 -1
  437. package/website/dist/_worker.js/chunks/wenyan_DKvVZKXW.mjs +0 -1
  438. package/website/dist/_worker.js/chunks/wgsl_BOWZY7yw.mjs +0 -1
  439. package/website/dist/_worker.js/chunks/wikitext_CXDhhHPy.mjs +0 -1
  440. package/website/dist/_worker.js/chunks/wolfram_ChkmGnW0.mjs +0 -1
  441. package/website/dist/_worker.js/chunks/xml_DXH3hHIu.mjs +0 -1
  442. package/website/dist/_worker.js/chunks/xsl_DuP2mFjg.mjs +0 -1
  443. package/website/dist/_worker.js/chunks/yaml_IGiEkTge.mjs +0 -1
  444. package/website/dist/_worker.js/chunks/zenscript_59iXGyNw.mjs +0 -1
  445. package/website/dist/_worker.js/chunks/zig_DKzb0zdT.mjs +0 -1
  446. package/website/dist/_worker.js/index.js +0 -53
  447. package/website/dist/_worker.js/manifest_CT_D-YDe.mjs +0 -98
  448. package/website/dist/_worker.js/pages/_image.astro.mjs +0 -24
  449. package/website/dist/_worker.js/pages/agents.astro.mjs +0 -1
  450. package/website/dist/_worker.js/pages/animation.astro.mjs +0 -1
  451. package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs +0 -44
  452. package/website/dist/_worker.js/pages/config.astro.mjs +0 -1
  453. package/website/dist/_worker.js/pages/fonts.astro.mjs +0 -1
  454. package/website/dist/_worker.js/pages/getting-started.astro.mjs +0 -1
  455. package/website/dist/_worker.js/pages/helpers.astro.mjs +0 -1
  456. package/website/dist/_worker.js/pages/images.astro.mjs +0 -1
  457. package/website/dist/_worker.js/pages/index.astro.mjs +0 -1
  458. package/website/dist/_worker.js/pages/llm.txt.astro.mjs +0 -1
  459. package/website/dist/_worker.js/pages/preview.astro.mjs +0 -1
  460. package/website/dist/_worker.js/pages/sdk.astro.mjs +0 -1
  461. package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs +0 -1
  462. package/website/dist/_worker.js/pages/styling.astro.mjs +0 -1
  463. package/website/dist/_worker.js/pages/templates.astro.mjs +0 -1
  464. package/website/dist/_worker.js/pages/video.astro.mjs +0 -1
  465. package/website/dist/_worker.js/renderers.mjs +0 -57
  466. package/website/dist/agents/index.html +0 -52
  467. package/website/dist/animation/index.html +0 -879
  468. package/website/dist/config/index.html +0 -184
  469. package/website/dist/fonts/index.html +0 -198
  470. package/website/dist/getting-started/index.html +0 -107
  471. package/website/dist/helpers/index.html +0 -164
  472. package/website/dist/images/index.html +0 -335
  473. package/website/dist/index.html +0 -140
  474. package/website/dist/llm.txt +0 -2776
  475. package/website/dist/preview/index.html +0 -111
  476. package/website/dist/robots.txt +0 -40
  477. package/website/dist/sdk/index.html +0 -1076
  478. package/website/dist/sitemap.xml +0 -76
  479. package/website/dist/styling/index.html +0 -366
  480. package/website/dist/templates/index.html +0 -74
  481. package/website/dist/video/index.html +0 -319
  482. package/website/package-lock.json +0 -8089
  483. package/website/package.json +0 -41
  484. package/website/public/.gitkeep +0 -5
  485. package/website/public/robots.txt +0 -40
  486. package/website/templates/og-image.tsx +0 -60
package/website/dist/animation/index.html DELETED
@@ -1,879 +0,0 @@
1
- <!DOCTYPE html><html lang="en" data-astro-cid-mw7aashj> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/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, serverless, WASM, Open Graph, social media, marketing automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/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/api/og/animation"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt"><meta property="og:site_name" content="loopwind"><meta property="og:locale" content="en_US"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/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/api/og/animation"><meta name="twitter:image:alt"><meta name="twitter:creator" content="@loopwind"><meta name="twitter:site" content="@loopwind"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="language" content="English"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><!-- Mobile Web App --><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="loopwind"><!-- Structured Data (JSON-LD) --><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"loopwind","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","description":"CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates.","url":"https://loopwind.dev/","author":{"@type":"Organization","name":"loopwind","url":"https://loopwind.dev/"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"softwareVersion":"0.11.0","releaseNotes":"https://github.com/loopwind/loopwind/releases","screenshot":"https://loopwind.dev/api/og/animation","featureList":["Image generation from React templates","Video generation with animations","Tailwind CSS support","shadcn/ui design system","CLI-based workflow","Serverless rendering","TypeScript support","AI Agent friendly"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"loopwind","url":"https://loopwind.dev/","logo":"https://loopwind.dev/favicon.svg","sameAs":["https://github.com/loopwind/loopwind","https://www.npmjs.com/package/loopwind"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://loopwind.dev/"},{"@type":"ListItem","position":2,"name":"Animation","item":"https://loopwind.dev/animation"}]}</script><link rel="stylesheet" href="/_astro/agents.Yx-L_igG.css"><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
2
- </script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64 mr-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="animation">Animation</h1>
3
- <p>loopwind provides <strong>Tailwind-style animation classes</strong> that work with time to create smooth video animations without writing custom code.</p>
4
- <blockquote>
5
- <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 time context.</p>
6
- </blockquote>
7
- <h2 id="quick-start">Quick Start</h2>
8
- <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>
9
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
10
- <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>
11
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Bounce in from below: starts at 0, lasts 400ms */</span><span style="color:#E1E4E8">}</span></span>
12
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
13
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
14
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
15
- <span class="line"></span>
16
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Fade in with upward motion: starts at 300ms, lasts 400ms */</span><span style="color:#E1E4E8">}</span></span>
17
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/300/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
18
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
19
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
20
- <span class="line"></span>
21
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Continuous floating animation: repeats every 1s (1000ms) */</span><span style="color:#E1E4E8">}</span></span>
22
- <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;mt-8 text-4xl loop-float/1000&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
23
- <span class="line"><span style="color:#E1E4E8"> ⬇️</span></span>
24
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
25
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
26
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
27
- <span class="line"><span style="color:#E1E4E8">}</span></span>
28
- <span class="line"></span></code></pre>
29
- <h2 id="animation-format">Animation Format</h2>
30
- <p>loopwind uses three types of animations with <strong>millisecond timing</strong>:</p>
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
- <table><thead><tr><th>Type</th><th>Format</th><th>Description</th></tr></thead><tbody><tr><td>Enter</td><td><code>enter-{type}/{start}/{duration}</code></td><td>Animations that play when entering</td></tr><tr><td>Exit</td><td><code>exit-{type}/{start}/{duration}</code></td><td>Animations that play when exiting</td></tr><tr><td>Loop</td><td><code>loop-{type}/{duration}</code></td><td>Continuous looping animations</td></tr></tbody></table>
57
- <p>All timing values are in <strong>milliseconds</strong> (1000ms = 1 second).</p>
58
- <h2 id="utility-based-animations">Utility-Based Animations</h2>
59
- <p>In addition to predefined animations, loopwind supports <strong>Tailwind utility-based animations</strong> that let you animate any transform or opacity property directly:</p>
60
- <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 20px from the left</span></span>
61
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-5/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
62
- <span class="line"></span>
63
- <span class="line"><span style="color:#6A737D">// Rotate 90 degrees on entrance</span></span>
64
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-rotate-90/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
65
- <span class="line"></span>
66
- <span class="line"><span style="color:#6A737D">// Fade to 50% opacity in a loop</span></span>
67
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-opacity-50/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Pulsing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
68
- <span class="line"></span>
69
- <span class="line"><span style="color:#6A737D">// Scale down with negative value</span></span>
70
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter--scale-50/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Shrinking&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
71
- <span class="line"></span></code></pre>
72
- <h3 id="supported-utilities">Supported Utilities</h3>
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
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
-
122
-
123
-
124
-
125
-
126
- <table><thead><tr><th>Utility</th><th>Format</th><th>Description</th><th>Example</th></tr></thead><tbody><tr><td><strong>translate-x</strong></td><td><code>enter-translate-x-{value}</code></td><td>Translate horizontally</td><td><code>enter-translate-x-5</code> = 20px<br/><code>enter-translate-x-full</code> = 100%<br/><code>enter-translate-x-[20px]</code> = 20px</td></tr><tr><td><strong>translate-y</strong></td><td><code>enter-translate-y-{value}</code></td><td>Translate vertically</td><td><code>loop-translate-y-10</code> = 40px<br/><code>enter-translate-y-1/2</code> = 50%<br/><code>enter-translate-y-[5rem]</code> = 80px</td></tr><tr><td><strong>opacity</strong></td><td><code>enter-opacity-{n}</code></td><td>Set opacity (0-100)</td><td><code>enter-opacity-50</code> = 50%</td></tr><tr><td><strong>scale</strong></td><td><code>enter-scale-{n}</code></td><td>Scale element (0-200)</td><td><code>enter-scale-100</code> = 1.0x</td></tr><tr><td><strong>rotate</strong></td><td><code>enter-rotate-{n}</code></td><td>Rotate in degrees</td><td><code>enter-rotate-45</code> = 45°</td></tr><tr><td><strong>skew-x</strong></td><td><code>enter-skew-x-{n}</code></td><td>Skew on X axis in degrees</td><td><code>enter-skew-x-12</code> = 12°</td></tr><tr><td><strong>skew-y</strong></td><td><code>enter-skew-y-{n}</code></td><td>Skew on Y axis in degrees</td><td><code>exit-skew-y-6</code> = 6°</td></tr></tbody></table>
127
- <p><strong>Translate value formats:</strong></p>
128
- <ul>
129
- <li><strong>Numeric</strong>: <code>5</code> = 20px (Tailwind spacing scale: 1 unit = 4px)</li>
130
- <li><strong>Keywords</strong>: <code>full</code> = 100%</li>
131
- <li><strong>Fractions</strong>: <code>1/2</code> = 50%, <code>1/3</code> = 33.333%, <code>2/3</code> = 66.666%, etc.</li>
132
- <li><strong>Arbitrary values</strong>: <code>[20px]</code>, <code>[5rem]</code>, <code>[10%]</code> (rem converts to px: 1rem = 16px)</li>
133
- </ul>
134
- <p>All utilities work with:</p>
135
- <ul>
136
- <li><strong>All prefixes</strong>: <code>enter-</code>, <code>exit-</code>, <code>loop-</code>, <code>animate-</code></li>
137
- <li><strong>Negative values</strong>: Prefix with <code>-</code> (e.g., <code>-translate-x-5</code>, <code>-rotate-45</code>)</li>
138
- <li><strong>Timing syntax</strong>: Add <code>/start/duration</code> (e.g., <code>enter-translate-x-5/0/800</code>)</li>
139
- </ul>
140
- <h3 id="translate-animations">Translate Animations</h3>
141
- <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">// Numeric (Tailwind spacing): 20px (5 * 4px)</span></span>
142
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-5/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
143
- <span class="line"></span>
144
- <span class="line"><span style="color:#6A737D">// Keyword: Full width (100%)</span></span>
145
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-y-full/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Dropping full height&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
146
- <span class="line"></span>
147
- <span class="line"><span style="color:#6A737D">// Fraction: Half width (50%)</span></span>
148
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-1/2/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;Slide in halfway&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
149
- <span class="line"></span>
150
- <span class="line"><span style="color:#6A737D">// Arbitrary values: Exact px or rem</span></span>
151
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-y-[20px]/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Slide 20px&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
152
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-[5rem]/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Slide 5rem (80px)&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
153
- <span class="line"></span>
154
- <span class="line"><span style="color:#6A737D">// Loop with fractions</span></span>
155
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-translate-y-1/4/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Oscillate 25%&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
156
- <span class="line"></span>
157
- <span class="line"><span style="color:#6A737D">// Negative values</span></span>
158
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit--translate-y-8/2000/500&#39;</span><span style="color:#E1E4E8">)}&gt;Rising&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
159
- <span class="line"></span></code></pre>
160
- <h3 id="opacity-animations">Opacity Animations</h3>
161
- <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 to 100% opacity</span></span>
162
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-opacity-100/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Fading In&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
163
- <span class="line"></span>
164
- <span class="line"><span style="color:#6A737D">// Fade to 50% opacity</span></span>
165
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-opacity-50/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Half Opacity&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
166
- <span class="line"></span>
167
- <span class="line"><span style="color:#6A737D">// Pulse between 50% and 100%</span></span>
168
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-opacity-50/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Pulsing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
169
- <span class="line"></span>
170
- <span class="line"><span style="color:#6A737D">// Fade out to 0%</span></span>
171
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit-opacity-0/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;Vanishing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
172
- <span class="line"></span></code></pre>
173
- <h3 id="scale-animations">Scale Animations</h3>
174
- <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 from 0 to 100% (1.0x)</span></span>
175
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-scale-100/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Growing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
176
- <span class="line"></span>
177
- <span class="line"><span style="color:#6A737D">// Scale to 150% (1.5x)</span></span>
178
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-scale-150/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Enlarging&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
179
- <span class="line"></span>
180
- <span class="line"><span style="color:#6A737D">// Pulse scale in a loop</span></span>
181
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-scale-110/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Breathing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
182
- <span class="line"></span>
183
- <span class="line"><span style="color:#6A737D">// Scale down to 50%</span></span>
184
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit-scale-50/2000/500&#39;</span><span style="color:#E1E4E8">)}&gt;Shrinking&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
185
- <span class="line"></span></code></pre>
186
- <h3 id="rotate-animations">Rotate Animations</h3>
187
- <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 90 degrees</span></span>
188
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-rotate-90/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Quarter Turn&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
189
- <span class="line"></span>
190
- <span class="line"><span style="color:#6A737D">// Rotate 180 degrees</span></span>
191
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-rotate-180/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Half Turn&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
192
- <span class="line"></span>
193
- <span class="line"><span style="color:#6A737D">// Continuous rotation in loop (360 degrees per cycle)</span></span>
194
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-rotate-360/2000&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
195
- <span class="line"></span>
196
- <span class="line"><span style="color:#6A737D">// Rotate backwards with negative value</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;enter--rotate-45/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Counter Rotation&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
198
- <span class="line"></span></code></pre>
199
- <h3 id="skew-animations">Skew Animations</h3>
200
- <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">// Skew on X axis</span></span>
201
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-skew-x-12/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Slanted&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
202
- <span class="line"></span>
203
- <span class="line"><span style="color:#6A737D">// Skew on Y axis</span></span>
204
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-skew-y-6/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;Tilted&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
205
- <span class="line"></span>
206
- <span class="line"><span style="color:#6A737D">// Oscillating skew in loop</span></span>
207
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-skew-x-6/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Wobbling&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
208
- <span class="line"></span>
209
- <span class="line"><span style="color:#6A737D">// Negative skew</span></span>
210
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;exit--skew-x-12/2000/500&#39;</span><span style="color:#E1E4E8">)}&gt;Reverse Slant&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
211
- <span class="line"></span></code></pre>
212
- <h3 id="combining-utilities">Combining Utilities</h3>
213
- <p>You can combine multiple utility animations on the same element:</p>
214
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Translate and rotate together</span></span>
215
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-y-10/0/500 enter-rotate-45/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
216
- <span class="line"><span style="color:#E1E4E8"> Flying In</span></span>
217
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
218
- <span class="line"></span>
219
- <span class="line"><span style="color:#6A737D">// Fade and scale</span></span>
220
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-opacity-100/0/800 enter-scale-100/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
221
- <span class="line"><span style="color:#E1E4E8"> Appearing</span></span>
222
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
223
- <span class="line"></span>
224
- <span class="line"><span style="color:#6A737D">// Enter with translate, exit with rotation</span></span>
225
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-translate-x-5/0/500 exit-rotate-180/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
226
- <span class="line"><span style="color:#E1E4E8"> Slide and Spin</span></span>
227
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
228
- <span class="line"></span></code></pre>
229
- <h3 id="bracket-notation">Bracket Notation</h3>
230
- <p>For more CSS-like syntax, you can use brackets with units:</p>
231
- <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">// Using bracket notation with seconds</span></span>
232
- <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;enter-slide-up/[0.6s]/[1.5s]&#39;</span><span style="color:#E1E4E8">)}&gt;Hello&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
233
- <span class="line"></span>
234
- <span class="line"><span style="color:#6A737D">// Using bracket notation with milliseconds</span></span>
235
- <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;enter-fade-in/[300ms]/[800ms]&#39;</span><span style="color:#E1E4E8">)}&gt;World&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
236
- <span class="line"></span>
237
- <span class="line"><span style="color:#6A737D">// Mix and match - plain numbers are milliseconds</span></span>
238
- <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;enter-bounce-in/0/[1.2s]&#39;</span><span style="color:#E1E4E8">)}&gt;Mixed&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
239
- <span class="line"></span></code></pre>
240
- <h2 id="enter-animations">Enter Animations</h2>
241
- <p>Format: <code>enter-{type}/{startMs}/{durationMs}</code></p>
242
- <ul>
243
- <li><code>startMs</code> - when the animation begins (milliseconds from start)</li>
244
- <li><code>durationMs</code> - how long the animation lasts</li>
245
- </ul>
246
- <p>When values are omitted (<code>enter-fade-in</code>), it uses the full video duration.</p>
247
- <h3 id="fade-animations">Fade Animations</h3>
248
- <p>Simple opacity transitions with optional direction.</p>
249
- <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 0ms to 500ms</span></span>
250
- <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;enter-fade-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Hello&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
251
- <span class="line"></span>
252
- <span class="line"><span style="color:#6A737D">// Fade in with upward motion</span></span>
253
- <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;enter-fade-in-up/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;Hello&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
254
- <span class="line"></span></code></pre>
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>enter-fade-in/0/500</code></td><td>Fade in (opacity 0 → 1)</td></tr><tr><td><code>enter-fade-in-up/0/500</code></td><td>Fade in + slide up (30px)</td></tr><tr><td><code>enter-fade-in-down/0/500</code></td><td>Fade in + slide down (30px)</td></tr><tr><td><code>enter-fade-in-left/0/500</code></td><td>Fade in + slide from left (30px)</td></tr><tr><td><code>enter-fade-in-right/0/500</code></td><td>Fade in + slide from right (30px)</td></tr></tbody></table>
285
- <h3 id="slide-animations">Slide Animations</h3>
286
- <p>Larger movement (100px) with fade.</p>
287
- <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: starts at 0, lasts 500ms</span></span>
288
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-slide-left/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
289
- <span class="line"></span>
290
- <span class="line"><span style="color:#6A737D">// Slide up from bottom: starts at 200ms, lasts 600ms</span></span>
291
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-slide-up/200/600&#39;</span><span style="color:#E1E4E8">)}&gt;Content&lt;/</span><span style="color:#85E89D">div</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
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>enter-slide-left/0/500</code></td><td>Slide in from left (100px)</td></tr><tr><td><code>enter-slide-right/0/500</code></td><td>Slide in from right (100px)</td></tr><tr><td><code>enter-slide-up/0/500</code></td><td>Slide in from bottom (100px)</td></tr><tr><td><code>enter-slide-down/0/500</code></td><td>Slide in from top (100px)</td></tr></tbody></table>
319
- <h3 id="bounce-animations">Bounce Animations</h3>
320
- <p>Playful entrance with overshoot effect.</p>
321
- <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>
322
- <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;enter-bounce-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncy!&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
323
- <span class="line"></span>
324
- <span class="line"><span style="color:#6A737D">// Bounce in from below</span></span>
325
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-bounce-in-up/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;Pop!&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
326
- <span class="line"></span></code></pre>
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
-
354
-
355
-
356
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>enter-bounce-in/0/500</code></td><td>Bounce in with scale overshoot</td></tr><tr><td><code>enter-bounce-in-up/0/500</code></td><td>Bounce in from below</td></tr><tr><td><code>enter-bounce-in-down/0/500</code></td><td>Bounce in from above</td></tr><tr><td><code>enter-bounce-in-left/0/500</code></td><td>Bounce in from left</td></tr><tr><td><code>enter-bounce-in-right/0/500</code></td><td>Bounce in from right</td></tr></tbody></table>
357
- <h3 id="scale--zoom-animations">Scale &amp; Zoom Animations</h3>
358
- <p>Size-based transitions.</p>
359
- <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>
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;enter-scale-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Growing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
361
- <span class="line"></span>
362
- <span class="line"><span style="color:#6A737D">// Zoom in from 0%</span></span>
363
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-zoom-in/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Zooming&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
364
- <span class="line"></span></code></pre>
365
-
366
-
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>enter-scale-in/0/500</code></td><td>Scale up from 50% to 100%</td></tr><tr><td><code>enter-zoom-in/0/500</code></td><td>Zoom in from 0% to 100%</td></tr></tbody></table>
383
- <h3 id="rotate--flip-animations">Rotate &amp; Flip Animations</h3>
384
- <p>Rotation-based transitions.</p>
385
- <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>
386
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-rotate-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
387
- <span class="line"></span>
388
- <span class="line"><span style="color:#6A737D">// 3D flip on X axis</span></span>
389
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;enter-flip-in-x/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Flipping&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
390
- <span class="line"></span></code></pre>
391
-
392
-
393
-
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
-
406
-
407
-
408
-
409
-
410
-
411
-
412
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>enter-rotate-in/0/500</code></td><td>Rotate in from -180°</td></tr><tr><td><code>enter-flip-in-x/0/500</code></td><td>3D flip on horizontal axis</td></tr><tr><td><code>enter-flip-in-y/0/500</code></td><td>3D flip on vertical axis</td></tr></tbody></table>
413
- <h2 id="exit-animations">Exit Animations</h2>
414
- <p>Format: <code>exit-{type}/{startMs}/{durationMs}</code></p>
415
- <ul>
416
- <li><code>startMs</code> - when the exit animation begins</li>
417
- <li><code>durationMs</code> - how long the exit animation lasts</li>
418
- </ul>
419
- <p>Exit animations use the same timing system but animate elements out.</p>
420
- <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 out starting at 2500ms, lasting 500ms (ends at 3000ms)</span></span>
421
- <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;exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;Goodbye&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
422
- <span class="line"></span>
423
- <span class="line"><span style="color:#6A737D">// Combined enter and exit on same element</span></span>
424
- <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;enter-fade-in/0/500 exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
425
- <span class="line"><span style="color:#E1E4E8"> Hello and Goodbye</span></span>
426
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
427
- <span class="line"></span></code></pre>
428
-
429
-
430
-
431
-
432
-
433
-
434
-
435
-
436
-
437
-
438
-
439
-
440
-
441
-
442
-
443
-
444
-
445
-
446
-
447
-
448
-
449
-
450
-
451
-
452
-
453
-
454
-
455
-
456
-
457
-
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
-
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
-
475
-
476
-
477
-
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
-
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
-
494
-
495
-
496
-
497
-
498
-
499
-
500
-
501
-
502
-
503
-
504
-
505
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>exit-fade-out/2500/500</code></td><td>Fade out (opacity 1 → 0)</td></tr><tr><td><code>exit-fade-out-up/2500/500</code></td><td>Fade out + slide up</td></tr><tr><td><code>exit-fade-out-down/2500/500</code></td><td>Fade out + slide down</td></tr><tr><td><code>exit-fade-out-left/2500/500</code></td><td>Fade out + slide left</td></tr><tr><td><code>exit-fade-out-right/2500/500</code></td><td>Fade out + slide right</td></tr><tr><td><code>exit-slide-up/2500/500</code></td><td>Slide out upward (100px)</td></tr><tr><td><code>exit-slide-down/2500/500</code></td><td>Slide out downward (100px)</td></tr><tr><td><code>exit-slide-left/2500/500</code></td><td>Slide out to left (100px)</td></tr><tr><td><code>exit-slide-right/2500/500</code></td><td>Slide out to right (100px)</td></tr><tr><td><code>exit-scale-out/2500/500</code></td><td>Scale out to 150%</td></tr><tr><td><code>exit-zoom-out/2500/500</code></td><td>Zoom out to 200%</td></tr><tr><td><code>exit-rotate-out/2500/500</code></td><td>Rotate out to 180°</td></tr><tr><td><code>exit-bounce-out/2500/500</code></td><td>Bounce out with scale</td></tr><tr><td><code>exit-bounce-out-up/2500/500</code></td><td>Bounce out upward</td></tr><tr><td><code>exit-bounce-out-down/2500/500</code></td><td>Bounce out downward</td></tr><tr><td><code>exit-bounce-out-left/2500/500</code></td><td>Bounce out to left</td></tr><tr><td><code>exit-bounce-out-right/2500/500</code></td><td>Bounce out to right</td></tr></tbody></table>
506
- <h2 id="loop-animations">Loop Animations</h2>
507
- <p>Format: <code>loop-{type}/{durationMs}</code></p>
508
- <p>Loop animations repeat every <code>{durationMs}</code> milliseconds:</p>
509
- <ul>
510
- <li><code>/1000</code> = 1 second loop</li>
511
- <li><code>/500</code> = 0.5 second loop</li>
512
- <li><code>/2000</code> = 2 second loop</li>
513
- </ul>
514
- <p>When duration is omitted (<code>loop-bounce</code>), it defaults to 1000ms (1 second).</p>
515
- <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 500ms</span></span>
516
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-fade/500&#39;</span><span style="color:#E1E4E8">)}&gt;Pulsing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
517
- <span class="line"></span>
518
- <span class="line"><span style="color:#6A737D">// Bounce every 800ms</span></span>
519
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-bounce/800&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncing&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
520
- <span class="line"></span>
521
- <span class="line"><span style="color:#6A737D">// Full rotation every 2000ms</span></span>
522
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;loop-spin/2000&#39;</span><span style="color:#E1E4E8">)}&gt;Spinning&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
523
- <span class="line"></span></code></pre>
524
-
525
-
526
-
527
-
528
-
529
-
530
-
531
-
532
-
533
-
534
-
535
-
536
-
537
-
538
-
539
-
540
-
541
-
542
-
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
-
552
-
553
-
554
-
555
-
556
-
557
-
558
-
559
-
560
-
561
-
562
-
563
-
564
-
565
- <table><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><code>loop-fade/{ms}</code></td><td>Opacity pulse (0.5 → 1 → 0.5)</td></tr><tr><td><code>loop-bounce/{ms}</code></td><td>Bounce up and down</td></tr><tr><td><code>loop-spin/{ms}</code></td><td>Full 360° rotation</td></tr><tr><td><code>loop-ping/{ms}</code></td><td>Scale up + fade out (radar effect)</td></tr><tr><td><code>loop-wiggle/{ms}</code></td><td>Side to side wiggle</td></tr><tr><td><code>loop-float/{ms}</code></td><td>Gentle up and down floating</td></tr><tr><td><code>loop-pulse/{ms}</code></td><td>Scale pulse (1.0 → 1.05 → 1.0)</td></tr><tr><td><code>loop-shake/{ms}</code></td><td>Shake side to side</td></tr></tbody></table>
566
- <h2 id="easing-functions">Easing Functions</h2>
567
- <p>Add an easing class <strong>before</strong> the animation class to control the timing curve.</p>
568
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Ease in (accelerate)</span></span>
569
- <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 enter-fade-in/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Accelerating&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
570
- <span class="line"></span>
571
- <span class="line"><span style="color:#6A737D">// Ease out (decelerate) - default</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 style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;ease-out enter-fade-in/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Decelerating&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
573
- <span class="line"></span>
574
- <span class="line"><span style="color:#6A737D">// Ease in-out (smooth)</span></span>
575
- <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 enter-fade-in/0/1000&#39;</span><span style="color:#E1E4E8">)}&gt;Smooth&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
576
- <span class="line"></span>
577
- <span class="line"><span style="color:#6A737D">// Strong cubic easing</span></span>
578
- <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 enter-bounce-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Dramatic&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
579
- <span class="line"></span></code></pre>
580
-
581
-
582
-
583
-
584
-
585
-
586
-
587
-
588
-
589
-
590
-
591
-
592
-
593
-
594
-
595
-
596
-
597
-
598
-
599
-
600
-
601
-
602
-
603
-
604
-
605
-
606
-
607
-
608
-
609
-
610
-
611
-
612
-
613
-
614
-
615
-
616
-
617
-
618
-
619
-
620
-
621
-
622
-
623
-
624
-
625
-
626
-
627
-
628
-
629
-
630
-
631
-
632
-
633
-
634
-
635
-
636
-
637
-
638
-
639
-
640
- <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>
641
- <h2 id="combining-enter-and-exit">Combining Enter and Exit</h2>
642
- <p>You can use both enter and exit animations on the same element:</p>
643
- <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"> EnterExit</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>
644
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
645
- <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>
646
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Fade in during first 500ms, fade out during last 500ms (assuming 3s video) */</span><span style="color:#E1E4E8">}</span></span>
647
- <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 enter-fade-in/0/500 exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
648
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
649
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
650
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
651
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
652
- <span class="line"><span style="color:#E1E4E8">}</span></span>
653
- <span class="line"></span></code></pre>
654
- <p>The opacities from multiple animations are <strong>multiplied together</strong>, so you get smooth transitions that combine properly.</p>
655
- <h2 id="staggered-animations">Staggered Animations</h2>
656
- <p>Create sequenced animations by offsetting start times:</p>
657
- <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>
658
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
659
- <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>
660
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* First item: starts at 0ms, lasts 300ms */</span><span style="color:#E1E4E8">}</span></span>
661
- <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 enter-fade-in-left/0/300&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
662
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">]}</span></span>
663
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
664
- <span class="line"></span>
665
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Second item: starts at 100ms, lasts 300ms */</span><span style="color:#E1E4E8">}</span></span>
666
- <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 enter-fade-in-left/100/300&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
667
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">]}</span></span>
668
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
669
- <span class="line"></span>
670
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Third item: starts at 200ms, lasts 300ms */</span><span style="color:#E1E4E8">}</span></span>
671
- <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 enter-fade-in-left/200/300&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
672
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">]}</span></span>
673
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
674
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
675
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
676
- <span class="line"><span style="color:#E1E4E8">}</span></span>
677
- <span class="line"></span></code></pre>
678
- <h3 id="dynamic-staggering">Dynamic Staggering</h3>
679
- <p>For dynamic lists, calculate the timing programmatically:</p>
680
- <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>
681
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
682
- <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>
683
- <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>
684
- <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"> 100</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Each item starts 100ms later</span></span>
685
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> duration</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 300</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Each animation lasts 300ms</span></span>
686
- <span class="line"></span>
687
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
688
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
689
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
690
- <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 enter-fade-in-up/${</span><span style="color:#E1E4E8">start</span><span style="color:#9ECBFF">}/${</span><span style="color:#E1E4E8">duration</span><span style="color:#9ECBFF">}`</span><span style="color:#E1E4E8">)}</span></span>
691
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
692
- <span class="line"><span style="color:#E1E4E8"> {item}</span></span>
693
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
694
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
695
- <span class="line"><span style="color:#E1E4E8"> })}</span></span>
696
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
697
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
698
- <span class="line"><span style="color:#E1E4E8">}</span></span>
699
- <span class="line"></span></code></pre>
700
- <h2 id="common-patterns">Common Patterns</h2>
701
- <h3 id="intro-sequence">Intro Sequence</h3>
702
- <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>
703
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
704
- <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>
705
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Logo appears first */</span><span style="color:#E1E4E8">}</span></span>
706
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
707
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{logo}</span></span>
708
- <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 enter-scale-in/0/300&#39;</span><span style="color:#E1E4E8">)}</span></span>
709
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
710
- <span class="line"></span>
711
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Title bounces in */</span><span style="color:#E1E4E8">}</span></span>
712
- <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 enter-bounce-in-up/200/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
713
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
714
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
715
- <span class="line"></span>
716
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Subtitle fades in last */</span><span style="color:#E1E4E8">}</span></span>
717
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-2xl text-white/80 mt-4 ease-out enter-fade-in-up/400/700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
718
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
719
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
720
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
721
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
722
- <span class="line"><span style="color:#E1E4E8">}</span></span>
723
- <span class="line"></span></code></pre>
724
- <h3 id="text-reveal">Text Reveal</h3>
725
- <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>
726
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
727
- <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>
728
- <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>
729
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</span></span>
730
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
731
- <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 enter-fade-in-up/${</span><span style="color:#E1E4E8">i</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 100</span><span style="color:#9ECBFF">}/200`</span><span style="color:#E1E4E8">)}</span></span>
732
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
733
- <span class="line"><span style="color:#E1E4E8"> {word}</span></span>
734
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
735
- <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
736
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
737
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
738
- <span class="line"><span style="color:#E1E4E8">}</span></span>
739
- <span class="line"></span></code></pre>
740
- <h3 id="looping-background-element">Looping Background Element</h3>
741
- <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>
742
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
743
- <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>
744
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Floating background circles */</span><span style="color:#E1E4E8">}</span></span>
745
- <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 loop-float/2000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
746
- <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 loop-fade/1500&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
747
- <span class="line"></span>
748
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Main content */</span><span style="color:#E1E4E8">}</span></span>
749
- <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>
750
- <span class="line"><span style="color:#E1E4E8"> {children}</span></span>
751
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
752
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
753
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
754
- <span class="line"><span style="color:#E1E4E8">}</span></span>
755
- <span class="line"></span></code></pre>
756
- <h3 id="full-enterexit-animation">Full Enter/Exit Animation</h3>
757
- <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"> FullAnimation</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>
758
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
759
- <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>
760
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Enter: starts at 0, lasts 400ms. Exit: starts at 2600ms, lasts 400ms */</span><span style="color:#E1E4E8">}</span></span>
761
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white ease-out enter-bounce-in-up/0/400 exit-fade-out-up/2600/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
762
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
763
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
764
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
765
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
766
- <span class="line"><span style="color:#E1E4E8">}</span></span>
767
- <span class="line"></span></code></pre>
768
- <h2 id="programmatic-animations">Programmatic Animations</h2>
769
- <p>For complete control beyond animation classes, use <code>progress</code> and <code>frame</code> directly.</p>
770
- <h3 id="available-props">Available Props</h3>
771
-
772
-
773
-
774
-
775
-
776
-
777
-
778
-
779
-
780
-
781
-
782
-
783
-
784
-
785
-
786
-
787
-
788
-
789
-
790
-
791
- <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>
792
- <p>These are <strong>only available in video templates</strong>. Use them when animation classes aren’t flexible enough.</p>
793
- <h3 id="using-frame">Using <code>frame</code></h3>
794
- <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>
795
- <span class="line"><span style="color:#6A737D"> // Color cycling using frame number</span></span>
796
- <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>
797
- <span class="line"></span>
798
- <span class="line"><span style="color:#6A737D"> // Pulsing based on frame</span></span>
799
- <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>
800
- <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>
801
- <span class="line"></span>
802
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
803
- <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>
804
- <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>
805
- <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>
806
- <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>
807
- <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>
808
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
809
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
810
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
811
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
812
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
813
- <span class="line"><span style="color:#E1E4E8">}</span></span>
814
- <span class="line"></span></code></pre>
815
- <h3 id="using-progress">Using <code>progress</code></h3>
816
- <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>
817
- <span class="line"><span style="color:#6A737D"> // Custom fade based on progress</span></span>
818
- <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>
819
- <span class="line"></span>
820
- <span class="line"><span style="color:#6A737D"> // Custom scale based on progress</span></span>
821
- <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>
822
- <span class="line"></span>
823
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
824
- <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>
825
- <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>
826
- <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>
827
- <span class="line"><span style="color:#E1E4E8"> opacity,</span></span>
828
- <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>
829
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
830
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
831
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
832
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
833
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
834
- <span class="line"><span style="color:#E1E4E8">}</span></span>
835
- <span class="line"></span></code></pre>
836
- <h3 id="custom-easing">Custom Easing</h3>
837
- <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>
838
- <span class="line"><span style="color:#6A737D"> // Smoothstep easing</span></span>
839
- <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>
840
- <span class="line"></span>
841
- <span class="line"><span style="color:#6A737D"> // Elastic easing</span></span>
842
- <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>
843
- <span class="line"></span>
844
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
845
- <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>
846
- <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>
847
- <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>
848
- <span class="line"><span style="color:#E1E4E8"> opacity: eased,</span></span>
849
- <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>
850
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
851
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
852
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
853
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
854
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
855
- <span class="line"><span style="color:#E1E4E8">}</span></span>
856
- <span class="line"></span></code></pre>
857
- <h3 id="when-to-use-programmatic-animations">When to Use Programmatic Animations</h3>
858
- <p>Use <code>progress</code>/<code>frame</code> instead of animation classes when you need:</p>
859
- <ul>
860
- <li><strong>Custom easing functions</strong> (elastic, spring, bounce with specific curves)</li>
861
- <li><strong>Color cycling or gradients</strong> based on time</li>
862
- <li><strong>Mathematical animations</strong> (sine waves, spirals, etc.)</li>
863
- <li><strong>Complex multi-property animations</strong> that need precise coordination</li>
864
- <li><strong>Conditional logic</strong> based on specific frame numbers</li>
865
- </ul>
866
- <p>For everything else, prefer animation classes - they’re simpler and more maintainable.</p>
867
- <h2 id="performance-tips">Performance Tips</h2>
868
- <ol>
869
- <li><strong>Use Tailwind classes</strong> when possible - they’re optimized for the renderer</li>
870
- <li><strong>Avoid too many nested animations</strong> - each adds computation per frame</li>
871
- <li><strong>Use loop animations sparingly</strong> - they’re computed every frame</li>
872
- <li><strong>Prefer opacity and transform</strong> - they’re the most performant properties</li>
873
- </ol>
874
- <h2 id="next-steps">Next Steps</h2>
875
- <ul>
876
- <li><a href="/video">Video Templates</a> - Creating video templates</li>
877
- <li><a href="/sdk">SDK</a> - Programmatic rendering with animations</li>
878
- <li><a href="/helpers">Helpers</a> - QR codes, images, and more</li>
879
- </ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) --> <aside id="toc-sidebar" class="toc-sidebar fixed top-0 right-0 h-screen w-64 overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="px-6 py-8" data-astro-cid-mw7aashj> <h3 class="text-xs font-semibold text-muted-foreground mb-4 uppercase tracking-wider" data-astro-cid-mw7aashj>On this page</h3> <nav id="toc-nav" data-astro-cid-mw7aashj> <!-- TOC will be populated by JavaScript --> </nav> </div> </aside> </div> </body></html>