loopwind 0.23.0 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (497) 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 +4 -1
  32. package/dist/lib/renderer.js.map +1 -1
  33. package/dist/lib/utils.d.ts +13 -29
  34. package/dist/lib/utils.d.ts.map +1 -1
  35. package/dist/lib/utils.js +45 -155
  36. package/dist/lib/utils.js.map +1 -1
  37. package/dist/types/config.d.ts +0 -2
  38. package/dist/types/config.d.ts.map +1 -1
  39. package/dist/types/config.js.map +1 -1
  40. package/package.json +1 -15
  41. package/REGISTRY_SETUP.md +0 -363
  42. package/dist/default-templates/image/template.d.ts +0 -20
  43. package/dist/default-templates/image/template.d.ts.map +0 -1
  44. package/dist/default-templates/image/template.js +0 -18
  45. package/dist/default-templates/image/template.js.map +0 -1
  46. package/dist/default-templates/image/template.tsx +0 -20
  47. package/dist/default-templates/kitchen-sink/template.tsx +0 -64
  48. package/dist/default-templates/page/template.tsx +0 -37
  49. package/dist/default-templates/video/template.d.ts +0 -26
  50. package/dist/default-templates/video/template.d.ts.map +0 -1
  51. package/dist/default-templates/video/template.js +0 -33
  52. package/dist/default-templates/video/template.js.map +0 -1
  53. package/dist/default-templates/video/template.tsx +0 -37
  54. package/dist/default-templates/website/pages/home.tsx +0 -17
  55. package/dist/default-templates/website/parts/footer.tsx +0 -17
  56. package/dist/default-templates/website/parts/header.tsx +0 -17
  57. package/dist/default-templates/website/template.tsx +0 -17
  58. package/dist/default-templates/website-template/pages/home.tsx +0 -13
  59. package/dist/default-templates/website-template/parts/footer.tsx +0 -15
  60. package/dist/default-templates/website-template/parts/header.tsx +0 -15
  61. package/dist/default-templates/website-template/template.tsx +0 -32
  62. package/dist/lib/encode-worker.d.ts +0 -2
  63. package/dist/lib/encode-worker.d.ts.map +0 -1
  64. package/dist/lib/encode-worker.js +0 -29
  65. package/dist/lib/encode-worker.js.map +0 -1
  66. package/dist/lib/mjpeg-muxer.d.ts +0 -46
  67. package/dist/lib/mjpeg-muxer.d.ts.map +0 -1
  68. package/dist/lib/mjpeg-muxer.js +0 -513
  69. package/dist/lib/mjpeg-muxer.js.map +0 -1
  70. package/dist/lib/render-core.d.ts +0 -63
  71. package/dist/lib/render-core.d.ts.map +0 -1
  72. package/dist/lib/render-core.js +0 -65
  73. package/dist/lib/render-core.js.map +0 -1
  74. package/dist/lib/tailwind-browser.d.ts +0 -27
  75. package/dist/lib/tailwind-browser.d.ts.map +0 -1
  76. package/dist/lib/tailwind-browser.js +0 -853
  77. package/dist/lib/tailwind-browser.js.map +0 -1
  78. package/dist/lib/video-player.d.ts +0 -25
  79. package/dist/lib/video-player.d.ts.map +0 -1
  80. package/dist/lib/video-player.js +0 -392
  81. package/dist/lib/video-player.js.map +0 -1
  82. package/dist/sdk/compiler.d.ts +0 -94
  83. package/dist/sdk/compiler.d.ts.map +0 -1
  84. package/dist/sdk/compiler.js +0 -122
  85. package/dist/sdk/compiler.js.map +0 -1
  86. package/dist/sdk/edge/index.d.ts +0 -91
  87. package/dist/sdk/edge/index.d.ts.map +0 -1
  88. package/dist/sdk/edge/index.js +0 -187
  89. package/dist/sdk/edge/index.js.map +0 -1
  90. package/dist/sdk/index.d.ts +0 -62
  91. package/dist/sdk/index.d.ts.map +0 -1
  92. package/dist/sdk/index.js +0 -141
  93. package/dist/sdk/index.js.map +0 -1
  94. package/dist/sdk/preview.d.ts +0 -65
  95. package/dist/sdk/preview.d.ts.map +0 -1
  96. package/dist/sdk/preview.js +0 -262
  97. package/dist/sdk/preview.js.map +0 -1
  98. package/dist/sdk/template.d.ts +0 -162
  99. package/dist/sdk/template.d.ts.map +0 -1
  100. package/dist/sdk/template.js +0 -231
  101. package/dist/sdk/template.js.map +0 -1
  102. package/dist/sdk/workers/index.d.ts +0 -135
  103. package/dist/sdk/workers/index.d.ts.map +0 -1
  104. package/dist/sdk/workers/index.js +0 -271
  105. package/dist/sdk/workers/index.js.map +0 -1
  106. package/dist/sdk/workers/tailwind-config.d.ts +0 -48
  107. package/dist/sdk/workers/tailwind-config.d.ts.map +0 -1
  108. package/dist/sdk/workers/tailwind-config.js +0 -187
  109. package/dist/sdk/workers/tailwind-config.js.map +0 -1
  110. package/dist/sdk/workers/tailwind.d.ts +0 -9
  111. package/dist/sdk/workers/tailwind.d.ts.map +0 -1
  112. package/dist/sdk/workers/tailwind.js +0 -8
  113. package/dist/sdk/workers/tailwind.js.map +0 -1
  114. package/examples/code-editor-templates.ts +0 -173
  115. package/examples/nextjs-api/README.md +0 -180
  116. package/examples/nextjs-api/package.json +0 -21
  117. package/examples/nextjs-api/pages/api/intro-video.ts +0 -53
  118. package/examples/nextjs-api/pages/api/og-image.ts +0 -50
  119. package/examples/nextjs-template-import.ts +0 -58
  120. package/examples/sdk-video-preview.tsx +0 -120
  121. package/examples/template-compiler-workflow.ts +0 -251
  122. package/examples/visual-builder-templates.ts +0 -336
  123. package/render-examples-600x400.mjs +0 -161
  124. package/render-spring-variants-fixed.mjs +0 -60
  125. package/render-staggered-text.mjs +0 -56
  126. package/test-cloudflare-worker/README.md +0 -64
  127. package/test-cloudflare-worker/dist/README.md +0 -1
  128. package/test-cloudflare-worker/dist/index.js +0 -23743
  129. package/test-cloudflare-worker/dist/index.js.map +0 -8
  130. package/test-cloudflare-worker/package-lock.json +0 -1773
  131. package/test-cloudflare-worker/package.json +0 -25
  132. package/test-cloudflare-worker/test-sdk.mjs +0 -75
  133. package/test-cloudflare-worker/wrangler.toml +0 -14
  134. package/test-font-files.mjs +0 -72
  135. package/test-jsx-support.mjs +0 -146
  136. package/test-sdk-config.mjs +0 -454
  137. package/test-sdk-source-config.mjs +0 -427
  138. package/test-sdk-user-templates.mjs +0 -469
  139. package/test-static-debug.tsx +0 -19
  140. package/test-templates/TESTS.md +0 -63
  141. package/test-templates/config-test.mjs +0 -17
  142. package/test-templates/demo-intro-props.json +0 -4
  143. package/test-templates/run-tests.sh +0 -44
  144. package/test-templates/test-sdk.mjs +0 -139
  145. package/test-video-720p.mjs +0 -96
  146. package/test-video-breakdown.mjs +0 -98
  147. package/test-video-perf-1080.mjs +0 -67
  148. package/test-video-perf.mjs +0 -56
  149. package/test-video-props.json +0 -3
  150. package/test-worker-1080p.mjs +0 -103
  151. package/test-worker-viability.mjs +0 -140
  152. package/website/.astro/content.db +0 -0
  153. package/website/.astro/integrations/_inox-tools_astro-when/types.d.ts +0 -1
  154. package/website/.astro/integrations/astro_db/db.d.ts +0 -15
  155. package/website/.astro/settings.json +0 -5
  156. package/website/.astro/types.d.ts +0 -2
  157. package/website/DEPLOYMENT.md +0 -143
  158. package/website/OG_IMAGES.md +0 -142
  159. package/website/README.md +0 -158
  160. package/website/astro.config.mjs +0 -41
  161. package/website/dist/.gitkeep +0 -5
  162. package/website/dist/_astro/PlaygroundEditor.DzFavsm8.js +0 -26
  163. package/website/dist/_astro/VideoPreviewClient.BrajhYmh.js +0 -1
  164. package/website/dist/_astro/agents.CZXv4DCM.css +0 -1
  165. package/website/dist/_astro/client.BHSq4mdQ.js +0 -33
  166. package/website/dist/_astro/index.CTbGshLK.js +0 -9
  167. package/website/dist/_astro/jsx-runtime.BjG_zV1W.js +0 -9
  168. package/website/dist/_routes.json +0 -31
  169. package/website/dist/_worker.js/_@astrojs-ssr-adapter.mjs +0 -1033
  170. package/website/dist/_worker.js/_astro-internal_middleware.mjs +0 -40
  171. package/website/dist/_worker.js/chunks/Logo_Cud5QvBJ.mjs +0 -22
  172. package/website/dist/_worker.js/chunks/_@astro-renderers_-YVK7NHa.mjs +0 -15015
  173. package/website/dist/_worker.js/chunks/abap_BTmsHiP5.mjs +0 -1
  174. package/website/dist/_worker.js/chunks/actionscript-3_DmBelb1E.mjs +0 -1
  175. package/website/dist/_worker.js/chunks/ada_8-E0ahCN.mjs +0 -1
  176. package/website/dist/_worker.js/chunks/andromeeda_XI-CXx50.mjs +0 -1
  177. package/website/dist/_worker.js/chunks/angular-html_DKGh3gGH.mjs +0 -1
  178. package/website/dist/_worker.js/chunks/angular-ts_-qZGsJoA.mjs +0 -1
  179. package/website/dist/_worker.js/chunks/apache_ijTUt0Ee.mjs +0 -1
  180. package/website/dist/_worker.js/chunks/apex_agu1c6Sh.mjs +0 -1
  181. package/website/dist/_worker.js/chunks/apl_Bj2f7Art.mjs +0 -1
  182. package/website/dist/_worker.js/chunks/applescript_B_vXrOh3.mjs +0 -1
  183. package/website/dist/_worker.js/chunks/ara_DCEQ2rnh.mjs +0 -1
  184. package/website/dist/_worker.js/chunks/asciidoc_CGN_EkYS.mjs +0 -1
  185. package/website/dist/_worker.js/chunks/asm_BBWZgnDp.mjs +0 -1
  186. package/website/dist/_worker.js/chunks/astro/assets-service_j52rQLzU.mjs +0 -721
  187. package/website/dist/_worker.js/chunks/astro/server_CsUrSZgd.mjs +0 -2512
  188. package/website/dist/_worker.js/chunks/astro-designed-error-pages_1ELXm5Tt.mjs +0 -542
  189. package/website/dist/_worker.js/chunks/astro_Dr_hht3h.mjs +0 -1
  190. package/website/dist/_worker.js/chunks/aurora-x_9GHG8nSq.mjs +0 -1
  191. package/website/dist/_worker.js/chunks/awk_DHRvhXot.mjs +0 -1
  192. package/website/dist/_worker.js/chunks/ayu-dark_CcvqmEHE.mjs +0 -1
  193. package/website/dist/_worker.js/chunks/ballerina_C7SdeSZb.mjs +0 -1
  194. package/website/dist/_worker.js/chunks/bat_Dv4A3u45.mjs +0 -1
  195. package/website/dist/_worker.js/chunks/beancount_BfPf9Luv.mjs +0 -1
  196. package/website/dist/_worker.js/chunks/berry_B8rfM3lL.mjs +0 -1
  197. package/website/dist/_worker.js/chunks/bibtex_TcjYgtJM.mjs +0 -1
  198. package/website/dist/_worker.js/chunks/bicep_CrlFWCdN.mjs +0 -1
  199. package/website/dist/_worker.js/chunks/blade_lanKVYID.mjs +0 -1
  200. package/website/dist/_worker.js/chunks/bsl_BhppzXMB.mjs +0 -1
  201. package/website/dist/_worker.js/chunks/c_6FBALJTK.mjs +0 -1
  202. package/website/dist/_worker.js/chunks/cadence_2txU9LVE.mjs +0 -1
  203. package/website/dist/_worker.js/chunks/cairo_BkrFAIlP.mjs +0 -1
  204. package/website/dist/_worker.js/chunks/catppuccin-frappe_CkEqIYhU.mjs +0 -1
  205. package/website/dist/_worker.js/chunks/catppuccin-latte_DG4Gx_-v.mjs +0 -1
  206. package/website/dist/_worker.js/chunks/catppuccin-macchiato_Cwi3vCXf.mjs +0 -1
  207. package/website/dist/_worker.js/chunks/catppuccin-mocha_L9_OPlFX.mjs +0 -1
  208. package/website/dist/_worker.js/chunks/clarity_BEAe4Ulu.mjs +0 -1
  209. package/website/dist/_worker.js/chunks/clojure_VnUX6p2g.mjs +0 -1
  210. package/website/dist/_worker.js/chunks/cmake_0-SGkZEj.mjs +0 -1
  211. package/website/dist/_worker.js/chunks/cobol_92M_KGaE.mjs +0 -1
  212. package/website/dist/_worker.js/chunks/codeowners_CzMwskBv.mjs +0 -1
  213. package/website/dist/_worker.js/chunks/codeql_DWJZNHv1.mjs +0 -1
  214. package/website/dist/_worker.js/chunks/coffee_CQjKU2fh.mjs +0 -1
  215. package/website/dist/_worker.js/chunks/common-lisp_BBLWDpS5.mjs +0 -1
  216. package/website/dist/_worker.js/chunks/coq_hedRFV3D.mjs +0 -1
  217. package/website/dist/_worker.js/chunks/cpp_DlS1i6Zs.mjs +0 -1
  218. package/website/dist/_worker.js/chunks/crystal_D6n65fKV.mjs +0 -1
  219. package/website/dist/_worker.js/chunks/csharp_C6FCVFzc.mjs +0 -1
  220. package/website/dist/_worker.js/chunks/css_C5uJEgmJ.mjs +0 -1
  221. package/website/dist/_worker.js/chunks/csv_CtMYuuJl.mjs +0 -1
  222. package/website/dist/_worker.js/chunks/cue_BsPexqx6.mjs +0 -1
  223. package/website/dist/_worker.js/chunks/cypher_apzf6OBi.mjs +0 -1
  224. package/website/dist/_worker.js/chunks/d_DcvIRcgm.mjs +0 -1
  225. package/website/dist/_worker.js/chunks/dark-plus_C01ONtzj.mjs +0 -1
  226. package/website/dist/_worker.js/chunks/dart_WkzM5WrV.mjs +0 -1
  227. package/website/dist/_worker.js/chunks/dax_DjXAO5V4.mjs +0 -1
  228. package/website/dist/_worker.js/chunks/desktop_C92LCxdc.mjs +0 -1
  229. package/website/dist/_worker.js/chunks/diff_CVwM_9XJ.mjs +0 -1
  230. package/website/dist/_worker.js/chunks/docker_DPzgJf6Z.mjs +0 -1
  231. package/website/dist/_worker.js/chunks/dotenv_D_vgANvA.mjs +0 -1
  232. package/website/dist/_worker.js/chunks/dracula-soft_CLnUBwFm.mjs +0 -1
  233. package/website/dist/_worker.js/chunks/dracula_lBVpb6Lb.mjs +0 -1
  234. package/website/dist/_worker.js/chunks/dream-maker_DTLbzd_J.mjs +0 -1
  235. package/website/dist/_worker.js/chunks/edge_i54JYm3_.mjs +0 -1
  236. package/website/dist/_worker.js/chunks/elixir_BJCIjTu4.mjs +0 -1
  237. package/website/dist/_worker.js/chunks/elm_BbXD39-_.mjs +0 -1
  238. package/website/dist/_worker.js/chunks/emacs-lisp_pxa5cXaN.mjs +0 -1
  239. package/website/dist/_worker.js/chunks/erb_Ccjijeee.mjs +0 -1
  240. package/website/dist/_worker.js/chunks/erlang_B2VM_hi7.mjs +0 -1
  241. package/website/dist/_worker.js/chunks/everforest-dark_BxvIPBim.mjs +0 -1
  242. package/website/dist/_worker.js/chunks/everforest-light_B7VoyaJM.mjs +0 -1
  243. package/website/dist/_worker.js/chunks/fennel_D-uo7X6c.mjs +0 -1
  244. package/website/dist/_worker.js/chunks/fish_BjePoK3m.mjs +0 -1
  245. package/website/dist/_worker.js/chunks/fluent_C8fgkzLX.mjs +0 -1
  246. package/website/dist/_worker.js/chunks/fortran-fixed-form_D1pu5zrc.mjs +0 -1
  247. package/website/dist/_worker.js/chunks/fortran-free-form_CSGOhJD6.mjs +0 -1
  248. package/website/dist/_worker.js/chunks/fsharp_B0xy-A4Y.mjs +0 -1
  249. package/website/dist/_worker.js/chunks/gdresource_CWppjlHq.mjs +0 -1
  250. package/website/dist/_worker.js/chunks/gdscript_eQCHchcS.mjs +0 -1
  251. package/website/dist/_worker.js/chunks/gdshader_C4kxepX7.mjs +0 -1
  252. package/website/dist/_worker.js/chunks/genie_ACtQLcDW.mjs +0 -1
  253. package/website/dist/_worker.js/chunks/gherkin_BFp2uKUd.mjs +0 -1
  254. package/website/dist/_worker.js/chunks/git-commit_CLg9ZwMV.mjs +0 -1
  255. package/website/dist/_worker.js/chunks/git-rebase_DG8A80Nt.mjs +0 -1
  256. package/website/dist/_worker.js/chunks/github-dark-default_BI0EP2Kv.mjs +0 -1
  257. package/website/dist/_worker.js/chunks/github-dark-dimmed_a_NIC0Xb.mjs +0 -1
  258. package/website/dist/_worker.js/chunks/github-dark-high-contrast_jZGqT7hk.mjs +0 -1
  259. package/website/dist/_worker.js/chunks/github-dark_CHCDNd2O.mjs +0 -1
  260. package/website/dist/_worker.js/chunks/github-light-default_DRbOW5RG.mjs +0 -1
  261. package/website/dist/_worker.js/chunks/github-light-high-contrast_tn_kWutM.mjs +0 -1
  262. package/website/dist/_worker.js/chunks/github-light_D9brYzot.mjs +0 -1
  263. package/website/dist/_worker.js/chunks/gleam_Dmhu1oxW.mjs +0 -1
  264. package/website/dist/_worker.js/chunks/glimmer-js_BfZbXy8A.mjs +0 -1
  265. package/website/dist/_worker.js/chunks/glimmer-ts_B9QVICrD.mjs +0 -1
  266. package/website/dist/_worker.js/chunks/glsl_DD2PPwOs.mjs +0 -1
  267. package/website/dist/_worker.js/chunks/gnuplot_D2OYChUX.mjs +0 -1
  268. package/website/dist/_worker.js/chunks/go_DYGFTe3h.mjs +0 -1
  269. package/website/dist/_worker.js/chunks/graphql_B7XsT3nH.mjs +0 -1
  270. package/website/dist/_worker.js/chunks/groovy_BO12Uwkl.mjs +0 -1
  271. package/website/dist/_worker.js/chunks/hack_CB2_ztCP.mjs +0 -1
  272. package/website/dist/_worker.js/chunks/haml_CyfDcDD3.mjs +0 -1
  273. package/website/dist/_worker.js/chunks/handlebars_CfpxpWm2.mjs +0 -1
  274. package/website/dist/_worker.js/chunks/haskell_jUeC5uN5.mjs +0 -1
  275. package/website/dist/_worker.js/chunks/haxe_B6GxP1WB.mjs +0 -1
  276. package/website/dist/_worker.js/chunks/hcl_DwoHV2oh.mjs +0 -1
  277. package/website/dist/_worker.js/chunks/hjson_DV7cJRk4.mjs +0 -1
  278. package/website/dist/_worker.js/chunks/hlsl_BlFCscPI.mjs +0 -1
  279. package/website/dist/_worker.js/chunks/houston_COBFG1Mx.mjs +0 -1
  280. package/website/dist/_worker.js/chunks/html-derivative_C9pJ337h.mjs +0 -1
  281. package/website/dist/_worker.js/chunks/html_D1OkrZS5.mjs +0 -1
  282. package/website/dist/_worker.js/chunks/http_DIGXRqvJ.mjs +0 -1
  283. package/website/dist/_worker.js/chunks/hxml_DEwh9i-c.mjs +0 -1
  284. package/website/dist/_worker.js/chunks/hy_DDoIgW1K.mjs +0 -1
  285. package/website/dist/_worker.js/chunks/imba_B00zbHo4.mjs +0 -1
  286. package/website/dist/_worker.js/chunks/index_BDWR1Q-q.mjs +0 -1861
  287. package/website/dist/_worker.js/chunks/ini_D7XQA_p8.mjs +0 -1
  288. package/website/dist/_worker.js/chunks/java_B9wdFd8K.mjs +0 -1
  289. package/website/dist/_worker.js/chunks/javascript_CLsPGOON.mjs +0 -1
  290. package/website/dist/_worker.js/chunks/jinja_jarBCAN1.mjs +0 -1
  291. package/website/dist/_worker.js/chunks/jison_oGg3J708.mjs +0 -1
  292. package/website/dist/_worker.js/chunks/json5_DlZ1Kyaa.mjs +0 -1
  293. package/website/dist/_worker.js/chunks/json_DaYk_FMp.mjs +0 -1
  294. package/website/dist/_worker.js/chunks/jsonc_DlwgfSDs.mjs +0 -1
  295. package/website/dist/_worker.js/chunks/jsonl_BbCCVaZF.mjs +0 -1
  296. package/website/dist/_worker.js/chunks/jsonnet_Dt-G75xe.mjs +0 -1
  297. package/website/dist/_worker.js/chunks/jssm_BtKFTj2A.mjs +0 -1
  298. package/website/dist/_worker.js/chunks/jsx_DDx_xAZ8.mjs +0 -1
  299. package/website/dist/_worker.js/chunks/julia_CK0lv68l.mjs +0 -1
  300. package/website/dist/_worker.js/chunks/kanagawa-dragon_BldAK3Oo.mjs +0 -1
  301. package/website/dist/_worker.js/chunks/kanagawa-lotus_DVM8FX9_.mjs +0 -1
  302. package/website/dist/_worker.js/chunks/kanagawa-wave_Dpih0AKP.mjs +0 -1
  303. package/website/dist/_worker.js/chunks/kotlin_kWneB9V_.mjs +0 -1
  304. package/website/dist/_worker.js/chunks/kusto_BKVATd95.mjs +0 -1
  305. package/website/dist/_worker.js/chunks/laserwave_BqatxsVl.mjs +0 -1
  306. package/website/dist/_worker.js/chunks/latex_LVDcGBbc.mjs +0 -1
  307. package/website/dist/_worker.js/chunks/lean_W7qo-5M2.mjs +0 -1
  308. package/website/dist/_worker.js/chunks/less_DFNwJnBH.mjs +0 -1
  309. package/website/dist/_worker.js/chunks/light-plus_Dp0AoWsO.mjs +0 -1
  310. package/website/dist/_worker.js/chunks/liquid_D24qs0pc.mjs +0 -1
  311. package/website/dist/_worker.js/chunks/log_IPWMXriF.mjs +0 -1
  312. package/website/dist/_worker.js/chunks/logo_C6KaatrQ.mjs +0 -1
  313. package/website/dist/_worker.js/chunks/lua_CwnEf-T7.mjs +0 -1
  314. package/website/dist/_worker.js/chunks/luau_Br3-CXjS.mjs +0 -1
  315. package/website/dist/_worker.js/chunks/make_UBNG-kOo.mjs +0 -1
  316. package/website/dist/_worker.js/chunks/markdown_C7mhJFCm.mjs +0 -1
  317. package/website/dist/_worker.js/chunks/marko_4tchUvI7.mjs +0 -1
  318. package/website/dist/_worker.js/chunks/material-theme-darker_SKtaNEPn.mjs +0 -1
  319. package/website/dist/_worker.js/chunks/material-theme-lighter_zOX_DZCH.mjs +0 -1
  320. package/website/dist/_worker.js/chunks/material-theme-ocean_BN9WbhdC.mjs +0 -1
  321. package/website/dist/_worker.js/chunks/material-theme-palenight_DT_covjH.mjs +0 -1
  322. package/website/dist/_worker.js/chunks/material-theme_6RpeM3kc.mjs +0 -1
  323. package/website/dist/_worker.js/chunks/matlab_DCOXsPKR.mjs +0 -1
  324. package/website/dist/_worker.js/chunks/mdc_B9gb2UFP.mjs +0 -1
  325. package/website/dist/_worker.js/chunks/mdx_DGU7Nu9u.mjs +0 -1
  326. package/website/dist/_worker.js/chunks/mermaid_B69URzsZ.mjs +0 -1
  327. package/website/dist/_worker.js/chunks/min-dark_BgxifOMI.mjs +0 -1
  328. package/website/dist/_worker.js/chunks/min-light_BrPjXxUp.mjs +0 -1
  329. package/website/dist/_worker.js/chunks/mipsasm_9U-4_t7k.mjs +0 -1
  330. package/website/dist/_worker.js/chunks/mojo_B0wt7ug3.mjs +0 -1
  331. package/website/dist/_worker.js/chunks/monokai_B6Pxpoyi.mjs +0 -1
  332. package/website/dist/_worker.js/chunks/move_1eid4CyR.mjs +0 -1
  333. package/website/dist/_worker.js/chunks/narrat_Ds6-p5JZ.mjs +0 -1
  334. package/website/dist/_worker.js/chunks/nextflow_v2N1Qlqa.mjs +0 -1
  335. package/website/dist/_worker.js/chunks/nginx_Bp9Ab2NH.mjs +0 -1
  336. package/website/dist/_worker.js/chunks/night-owl_CdwOw_sc.mjs +0 -1
  337. package/website/dist/_worker.js/chunks/nim_BXGDUe53.mjs +0 -1
  338. package/website/dist/_worker.js/chunks/nix_CUig1nJH.mjs +0 -1
  339. package/website/dist/_worker.js/chunks/noop-middleware_B8fH5jha.mjs +0 -10
  340. package/website/dist/_worker.js/chunks/nord_SPoG1iae.mjs +0 -1
  341. package/website/dist/_worker.js/chunks/nushell_DJw1Lca8.mjs +0 -1
  342. package/website/dist/_worker.js/chunks/objective-c_Bktzl_CO.mjs +0 -1
  343. package/website/dist/_worker.js/chunks/objective-cpp_CP4DWdDp.mjs +0 -1
  344. package/website/dist/_worker.js/chunks/ocaml_CeEAs7bZ.mjs +0 -1
  345. package/website/dist/_worker.js/chunks/one-dark-pro_-hIwCNMi.mjs +0 -1
  346. package/website/dist/_worker.js/chunks/one-light_DSmYvJ05.mjs +0 -1
  347. package/website/dist/_worker.js/chunks/pascal_C-S_Ms_o.mjs +0 -1
  348. package/website/dist/_worker.js/chunks/perl_CKamvo15.mjs +0 -1
  349. package/website/dist/_worker.js/chunks/php_BlmcX_F3.mjs +0 -1
  350. package/website/dist/_worker.js/chunks/plastic_Ryt8tVoA.mjs +0 -1
  351. package/website/dist/_worker.js/chunks/plsql_Cb3v7cBj.mjs +0 -1
  352. package/website/dist/_worker.js/chunks/po_DZbdNRlo.mjs +0 -1
  353. package/website/dist/_worker.js/chunks/poimandres_bYmE3_5d.mjs +0 -1
  354. package/website/dist/_worker.js/chunks/polar_pJkMGwoW.mjs +0 -1
  355. package/website/dist/_worker.js/chunks/postcss_BAXSOKgk.mjs +0 -1
  356. package/website/dist/_worker.js/chunks/powerquery_oITMGN4x.mjs +0 -1
  357. package/website/dist/_worker.js/chunks/powershell_6306-xIF.mjs +0 -1
  358. package/website/dist/_worker.js/chunks/prisma_DSDxnZGz.mjs +0 -1
  359. package/website/dist/_worker.js/chunks/prolog_CxG7tjZR.mjs +0 -1
  360. package/website/dist/_worker.js/chunks/proto_CS9ByXm1.mjs +0 -1
  361. package/website/dist/_worker.js/chunks/pug_BMtLJo6U.mjs +0 -1
  362. package/website/dist/_worker.js/chunks/puppet_BfeeSzee.mjs +0 -1
  363. package/website/dist/_worker.js/chunks/purescript_BFfueNaH.mjs +0 -1
  364. package/website/dist/_worker.js/chunks/python_Cc4Faapv.mjs +0 -1
  365. package/website/dist/_worker.js/chunks/qml_C1CTJTK8.mjs +0 -1
  366. package/website/dist/_worker.js/chunks/qmldir_nG1KaqKR.mjs +0 -1
  367. package/website/dist/_worker.js/chunks/qss_Cncxk263.mjs +0 -1
  368. package/website/dist/_worker.js/chunks/r_ChR54Ihi.mjs +0 -1
  369. package/website/dist/_worker.js/chunks/racket_BDrhptDs.mjs +0 -1
  370. package/website/dist/_worker.js/chunks/raku_07OUHa0P.mjs +0 -1
  371. package/website/dist/_worker.js/chunks/razor_DIP3INLa.mjs +0 -1
  372. package/website/dist/_worker.js/chunks/red_DOPXfj-6.mjs +0 -1
  373. package/website/dist/_worker.js/chunks/reg_B64SwEDj.mjs +0 -1
  374. package/website/dist/_worker.js/chunks/regexp_ButFGoB5.mjs +0 -1
  375. package/website/dist/_worker.js/chunks/rel_BWJAWqZD.mjs +0 -1
  376. package/website/dist/_worker.js/chunks/riscv_79gXlbsF.mjs +0 -1
  377. package/website/dist/_worker.js/chunks/rose-pine-dawn_DHIjVGd3.mjs +0 -1
  378. package/website/dist/_worker.js/chunks/rose-pine-moon_t86aEbs0.mjs +0 -1
  379. package/website/dist/_worker.js/chunks/rose-pine_BHgrcDCs.mjs +0 -1
  380. package/website/dist/_worker.js/chunks/rst_D3F4Fcpj.mjs +0 -1
  381. package/website/dist/_worker.js/chunks/ruby_Cs7vM9iv.mjs +0 -1
  382. package/website/dist/_worker.js/chunks/rust_DpyRVatH.mjs +0 -1
  383. package/website/dist/_worker.js/chunks/sas_DW45xZXN.mjs +0 -1
  384. package/website/dist/_worker.js/chunks/sass_C6SiMwN_.mjs +0 -1
  385. package/website/dist/_worker.js/chunks/scala_DlZOjNZk.mjs +0 -1
  386. package/website/dist/_worker.js/chunks/scheme_D2ezSJXu.mjs +0 -1
  387. package/website/dist/_worker.js/chunks/scss_DG5Spjqu.mjs +0 -1
  388. package/website/dist/_worker.js/chunks/sdbl_ZCYaj4VN.mjs +0 -1
  389. package/website/dist/_worker.js/chunks/shaderlab_CAcRkg1_.mjs +0 -1
  390. package/website/dist/_worker.js/chunks/shellscript_BWwhkDVh.mjs +0 -1
  391. package/website/dist/_worker.js/chunks/shellsession_BfEA3juK.mjs +0 -1
  392. package/website/dist/_worker.js/chunks/slack-dark_CL3lSpCc.mjs +0 -1
  393. package/website/dist/_worker.js/chunks/slack-ochin_DdZKOQVh.mjs +0 -1
  394. package/website/dist/_worker.js/chunks/smalltalk_DgilzSui.mjs +0 -1
  395. package/website/dist/_worker.js/chunks/snazzy-light_eJU08Pz_.mjs +0 -1
  396. package/website/dist/_worker.js/chunks/solarized-dark_Dg_YQywx.mjs +0 -1
  397. package/website/dist/_worker.js/chunks/solarized-light_BnIsrA6p.mjs +0 -1
  398. package/website/dist/_worker.js/chunks/solidity_DkseH8pQ.mjs +0 -1
  399. package/website/dist/_worker.js/chunks/soy_DU7bOYoG.mjs +0 -1
  400. package/website/dist/_worker.js/chunks/sparql_BuI1DBDH.mjs +0 -1
  401. package/website/dist/_worker.js/chunks/splunk_B8Ha9Pkg.mjs +0 -1
  402. package/website/dist/_worker.js/chunks/sql_BniHwea5.mjs +0 -1
  403. package/website/dist/_worker.js/chunks/ssh-config_CkE1GuVe.mjs +0 -1
  404. package/website/dist/_worker.js/chunks/stata_Dtqpbd_l.mjs +0 -1
  405. package/website/dist/_worker.js/chunks/stylus_CXTtglzO.mjs +0 -1
  406. package/website/dist/_worker.js/chunks/svelte_BjWYcUCN.mjs +0 -1
  407. package/website/dist/_worker.js/chunks/swift_BzHql_rM.mjs +0 -1
  408. package/website/dist/_worker.js/chunks/synthwave-84_DLRNhxNA.mjs +0 -1
  409. package/website/dist/_worker.js/chunks/system-verilog_ChyInPph.mjs +0 -1
  410. package/website/dist/_worker.js/chunks/systemd_Bi9Qa2qD.mjs +0 -1
  411. package/website/dist/_worker.js/chunks/talonscript_B3sH_Y-V.mjs +0 -1
  412. package/website/dist/_worker.js/chunks/tasl_BJ5yipRs.mjs +0 -1
  413. package/website/dist/_worker.js/chunks/tcl_CoJQjNoP.mjs +0 -1
  414. package/website/dist/_worker.js/chunks/templ_CrU7Ffil.mjs +0 -1
  415. package/website/dist/_worker.js/chunks/terraform_DT9JSFpC.mjs +0 -1
  416. package/website/dist/_worker.js/chunks/tex_5PKu2yA0.mjs +0 -1
  417. package/website/dist/_worker.js/chunks/tokyo-night_Buo8OK7-.mjs +0 -1
  418. package/website/dist/_worker.js/chunks/toml_CPuXX3oc.mjs +0 -1
  419. package/website/dist/_worker.js/chunks/ts-tags_D0M_1VSH.mjs +0 -1
  420. package/website/dist/_worker.js/chunks/tsv_CuivVNot.mjs +0 -1
  421. package/website/dist/_worker.js/chunks/tsx_MkuGr8MY.mjs +0 -1
  422. package/website/dist/_worker.js/chunks/turtle_BqgEPK7f.mjs +0 -1
  423. package/website/dist/_worker.js/chunks/twig_r1G9rpYJ.mjs +0 -1
  424. package/website/dist/_worker.js/chunks/typescript_Au5buqzM.mjs +0 -1
  425. package/website/dist/_worker.js/chunks/typespec_47rhBK_z.mjs +0 -1
  426. package/website/dist/_worker.js/chunks/typst_BAtuQLh-.mjs +0 -1
  427. package/website/dist/_worker.js/chunks/v_BIvWImHg.mjs +0 -1
  428. package/website/dist/_worker.js/chunks/vala_DYEacj30.mjs +0 -1
  429. package/website/dist/_worker.js/chunks/vb_CikQuqGJ.mjs +0 -1
  430. package/website/dist/_worker.js/chunks/verilog_BQRENwI-.mjs +0 -1
  431. package/website/dist/_worker.js/chunks/vesper_DA0kvTmj.mjs +0 -1
  432. package/website/dist/_worker.js/chunks/vhdl_DHscJIyg.mjs +0 -1
  433. package/website/dist/_worker.js/chunks/viml_F2pvMwvG.mjs +0 -1
  434. package/website/dist/_worker.js/chunks/vitesse-black_D9tjNzd0.mjs +0 -1
  435. package/website/dist/_worker.js/chunks/vitesse-dark_Bnm5d0hd.mjs +0 -1
  436. package/website/dist/_worker.js/chunks/vitesse-light_CHwbyjNR.mjs +0 -1
  437. package/website/dist/_worker.js/chunks/vue-html_DyYtbbMK.mjs +0 -1
  438. package/website/dist/_worker.js/chunks/vue_DofN6juy.mjs +0 -1
  439. package/website/dist/_worker.js/chunks/vyper_CiR0m-OV.mjs +0 -1
  440. package/website/dist/_worker.js/chunks/wasm_CwIGgRGf.mjs +0 -1
  441. package/website/dist/_worker.js/chunks/wasm_jKWhg0J0.mjs +0 -1
  442. package/website/dist/_worker.js/chunks/wenyan_DKvVZKXW.mjs +0 -1
  443. package/website/dist/_worker.js/chunks/wgsl_BOWZY7yw.mjs +0 -1
  444. package/website/dist/_worker.js/chunks/wikitext_CXDhhHPy.mjs +0 -1
  445. package/website/dist/_worker.js/chunks/wolfram_ChkmGnW0.mjs +0 -1
  446. package/website/dist/_worker.js/chunks/xml_DXH3hHIu.mjs +0 -1
  447. package/website/dist/_worker.js/chunks/xsl_DuP2mFjg.mjs +0 -1
  448. package/website/dist/_worker.js/chunks/yaml_IGiEkTge.mjs +0 -1
  449. package/website/dist/_worker.js/chunks/zenscript_59iXGyNw.mjs +0 -1
  450. package/website/dist/_worker.js/chunks/zig_DKzb0zdT.mjs +0 -1
  451. package/website/dist/_worker.js/index.js +0 -61
  452. package/website/dist/_worker.js/manifest_Bk6136-u.mjs +0 -98
  453. package/website/dist/_worker.js/pages/_image.astro.mjs +0 -24
  454. package/website/dist/_worker.js/pages/agents.astro.mjs +0 -1
  455. package/website/dist/_worker.js/pages/animation.astro.mjs +0 -1
  456. package/website/dist/_worker.js/pages/api/playground/render.astro.mjs +0 -25562
  457. package/website/dist/_worker.js/pages/api/playground/templates.astro.mjs +0 -92
  458. package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs +0 -44
  459. package/website/dist/_worker.js/pages/config.astro.mjs +0 -1
  460. package/website/dist/_worker.js/pages/fonts.astro.mjs +0 -1
  461. package/website/dist/_worker.js/pages/getting-started.astro.mjs +0 -1
  462. package/website/dist/_worker.js/pages/helpers.astro.mjs +0 -1
  463. package/website/dist/_worker.js/pages/images.astro.mjs +0 -1
  464. package/website/dist/_worker.js/pages/index.astro.mjs +0 -1
  465. package/website/dist/_worker.js/pages/llm.txt.astro.mjs +0 -1
  466. package/website/dist/_worker.js/pages/playground/_example_.astro.mjs +0 -95
  467. package/website/dist/_worker.js/pages/playground.astro.mjs +0 -1
  468. package/website/dist/_worker.js/pages/preview.astro.mjs +0 -1
  469. package/website/dist/_worker.js/pages/sdk.astro.mjs +0 -1
  470. package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs +0 -1
  471. package/website/dist/_worker.js/pages/styling.astro.mjs +0 -1
  472. package/website/dist/_worker.js/pages/templates.astro.mjs +0 -1
  473. package/website/dist/_worker.js/pages/video.astro.mjs +0 -1
  474. package/website/dist/_worker.js/renderers.mjs +0 -2
  475. package/website/dist/agents/index.html +0 -54
  476. package/website/dist/animation/index.html +0 -1505
  477. package/website/dist/config/index.html +0 -186
  478. package/website/dist/fonts/index.html +0 -200
  479. package/website/dist/getting-started/index.html +0 -109
  480. package/website/dist/helpers/index.html +0 -350
  481. package/website/dist/images/index.html +0 -337
  482. package/website/dist/index.html +0 -141
  483. package/website/dist/llm.txt +0 -3626
  484. package/website/dist/playground/index.html +0 -6
  485. package/website/dist/preview/index.html +0 -113
  486. package/website/dist/robots.txt +0 -40
  487. package/website/dist/sdk/index.html +0 -1588
  488. package/website/dist/sitemap.xml +0 -76
  489. package/website/dist/styling/index.html +0 -368
  490. package/website/dist/templates/index.html +0 -76
  491. package/website/dist/video/index.html +0 -354
  492. package/website/package-lock.json +0 -8099
  493. package/website/package.json +0 -43
  494. package/website/public/.gitkeep +0 -5
  495. package/website/public/robots.txt +0 -40
  496. package/website/templates/og-image.tsx +0 -60
  497. package/website/wrangler.toml +0 -9
package/website/dist/animation/index.html DELETED
@@ -1,1505 +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.CZXv4DCM.css">
2
- <style>.hero[data-astro-cid-bbe6dxrz]{position:relative}html{scroll-behavior:smooth}.mobile-header[data-astro-cid-mw7aashj]{display:none}.toc-sidebar[data-astro-cid-mw7aashj]{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar{width:4px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-track{background:transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb{background-color:#ffffff1a;border-radius:2px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb:hover{background-color:#fff3}#copy-to-llm-btn[data-astro-cid-mw7aashj]{cursor:pointer}@media (max-width: 768px){.mobile-header[data-astro-cid-mw7aashj]{display:block}.desktop-sidebar[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;margin-right:0!important;padding:5rem 1.5rem 1.5rem}.toc-sidebar[data-astro-cid-mw7aashj]{display:none}#copy-to-llm-btn[data-astro-cid-mw7aashj]{width:100%;justify-content:center}}@media (max-width: 1280px){.toc-sidebar[data-astro-cid-mw7aashj]{display:none!important}main[data-astro-cid-mw7aashj]{margin-right:0!important}}
3
- </style><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
4
- </script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/playground" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/playground" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64 mr-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="animation">Animation</h1>
5
- <p>loopwind provides <strong>Tailwind-style animation classes</strong> that work with time to create smooth video animations without writing custom code.</p>
6
- <blockquote>
7
- <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>
8
- </blockquote>
9
- <h2 id="quick-start">Quick Start</h2>
10
- <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>
11
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
12
- <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>
13
- <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>
14
- <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>
15
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
16
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
17
- <span class="line"></span>
18
- <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>
19
- <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>
20
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
21
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
22
- <span class="line"></span>
23
- <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>
24
- <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>
25
- <span class="line"><span style="color:#E1E4E8"> ⬇️</span></span>
26
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
27
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
28
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
29
- <span class="line"><span style="color:#E1E4E8">}</span></span>
30
- <span class="line"></span></code></pre>
31
- <h2 id="animation-format">Animation Format</h2>
32
- <p>loopwind uses three types of animations with <strong>millisecond timing</strong>:</p>
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
- <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>
59
- <p>All timing values are in <strong>milliseconds</strong> (1000ms = 1 second).</p>
60
- <h2 id="utility-based-animations">Utility-Based Animations</h2>
61
- <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>
62
- <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>
63
- <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>
64
- <span class="line"></span>
65
- <span class="line"><span style="color:#6A737D">// Rotate 90 degrees on entrance</span></span>
66
- <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>
67
- <span class="line"></span>
68
- <span class="line"><span style="color:#6A737D">// Fade to 50% opacity in a loop</span></span>
69
- <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>
70
- <span class="line"></span>
71
- <span class="line"><span style="color:#6A737D">// Scale down with negative value</span></span>
72
- <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>
73
- <span class="line"></span></code></pre>
74
- <h3 id="supported-utilities">Supported Utilities</h3>
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
-
127
-
128
- <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>
129
- <p><strong>Translate value formats:</strong></p>
130
- <ul>
131
- <li><strong>Numeric</strong>: <code>5</code> = 20px (Tailwind spacing scale: 1 unit = 4px)</li>
132
- <li><strong>Keywords</strong>: <code>full</code> = 100%</li>
133
- <li><strong>Fractions</strong>: <code>1/2</code> = 50%, <code>1/3</code> = 33.333%, <code>2/3</code> = 66.666%, etc.</li>
134
- <li><strong>Arbitrary values</strong>: <code>[20px]</code>, <code>[5rem]</code>, <code>[10%]</code> (rem converts to px: 1rem = 16px)</li>
135
- </ul>
136
- <p>All utilities work with:</p>
137
- <ul>
138
- <li><strong>All prefixes</strong>: <code>enter-</code>, <code>exit-</code>, <code>loop-</code>, <code>animate-</code></li>
139
- <li><strong>Negative values</strong>: Prefix with <code>-</code> (e.g., <code>-translate-x-5</code>, <code>-rotate-45</code>)</li>
140
- <li><strong>Timing syntax</strong>: Add <code>/start/duration</code> (e.g., <code>enter-translate-x-5/0/800</code>)</li>
141
- </ul>
142
- <h3 id="translate-animations">Translate Animations</h3>
143
- <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>
144
- <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>
145
- <span class="line"></span>
146
- <span class="line"><span style="color:#6A737D">// Keyword: Full width (100%)</span></span>
147
- <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>
148
- <span class="line"></span>
149
- <span class="line"><span style="color:#6A737D">// Fraction: Half width (50%)</span></span>
150
- <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>
151
- <span class="line"></span>
152
- <span class="line"><span style="color:#6A737D">// Arbitrary values: Exact px or rem</span></span>
153
- <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>
154
- <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>
155
- <span class="line"></span>
156
- <span class="line"><span style="color:#6A737D">// Loop with fractions</span></span>
157
- <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>
158
- <span class="line"></span>
159
- <span class="line"><span style="color:#6A737D">// Negative values</span></span>
160
- <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>
161
- <span class="line"></span></code></pre>
162
- <h3 id="opacity-animations">Opacity Animations</h3>
163
- <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>
164
- <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>
165
- <span class="line"></span>
166
- <span class="line"><span style="color:#6A737D">// Fade to 50% opacity</span></span>
167
- <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>
168
- <span class="line"></span>
169
- <span class="line"><span style="color:#6A737D">// Pulse between 50% and 100%</span></span>
170
- <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>
171
- <span class="line"></span>
172
- <span class="line"><span style="color:#6A737D">// Fade out to 0%</span></span>
173
- <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>
174
- <span class="line"></span></code></pre>
175
- <h3 id="scale-animations">Scale Animations</h3>
176
- <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>
177
- <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>
178
- <span class="line"></span>
179
- <span class="line"><span style="color:#6A737D">// Scale to 150% (1.5x)</span></span>
180
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#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>
181
- <span class="line"></span>
182
- <span class="line"><span style="color:#6A737D">// Pulse scale in a loop</span></span>
183
- <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>
184
- <span class="line"></span>
185
- <span class="line"><span style="color:#6A737D">// Scale down to 50%</span></span>
186
- <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>
187
- <span class="line"></span></code></pre>
188
- <h3 id="rotate-animations">Rotate Animations</h3>
189
- <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>
190
- <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>
191
- <span class="line"></span>
192
- <span class="line"><span style="color:#6A737D">// Rotate 180 degrees</span></span>
193
- <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>
194
- <span class="line"></span>
195
- <span class="line"><span style="color:#6A737D">// Continuous rotation in loop (360 degrees per cycle)</span></span>
196
- <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>
197
- <span class="line"></span>
198
- <span class="line"><span style="color:#6A737D">// Rotate backwards with negative value</span></span>
199
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;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>
200
- <span class="line"></span></code></pre>
201
- <h3 id="skew-animations">Skew Animations</h3>
202
- <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>
203
- <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>
204
- <span class="line"></span>
205
- <span class="line"><span style="color:#6A737D">// Skew on Y axis</span></span>
206
- <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>
207
- <span class="line"></span>
208
- <span class="line"><span style="color:#6A737D">// Oscillating skew in loop</span></span>
209
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;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>
210
- <span class="line"></span>
211
- <span class="line"><span style="color:#6A737D">// Negative skew</span></span>
212
- <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>
213
- <span class="line"></span></code></pre>
214
- <h3 id="combining-utilities">Combining Utilities</h3>
215
- <p>You can combine multiple utility animations on the same element:</p>
216
- <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>
217
- <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>
218
- <span class="line"><span style="color:#E1E4E8"> Flying In</span></span>
219
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
220
- <span class="line"></span>
221
- <span class="line"><span style="color:#6A737D">// Fade and scale</span></span>
222
- <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>
223
- <span class="line"><span style="color:#E1E4E8"> Appearing</span></span>
224
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
225
- <span class="line"></span>
226
- <span class="line"><span style="color:#6A737D">// Enter with translate, exit with rotation</span></span>
227
- <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>
228
- <span class="line"><span style="color:#E1E4E8"> Slide and Spin</span></span>
229
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
230
- <span class="line"></span></code></pre>
231
- <h3 id="bracket-notation">Bracket Notation</h3>
232
- <p>For more CSS-like syntax, you can use brackets with units:</p>
233
- <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>
234
- <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>
235
- <span class="line"></span>
236
- <span class="line"><span style="color:#6A737D">// Using bracket notation with milliseconds</span></span>
237
- <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>
238
- <span class="line"></span>
239
- <span class="line"><span style="color:#6A737D">// Mix and match - plain numbers are milliseconds</span></span>
240
- <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>
241
- <span class="line"></span></code></pre>
242
- <h2 id="enter-animations">Enter Animations</h2>
243
- <p>Format: <code>enter-{type}/{startMs}/{durationMs}</code></p>
244
- <ul>
245
- <li><code>startMs</code> - when the animation begins (milliseconds from start)</li>
246
- <li><code>durationMs</code> - how long the animation lasts</li>
247
- </ul>
248
- <p>When values are omitted (<code>enter-fade-in</code>), it uses the full video duration.</p>
249
- <h3 id="fade-animations">Fade Animations</h3>
250
- <p>Simple opacity transitions with optional direction.</p>
251
- <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>
252
- <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>
253
- <span class="line"></span>
254
- <span class="line"><span style="color:#6A737D">// Fade in with upward motion</span></span>
255
- <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>
256
- <span class="line"></span></code></pre>
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
-
285
-
286
- <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>
287
- <h3 id="slide-animations">Slide Animations</h3>
288
- <p>Larger movement (100px) with fade.</p>
289
- <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>
290
- <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>
291
- <span class="line"></span>
292
- <span class="line"><span style="color:#6A737D">// Slide up from bottom: starts at 200ms, lasts 600ms</span></span>
293
- <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>
294
- <span class="line"></span></code></pre>
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
- <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>
321
- <h3 id="bounce-animations">Bounce Animations</h3>
322
- <p>Playful entrance with overshoot effect.</p>
323
- <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>
324
- <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>
325
- <span class="line"></span>
326
- <span class="line"><span style="color:#6A737D">// Bounce in from below</span></span>
327
- <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>
328
- <span class="line"></span></code></pre>
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
-
357
-
358
- <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>
359
- <h3 id="scale--zoom-animations">Scale &amp; Zoom Animations</h3>
360
- <p>Size-based transitions.</p>
361
- <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>
362
- <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>
363
- <span class="line"></span>
364
- <span class="line"><span style="color:#6A737D">// Zoom in from 0%</span></span>
365
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;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>
366
- <span class="line"></span></code></pre>
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
-
384
- <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>
385
- <h3 id="rotate--flip-animations">Rotate &amp; Flip Animations</h3>
386
- <p>Rotation-based transitions.</p>
387
- <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>
388
- <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>
389
- <span class="line"></span>
390
- <span class="line"><span style="color:#6A737D">// 3D flip on X axis</span></span>
391
- <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>
392
- <span class="line"></span></code></pre>
393
-
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
-
406
-
407
-
408
-
409
-
410
-
411
-
412
-
413
-
414
- <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>
415
- <h2 id="exit-animations">Exit Animations</h2>
416
- <p>Format: <code>exit-{type}/{startMs}/{durationMs}</code></p>
417
- <ul>
418
- <li><code>startMs</code> - when the exit animation begins</li>
419
- <li><code>durationMs</code> - how long the exit animation lasts</li>
420
- </ul>
421
- <p>Exit animations use the same timing system but animate elements out.</p>
422
- <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>
423
- <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>
424
- <span class="line"></span>
425
- <span class="line"><span style="color:#6A737D">// Combined enter and exit on same element</span></span>
426
- <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>
427
- <span class="line"><span style="color:#E1E4E8"> Hello and Goodbye</span></span>
428
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
429
- <span class="line"></span></code></pre>
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
-
506
-
507
- <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>
508
- <h2 id="loop-animations">Loop Animations</h2>
509
- <p>Format: <code>loop-{type}/{durationMs}</code></p>
510
- <p>Loop animations repeat every <code>{durationMs}</code> milliseconds:</p>
511
- <ul>
512
- <li><code>/1000</code> = 1 second loop</li>
513
- <li><code>/500</code> = 0.5 second loop</li>
514
- <li><code>/2000</code> = 2 second loop</li>
515
- </ul>
516
- <p>When duration is omitted (<code>loop-bounce</code>), it defaults to 1000ms (1 second).</p>
517
- <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>
518
- <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>
519
- <span class="line"></span>
520
- <span class="line"><span style="color:#6A737D">// Bounce every 800ms</span></span>
521
- <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>
522
- <span class="line"></span>
523
- <span class="line"><span style="color:#6A737D">// Full rotation every 2000ms</span></span>
524
- <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>
525
- <span class="line"></span></code></pre>
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
-
566
-
567
- <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>
568
- <h2 id="easing-functions">Easing Functions</h2>
569
- <p>Add an easing class <strong>before</strong> the animation class to control the timing curve.</p>
570
- <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>
571
- <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>
572
- <span class="line"></span>
573
- <span class="line"><span style="color:#6A737D">// Ease out (decelerate) - default</span></span>
574
- <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>
575
- <span class="line"></span>
576
- <span class="line"><span style="color:#6A737D">// Ease in-out (smooth)</span></span>
577
- <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>
578
- <span class="line"></span>
579
- <span class="line"><span style="color:#6A737D">// Strong cubic easing</span></span>
580
- <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>
581
- <span class="line"></span></code></pre>
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
-
641
-
642
- <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>
643
- <h3 id="per-animation-type-easing">Per-Animation-Type Easing</h3>
644
- <p>You can apply <strong>different easing functions</strong> to enter, exit, and loop animations on the same element using <code>enter-ease-*</code>, <code>exit-ease-*</code>, and <code>loop-ease-*</code> classes.</p>
645
- <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">// Different easing for enter and exit</span></span>
646
- <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-ease-out-cubic enter-fade-in/0/500 exit-ease-in exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
647
- <span class="line"><span style="color:#E1E4E8"> Smooth entrance, sharp exit</span></span>
648
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
649
- <span class="line"></span>
650
- <span class="line"><span style="color:#6A737D">// Loop with linear easing, enter with bounce</span></span>
651
- <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-ease-out enter-bounce-in/0/400 loop-ease-linear loop-fade/1000&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
652
- <span class="line"><span style="color:#E1E4E8"> Bouncy entrance, linear loop</span></span>
653
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
654
- <span class="line"></span>
655
- <span class="line"><span style="color:#6A737D">// Default easing still works (applies to all animations)</span></span>
656
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;ease-in-out enter-fade-in/0/500 exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
657
- <span class="line"><span style="color:#E1E4E8"> Same easing for both</span></span>
658
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
659
- <span class="line"></span>
660
- <span class="line"><span style="color:#6A737D">// Mix default with specific overrides</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/0/500 exit-ease-in-cubic exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
662
- <span class="line"><span style="color:#E1E4E8"> Default ease-out for enter, cubic-in for exit</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></code></pre>
665
- <p><strong>How it works:</strong></p>
666
- <ol>
667
- <li><strong>Default easing</strong> (<code>ease-*</code>) applies to ALL animations if no specific override is set</li>
668
- <li><strong>Specific easing</strong> (<code>enter-ease-*</code>, <code>exit-ease-*</code>, <code>loop-ease-*</code>) overrides the default for that animation type</li>
669
- <li>If both are present, specific easing takes priority for its animation type</li>
670
- </ol>
671
- <p><strong>Available easing classes:</strong></p>
672
-
673
-
674
-
675
-
676
-
677
-
678
-
679
-
680
-
681
-
682
-
683
-
684
-
685
-
686
-
687
-
688
-
689
-
690
-
691
-
692
-
693
-
694
-
695
-
696
-
697
-
698
-
699
-
700
-
701
-
702
-
703
-
704
-
705
-
706
-
707
-
708
-
709
-
710
-
711
-
712
-
713
-
714
-
715
-
716
-
717
-
718
-
719
-
720
-
721
-
722
-
723
-
724
-
725
-
726
-
727
-
728
-
729
-
730
-
731
-
732
-
733
-
734
-
735
-
736
-
737
-
738
-
739
-
740
-
741
-
742
-
743
-
744
-
745
-
746
-
747
-
748
-
749
- <table><thead><tr><th>Default (all animations)</th><th>Enter only</th><th>Exit only</th><th>Loop only</th></tr></thead><tbody><tr><td><code>ease-in</code></td><td><code>enter-ease-in</code></td><td><code>exit-ease-in</code></td><td><code>loop-ease-in</code></td></tr><tr><td><code>ease-out</code></td><td><code>enter-ease-out</code></td><td><code>exit-ease-out</code></td><td><code>loop-ease-out</code></td></tr><tr><td><code>ease-in-out</code></td><td><code>enter-ease-in-out</code></td><td><code>exit-ease-in-out</code></td><td><code>loop-ease-in-out</code></td></tr><tr><td><code>ease-in-cubic</code></td><td><code>enter-ease-in-cubic</code></td><td><code>exit-ease-in-cubic</code></td><td><code>loop-ease-in-cubic</code></td></tr><tr><td><code>ease-out-cubic</code></td><td><code>enter-ease-out-cubic</code></td><td><code>exit-ease-out-cubic</code></td><td><code>loop-ease-out-cubic</code></td></tr><tr><td><code>ease-in-out-cubic</code></td><td><code>enter-ease-in-out-cubic</code></td><td><code>exit-ease-in-out-cubic</code></td><td><code>loop-ease-in-out-cubic</code></td></tr><tr><td><code>ease-in-quart</code></td><td><code>enter-ease-in-quart</code></td><td><code>exit-ease-in-quart</code></td><td><code>loop-ease-in-quart</code></td></tr><tr><td><code>ease-out-quart</code></td><td><code>enter-ease-out-quart</code></td><td><code>exit-ease-out-quart</code></td><td><code>loop-ease-out-quart</code></td></tr><tr><td><code>ease-in-out-quart</code></td><td><code>enter-ease-in-out-quart</code></td><td><code>exit-ease-in-out-quart</code></td><td><code>loop-ease-in-out-quart</code></td></tr><tr><td><code>linear</code></td><td><code>enter-ease-linear</code></td><td><code>exit-ease-linear</code></td><td><code>loop-ease-linear</code></td></tr><tr><td><code>ease-spring</code></td><td><code>enter-ease-spring</code></td><td><code>exit-ease-spring</code></td><td><code>loop-ease-spring</code></td></tr></tbody></table>
750
- <h3 id="spring-easing">Spring Easing</h3>
751
- <p>Spring easing creates natural, physics-based bouncy animations. Use the built-in <code>ease-spring</code> easing or create custom springs with configurable parameters.</p>
752
- <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">// Default spring easing</span></span>
753
- <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-spring enter-bounce-in/0/500&#39;</span><span style="color:#E1E4E8">)}&gt;Bouncy spring!&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
754
- <span class="line"></span>
755
- <span class="line"><span style="color:#6A737D">// Per-animation-type spring</span></span>
756
- <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-ease-spring enter-fade-in/0/500 exit-ease-out exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
757
- <span class="line"><span style="color:#E1E4E8"> Spring entrance, smooth exit</span></span>
758
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
759
- <span class="line"></span>
760
- <span class="line"><span style="color:#6A737D">// Custom spring with parameters: ease-spring/mass/stiffness/damping</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;ease-spring/1/100/10 enter-scale-in/0/800&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
762
- <span class="line"><span style="color:#E1E4E8"> Custom spring (mass=1, stiffness=100, damping=10)</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>
765
- <span class="line"><span style="color:#6A737D">// More bouncy spring (lower damping)</span></span>
766
- <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-spring/1/170/8 enter-bounce-in-up/0/600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
767
- <span class="line"><span style="color:#E1E4E8"> Extra bouncy!</span></span>
768
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
769
- <span class="line"></span>
770
- <span class="line"><span style="color:#6A737D">// Stiffer spring (higher stiffness, faster)</span></span>
771
- <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-spring/1/200/12 enter-fade-in-up/0/400&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
772
- <span class="line"><span style="color:#E1E4E8"> Snappy spring</span></span>
773
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
774
- <span class="line"></span>
775
- <span class="line"><span style="color:#6A737D">// Per-animation-type custom springs</span></span>
776
- <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-ease-spring/1/150/10 enter-fade-in/0/500 exit-ease-spring/1/100/15 exit-fade-out/2500/500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
777
- <span class="line"><span style="color:#E1E4E8"> Different springs for enter and exit</span></span>
778
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
779
- <span class="line"></span></code></pre>
780
- <p><strong>Spring parameters:</strong></p>
781
-
782
-
783
-
784
-
785
-
786
-
787
-
788
-
789
-
790
-
791
-
792
-
793
-
794
-
795
-
796
-
797
-
798
-
799
-
800
-
801
-
802
-
803
-
804
-
805
-
806
-
807
-
808
-
809
-
810
- <table><thead><tr><th>Parameter</th><th>Description</th><th>Effect when increased</th><th>Default</th></tr></thead><tbody><tr><td><strong>mass</strong></td><td>Mass of the spring</td><td>Slower, more inertia</td><td>1</td></tr><tr><td><strong>stiffness</strong></td><td>Spring stiffness</td><td>Faster, snappier</td><td>100</td></tr><tr><td><strong>damping</strong></td><td>Damping coefficient</td><td>Less bounce, smoother</td><td>10</td></tr></tbody></table>
811
- <p><strong>Common spring presets:</strong></p>
812
- <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">// Gentle bounce (default)</span></span>
813
- <span class="line"><span style="color:#E1E4E8">ease</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">spring</span><span style="color:#F97583">/</span><span style="color:#79B8FF">1</span><span style="color:#F97583">/</span><span style="color:#79B8FF">100</span><span style="color:#F97583">/</span><span style="color:#79B8FF">10</span></span>
814
- <span class="line"></span>
815
- <span class="line"><span style="color:#6A737D">// Extra bouncy</span></span>
816
- <span class="line"><span style="color:#E1E4E8">ease</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">spring</span><span style="color:#F97583">/</span><span style="color:#79B8FF">1</span><span style="color:#F97583">/</span><span style="color:#79B8FF">170</span><span style="color:#F97583">/</span><span style="color:#79B8FF">8</span></span>
817
- <span class="line"></span>
818
- <span class="line"><span style="color:#6A737D">// Snappy (no bounce)</span></span>
819
- <span class="line"><span style="color:#E1E4E8">ease</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">spring</span><span style="color:#F97583">/</span><span style="color:#79B8FF">1</span><span style="color:#F97583">/</span><span style="color:#79B8FF">200</span><span style="color:#F97583">/</span><span style="color:#79B8FF">15</span></span>
820
- <span class="line"></span>
821
- <span class="line"><span style="color:#6A737D">// Slow and bouncy</span></span>
822
- <span class="line"><span style="color:#E1E4E8">ease</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">spring</span><span style="color:#F97583">/</span><span style="color:#79B8FF">2</span><span style="color:#F97583">/</span><span style="color:#79B8FF">100</span><span style="color:#F97583">/</span><span style="color:#79B8FF">8</span></span>
823
- <span class="line"></span>
824
- <span class="line"><span style="color:#6A737D">// Fast and tight</span></span>
825
- <span class="line"><span style="color:#E1E4E8">ease</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">spring</span><span style="color:#F97583">/</span><span style="color:#79B8FF">0.5</span><span style="color:#F97583">/</span><span style="color:#79B8FF">300</span><span style="color:#F97583">/</span><span style="color:#79B8FF">20</span></span>
826
- <span class="line"></span></code></pre>
827
- <p><strong>How spring works:</strong></p>
828
- <ol>
829
- <li><strong>Default <code>ease-spring</code></strong> - Uses a pre-calculated spring curve optimized for most use cases</li>
830
- <li><strong>Custom <code>ease-spring/mass/stiffness/damping</code></strong> - Generates a physics-based spring curve using the <a href="https://www.kvin.me/css-springs">damped harmonic oscillator</a> formula</li>
831
- <li>The spring automatically calculates its ideal duration to reach the final state</li>
832
- <li>Works with all animation types: <code>ease-spring</code>, <code>enter-ease-spring</code>, <code>exit-ease-spring</code>, <code>loop-ease-spring</code></li>
833
- </ol>
834
- <h2 id="combining-enter-and-exit">Combining Enter and Exit</h2>
835
- <p>You can use both enter and exit animations on the same element:</p>
836
- <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>
837
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
838
- <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>
839
- <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>
840
- <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>
841
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
842
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
843
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
844
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
845
- <span class="line"><span style="color:#E1E4E8">}</span></span>
846
- <span class="line"></span></code></pre>
847
- <p>The opacities from multiple animations are <strong>multiplied together</strong>, so you get smooth transitions that combine properly.</p>
848
- <h2 id="staggered-animations">Staggered Animations</h2>
849
- <p>Create sequenced animations by offsetting start times:</p>
850
- <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>
851
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
852
- <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>
853
- <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>
854
- <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>
855
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">]}</span></span>
856
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
857
- <span class="line"></span>
858
- <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>
859
- <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>
860
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">]}</span></span>
861
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
862
- <span class="line"></span>
863
- <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>
864
- <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>
865
- <span class="line"><span style="color:#E1E4E8"> {items[</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">]}</span></span>
866
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
867
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
868
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
869
- <span class="line"><span style="color:#E1E4E8">}</span></span>
870
- <span class="line"></span></code></pre>
871
- <h3 id="dynamic-staggering">Dynamic Staggering</h3>
872
- <p>For dynamic lists, calculate the timing programmatically:</p>
873
- <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>
874
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
875
- <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>
876
- <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>
877
- <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>
878
- <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>
879
- <span class="line"></span>
880
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
881
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
882
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
883
- <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>
884
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
885
- <span class="line"><span style="color:#E1E4E8"> {item}</span></span>
886
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
887
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
888
- <span class="line"><span style="color:#E1E4E8"> })}</span></span>
889
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
890
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
891
- <span class="line"><span style="color:#E1E4E8">}</span></span>
892
- <span class="line"></span></code></pre>
893
- <h2 id="common-patterns">Common Patterns</h2>
894
- <h3 id="intro-sequence">Intro Sequence</h3>
895
- <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>
896
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
897
- <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>
898
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Logo appears first */</span><span style="color:#E1E4E8">}</span></span>
899
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
900
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{logo}</span></span>
901
- <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>
902
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
903
- <span class="line"></span>
904
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Title bounces in */</span><span style="color:#E1E4E8">}</span></span>
905
- <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>
906
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
907
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
908
- <span class="line"></span>
909
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Subtitle fades in last */</span><span style="color:#E1E4E8">}</span></span>
910
- <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>
911
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
912
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
913
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
914
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
915
- <span class="line"><span style="color:#E1E4E8">}</span></span>
916
- <span class="line"></span></code></pre>
917
- <h3 id="text-reveal">Text Reveal</h3>
918
- <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>
919
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
920
- <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>
921
- <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>
922
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</span></span>
923
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
924
- <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>
925
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
926
- <span class="line"><span style="color:#E1E4E8"> {word}</span></span>
927
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
928
- <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
929
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
930
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
931
- <span class="line"><span style="color:#E1E4E8">}</span></span>
932
- <span class="line"></span></code></pre>
933
- <h3 id="looping-background-element">Looping Background Element</h3>
934
- <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>
935
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
936
- <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>
937
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Floating background circles */</span><span style="color:#E1E4E8">}</span></span>
938
- <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>
939
- <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>
940
- <span class="line"></span>
941
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Main content */</span><span style="color:#E1E4E8">}</span></span>
942
- <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>
943
- <span class="line"><span style="color:#E1E4E8"> {children}</span></span>
944
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
945
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
946
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
947
- <span class="line"><span style="color:#E1E4E8">}</span></span>
948
- <span class="line"></span></code></pre>
949
- <h3 id="full-enterexit-animation">Full Enter/Exit Animation</h3>
950
- <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>
951
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
952
- <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>
953
- <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>
954
- <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>
955
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
956
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
957
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
958
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
959
- <span class="line"><span style="color:#E1E4E8">}</span></span>
960
- <span class="line"></span></code></pre>
961
- <h2 id="programmatic-animations">Programmatic Animations</h2>
962
- <p>For complete control beyond animation classes, use <code>progress</code> and <code>frame</code> directly.</p>
963
- <h3 id="available-props">Available Props</h3>
964
-
965
-
966
-
967
-
968
-
969
-
970
-
971
-
972
-
973
-
974
-
975
-
976
-
977
-
978
-
979
-
980
-
981
-
982
-
983
-
984
- <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>
985
- <p>These are <strong>only available in video templates</strong>. Use them when animation classes aren’t flexible enough.</p>
986
- <h3 id="using-frame">Using <code>frame</code></h3>
987
- <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>
988
- <span class="line"><span style="color:#6A737D"> // Color cycling using frame number</span></span>
989
- <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>
990
- <span class="line"></span>
991
- <span class="line"><span style="color:#6A737D"> // Pulsing based on frame</span></span>
992
- <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>
993
- <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>
994
- <span class="line"></span>
995
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
996
- <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>
997
- <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>
998
- <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>
999
- <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>
1000
- <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>
1001
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
1002
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
1003
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
1004
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1005
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1006
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1007
- <span class="line"></span></code></pre>
1008
- <h3 id="using-progress">Using <code>progress</code></h3>
1009
- <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>
1010
- <span class="line"><span style="color:#6A737D"> // Custom fade based on progress</span></span>
1011
- <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>
1012
- <span class="line"></span>
1013
- <span class="line"><span style="color:#6A737D"> // Custom scale based on progress</span></span>
1014
- <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>
1015
- <span class="line"></span>
1016
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1017
- <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>
1018
- <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>
1019
- <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>
1020
- <span class="line"><span style="color:#E1E4E8"> opacity,</span></span>
1021
- <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>
1022
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
1023
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
1024
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
1025
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1026
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1027
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1028
- <span class="line"></span></code></pre>
1029
- <h3 id="custom-easing">Custom Easing</h3>
1030
- <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>
1031
- <span class="line"><span style="color:#6A737D"> // Smoothstep easing</span></span>
1032
- <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>
1033
- <span class="line"></span>
1034
- <span class="line"><span style="color:#6A737D"> // Elastic easing</span></span>
1035
- <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>
1036
- <span class="line"></span>
1037
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1038
- <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>
1039
- <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>
1040
- <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>
1041
- <span class="line"><span style="color:#E1E4E8"> opacity: eased,</span></span>
1042
- <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>
1043
- <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
1044
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
1045
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
1046
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1047
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1048
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1049
- <span class="line"></span></code></pre>
1050
- <h3 id="when-to-use-programmatic-animations">When to Use Programmatic Animations</h3>
1051
- <p>Use <code>progress</code>/<code>frame</code> instead of animation classes when you need:</p>
1052
- <ul>
1053
- <li><strong>Custom easing functions</strong> (elastic, bounce with specific curves beyond built-in ease-spring)</li>
1054
- <li><strong>Color cycling or gradients</strong> based on time</li>
1055
- <li><strong>Mathematical animations</strong> (sine waves, spirals, etc.)</li>
1056
- <li><strong>Complex multi-property animations</strong> that need precise coordination</li>
1057
- <li><strong>Conditional logic</strong> based on specific frame numbers</li>
1058
- </ul>
1059
- <p>For everything else, prefer animation classes - they’re simpler and more maintainable.</p>
1060
- <h3 id="animating-along-paths">Animating Along Paths</h3>
1061
- <p>Animate elements along SVG paths with proper rotation using built-in <strong>path helpers</strong>:</p>
1062
- <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"> PathFollowing</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">path</span><span style="color:#E1E4E8"> }) {</span></span>
1063
- <span class="line"><span style="color:#6A737D"> // Follow a quadratic Bezier curve - one line!</span></span>
1064
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> rocket</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> path.</span><span style="color:#B392F0">followQuadratic</span><span style="color:#E1E4E8">(</span></span>
1065
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }, </span><span style="color:#6A737D">// Start point</span></span>
1066
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">960</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">150</span><span style="color:#E1E4E8"> }, </span><span style="color:#6A737D">// Control point</span></span>
1067
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">1720</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }, </span><span style="color:#6A737D">// End point</span></span>
1068
- <span class="line"><span style="color:#E1E4E8"> progress</span></span>
1069
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1070
- <span class="line"></span>
1071
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1072
- <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">{{ display: </span><span style="color:#9ECBFF">&#39;flex&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;relative w-full h-full bg-gray-900&#39;</span><span style="color:#E1E4E8">) }}&gt;</span></span>
1073
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Draw the path (optional) */</span><span style="color:#E1E4E8">}</span></span>
1074
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;1920&quot;</span><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;1080&quot;</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ position: </span><span style="color:#9ECBFF">&#39;absolute&#39;</span><span style="color:#E1E4E8"> }}&gt;</span></span>
1075
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">path</span></span>
1076
- <span class="line"><span style="color:#B392F0"> d</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;M 200 400 Q 960 150 1720 400&quot;</span></span>
1077
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;rgba(255,255,255,0.2)&quot;</span></span>
1078
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">}</span></span>
1079
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1080
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1081
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1082
- <span class="line"></span>
1083
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Element following the path */</span><span style="color:#E1E4E8">}</span></span>
1084
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
1085
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
1086
- <span class="line"><span style="color:#E1E4E8"> position: </span><span style="color:#9ECBFF">&quot;absolute&quot;</span><span style="color:#E1E4E8">,</span></span>
1087
- <span class="line"><span style="color:#E1E4E8"> left: rocket.x,</span></span>
1088
- <span class="line"><span style="color:#E1E4E8"> top: rocket.y,</span></span>
1089
- <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`translate(-50%, -50%) rotate(${</span><span style="color:#E1E4E8">rocket</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">angle</span><span style="color:#9ECBFF">}deg)`</span><span style="color:#E1E4E8">,</span></span>
1090
- <span class="line"><span style="color:#E1E4E8"> fontSize: </span><span style="color:#9ECBFF">&#39;48px&#39;</span></span>
1091
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
1092
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
1093
- <span class="line"><span style="color:#E1E4E8"> 🚀</span></span>
1094
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1095
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1096
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1097
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1098
- <span class="line"></span></code></pre>
1099
- <h3 id="text-path-animations">Text Path Animations</h3>
1100
- <p>Combine <code>textPath</code> helpers with animation classes to create animated text along curves:</p>
1101
- <p><strong>Rotating text around a circle:</strong></p>
1102
- <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"> RotatingCircleText</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">textPath</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8"> }) {</span></span>
1103
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1104
- <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 bg-black&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
1105
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Text rotates around circle using progress */</span><span style="color:#E1E4E8">}</span></span>
1106
- <span class="line"><span style="color:#E1E4E8"> {textPath.</span><span style="color:#B392F0">onCircle</span><span style="color:#E1E4E8">(</span></span>
1107
- <span class="line"><span style="color:#9ECBFF"> &quot;SPINNING TEXT • AROUND • &quot;</span><span style="color:#E1E4E8">,</span></span>
1108
- <span class="line"><span style="color:#79B8FF"> 960</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// center x</span></span>
1109
- <span class="line"><span style="color:#79B8FF"> 540</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// center y</span></span>
1110
- <span class="line"><span style="color:#79B8FF"> 400</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// radius</span></span>
1111
- <span class="line"><span style="color:#E1E4E8"> progress, </span><span style="color:#6A737D">// rotation offset (0-1 animates full rotation)</span></span>
1112
- <span class="line"><span style="color:#E1E4E8"> {</span></span>
1113
- <span class="line"><span style="color:#E1E4E8"> fontSize: </span><span style="color:#9ECBFF">&quot;3xl&quot;</span><span style="color:#E1E4E8">,</span></span>
1114
- <span class="line"><span style="color:#E1E4E8"> fontWeight: </span><span style="color:#9ECBFF">&quot;bold&quot;</span><span style="color:#E1E4E8">,</span></span>
1115
- <span class="line"><span style="color:#E1E4E8"> color: </span><span style="color:#9ECBFF">&quot;yellow-300&quot;</span></span>
1116
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
1117
- <span class="line"><span style="color:#E1E4E8"> )}</span></span>
1118
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1119
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1120
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1121
- <span class="line"></span></code></pre>
1122
- <p><strong>Animated text reveal along a path:</strong></p>
1123
- <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"> PathTextReveal</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">textPath</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">progress</span><span style="color:#E1E4E8"> }) {</span></span>
1124
- <span class="line"><span style="color:#6A737D"> // Create custom path follower that animates position</span></span>
1125
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#B392F0"> pathFollower</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">t</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
1126
- <span class="line"><span style="color:#6A737D"> // Only show characters up to current progress</span></span>
1127
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> visibleProgress</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> progress </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 1.5</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Extend range for smooth reveal</span></span>
1128
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> opacity</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">&lt;</span><span style="color:#E1E4E8"> visibleProgress </span><span style="color:#F97583">?</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583"> :</span><span style="color:#79B8FF"> 0</span><span style="color:#E1E4E8">;</span></span>
1129
- <span class="line"></span>
1130
- <span class="line"><span style="color:#6A737D"> // Follow quadratic curve</span></span>
1131
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> pos</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
1132
- <span class="line"><span style="color:#E1E4E8"> x: (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 200</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 960</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 1720</span><span style="color:#E1E4E8">,</span></span>
1133
- <span class="line"><span style="color:#E1E4E8"> y: (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 400</span><span style="color:#F97583"> +</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 150</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 400</span><span style="color:#E1E4E8">,</span></span>
1134
- <span class="line"><span style="color:#E1E4E8"> angle: </span><span style="color:#79B8FF">0</span></span>
1135
- <span class="line"><span style="color:#E1E4E8"> };</span></span>
1136
- <span class="line"></span>
1137
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> { </span><span style="color:#F97583">...</span><span style="color:#E1E4E8">pos, opacity };</span></span>
1138
- <span class="line"><span style="color:#E1E4E8"> };</span></span>
1139
- <span class="line"></span>
1140
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1141
- <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 bg-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
1142
- <span class="line"><span style="color:#E1E4E8"> {textPath.</span><span style="color:#B392F0">onPath</span><span style="color:#E1E4E8">(</span></span>
1143
- <span class="line"><span style="color:#9ECBFF"> &quot;REVEALING TEXT&quot;</span><span style="color:#E1E4E8">,</span></span>
1144
- <span class="line"><span style="color:#E1E4E8"> pathFollower,</span></span>
1145
- <span class="line"><span style="color:#E1E4E8"> {</span></span>
1146
- <span class="line"><span style="color:#E1E4E8"> fontSize: </span><span style="color:#9ECBFF">&quot;4xl&quot;</span><span style="color:#E1E4E8">,</span></span>
1147
- <span class="line"><span style="color:#E1E4E8"> fontWeight: </span><span style="color:#9ECBFF">&quot;bold&quot;</span><span style="color:#E1E4E8">,</span></span>
1148
- <span class="line"><span style="color:#E1E4E8"> color: </span><span style="color:#9ECBFF">&quot;blue-300&quot;</span></span>
1149
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
1150
- <span class="line"><span style="color:#E1E4E8"> ).</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">char</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>
1151
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i} </span><span style="color:#B392F0">style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ </span><span style="color:#F97583">...</span><span style="color:#E1E4E8">char.props.style, opacity: char.props.style.opacity </span><span style="color:#F97583">||</span><span style="color:#79B8FF"> 1</span><span style="color:#E1E4E8"> }}&gt;</span></span>
1152
- <span class="line"><span style="color:#E1E4E8"> {char}</span></span>
1153
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1154
- <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
1155
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1156
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1157
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1158
- <span class="line"></span></code></pre>
1159
- <p><strong>Staggered character entrance:</strong></p>
1160
- <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"> StaggeredCircleText</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">textPath</span><span style="color:#E1E4E8"> }) {</span></span>
1161
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> text</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> &quot;HELLO WORLD&quot;</span><span style="color:#E1E4E8">;</span></span>
1162
- <span class="line"></span>
1163
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1164
- <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 bg-slate-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
1165
- <span class="line"><span style="color:#E1E4E8"> {textPath.</span><span style="color:#B392F0">onCircle</span><span style="color:#E1E4E8">(</span></span>
1166
- <span class="line"><span style="color:#E1E4E8"> text,</span></span>
1167
- <span class="line"><span style="color:#79B8FF"> 960</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">540</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">,</span></span>
1168
- <span class="line"><span style="color:#E1E4E8"> { fontSize: </span><span style="color:#9ECBFF">&quot;4xl&quot;</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#9ECBFF">&quot;bold&quot;</span><span style="color:#E1E4E8">, color: </span><span style="color:#9ECBFF">&quot;white&quot;</span><span style="color:#E1E4E8"> }</span></span>
1169
- <span class="line"><span style="color:#E1E4E8"> ).</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">char</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>
1170
- <span class="line"><span style="color:#6A737D"> // Stagger fade-in: each character starts 50ms later</span></span>
1171
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> staggerDelay</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> i </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 50</span><span style="color:#E1E4E8">;</span></span>
1172
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1173
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
1174
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
1175
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
1176
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#E1E4E8">char.props.style,</span></span>
1177
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">`enter-fade-in/${</span><span style="color:#E1E4E8">staggerDelay</span><span style="color:#9ECBFF">}/300 enter-scale-100/${</span><span style="color:#E1E4E8">staggerDelay</span><span style="color:#9ECBFF">}/300`</span><span style="color:#E1E4E8">)</span></span>
1178
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
1179
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
1180
- <span class="line"><span style="color:#E1E4E8"> {char.props.children}</span></span>
1181
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1182
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1183
- <span class="line"><span style="color:#E1E4E8"> })}</span></span>
1184
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1185
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1186
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1187
- <span class="line"></span></code></pre>
1188
- <p><strong>Text with bounce entrance along arc:</strong></p>
1189
- <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"> BouncyArcText</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">textPath</span><span style="color:#E1E4E8"> }) {</span></span>
1190
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1191
- <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 bg-gradient-to-br from-purple-600 to-blue-500&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
1192
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Draw the arc path */</span><span style="color:#E1E4E8">}</span></span>
1193
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;1920&quot;</span><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;1080&quot;</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ position: </span><span style="color:#9ECBFF">&#39;absolute&#39;</span><span style="color:#E1E4E8"> }}&gt;</span></span>
1194
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">path</span></span>
1195
- <span class="line"><span style="color:#B392F0"> d</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;M 300 900 A 600 600 0 0 1 1620 900&quot;</span></span>
1196
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;rgba(255,255,255,0.2)&quot;</span></span>
1197
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">2</span><span style="color:#E1E4E8">}</span></span>
1198
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1199
- <span class="line"><span style="color:#B392F0"> strokeDasharray</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;5 5&quot;</span></span>
1200
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1201
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1202
- <span class="line"></span>
1203
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Text follows arc with staggered bounce */</span><span style="color:#E1E4E8">}</span></span>
1204
- <span class="line"><span style="color:#E1E4E8"> {textPath.</span><span style="color:#B392F0">onArc</span><span style="color:#E1E4E8">(</span></span>
1205
- <span class="line"><span style="color:#9ECBFF"> &quot;BOUNCING ON ARC&quot;</span><span style="color:#E1E4E8">,</span></span>
1206
- <span class="line"><span style="color:#79B8FF"> 960</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// cx</span></span>
1207
- <span class="line"><span style="color:#79B8FF"> 300</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// cy</span></span>
1208
- <span class="line"><span style="color:#79B8FF"> 600</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// radius</span></span>
1209
- <span class="line"><span style="color:#79B8FF"> 180</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// start angle</span></span>
1210
- <span class="line"><span style="color:#79B8FF"> 360</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// end angle</span></span>
1211
- <span class="line"><span style="color:#E1E4E8"> { fontSize: </span><span style="color:#9ECBFF">&quot;3xl&quot;</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#9ECBFF">&quot;bold&quot;</span><span style="color:#E1E4E8">, color: </span><span style="color:#9ECBFF">&quot;white&quot;</span><span style="color:#E1E4E8"> }</span></span>
1212
- <span class="line"><span style="color:#E1E4E8"> ).</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">char</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>
1213
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
1214
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
1215
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
1216
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#E1E4E8">char.props.style,</span></span>
1217
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">`ease-out enter-bounce-in-up/${</span><span style="color:#E1E4E8">i</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 80</span><span style="color:#9ECBFF">}/500`</span><span style="color:#E1E4E8">)</span></span>
1218
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
1219
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
1220
- <span class="line"><span style="color:#E1E4E8"> {char.props.children}</span></span>
1221
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1222
- <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
1223
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1224
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1225
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1226
- <span class="line"></span></code></pre>
1227
- <p><strong>Loop animation with text on curve:</strong></p>
1228
- <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"> LoopingCurveText</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">textPath</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">frame</span><span style="color:#E1E4E8"> }) {</span></span>
1229
- <span class="line"><span style="color:#6A737D"> // Calculate wave effect using frame</span></span>
1230
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> waveOffset</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:#79B8FF"> 30</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.1</span><span style="color:#E1E4E8">;</span></span>
1231
- <span class="line"></span>
1232
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1233
- <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 bg-black&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
1234
- <span class="line"><span style="color:#E1E4E8"> {textPath.</span><span style="color:#B392F0">onQuadratic</span><span style="color:#E1E4E8">(</span></span>
1235
- <span class="line"><span style="color:#9ECBFF"> &quot;WAVY TEXT&quot;</span><span style="color:#E1E4E8">,</span></span>
1236
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">200</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
1237
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">960</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">150</span><span style="color:#E1E4E8"> },</span></span>
1238
- <span class="line"><span style="color:#E1E4E8"> { x: </span><span style="color:#79B8FF">1720</span><span style="color:#E1E4E8">, y: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
1239
- <span class="line"><span style="color:#E1E4E8"> { fontSize: </span><span style="color:#9ECBFF">&quot;4xl&quot;</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#9ECBFF">&quot;bold&quot;</span><span style="color:#E1E4E8">, color: </span><span style="color:#9ECBFF">&quot;pink-300&quot;</span><span style="color:#E1E4E8"> }</span></span>
1240
- <span class="line"><span style="color:#E1E4E8"> ).</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">((</span><span style="color:#FFAB70">char</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>
1241
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
1242
- <span class="line"><span style="color:#B392F0"> key</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{i}</span></span>
1243
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
1244
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#E1E4E8">char.props.style,</span></span>
1245
- <span class="line"><span style="color:#E1E4E8"> transform: </span><span style="color:#9ECBFF">`${</span><span style="color:#E1E4E8">char</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">props</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">style</span><span style="color:#9ECBFF">.</span><span style="color:#E1E4E8">transform</span><span style="color:#9ECBFF">} translateY(${</span><span style="color:#E1E4E8">Math</span><span style="color:#9ECBFF">.</span><span style="color:#B392F0">sin</span><span style="color:#9ECBFF">((</span><span style="color:#E1E4E8">i</span><span style="color:#F97583"> +</span><span style="color:#E1E4E8"> frame</span><span style="color:#9ECBFF">) </span><span style="color:#F97583">/</span><span style="color:#79B8FF"> 5</span><span style="color:#9ECBFF">) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 10</span><span style="color:#9ECBFF">}px)`</span></span>
1246
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
1247
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
1248
- <span class="line"><span style="color:#E1E4E8"> {char.props.children}</span></span>
1249
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1250
- <span class="line"><span style="color:#E1E4E8"> ))}</span></span>
1251
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1252
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1253
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1254
- <span class="line"></span></code></pre>
1255
- <p><strong>Tips for animating text paths:</strong></p>
1256
- <ol>
1257
- <li><strong>Use <code>progress</code> for smooth rotation</strong> on circles and arcs</li>
1258
- <li><strong>Map over returned characters</strong> to apply individual animations</li>
1259
- <li><strong>Combine with animation classes</strong> like <code>enter-fade-in</code>, <code>enter-bounce-in</code>, etc.</li>
1260
- <li><strong>Stagger character animations</strong> by calculating delays: <code>i * delayMs</code></li>
1261
- <li><strong>Use <code>frame</code> for continuous effects</strong> like waves or pulsing</li>
1262
- <li><strong>Preserve the original transform</strong> when adding animations: <code>transform: &#39;${char.props.style.transform} ...&#39;</code></li>
1263
- </ol>
1264
- <p><strong>Common path types:</strong></p>
1265
- <p><strong>Quadratic Bezier</strong> (Q command):</p>
1266
- <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">// Position: (1-t)²·P0 + 2(1-t)t·P1 + t²·P2</span></span>
1267
- <span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> pointOnQuadraticBezier</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">p0</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">t</span><span style="color:#E1E4E8">) {</span></span>
1268
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> x</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.x </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.x;</span></span>
1269
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> y</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.y </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.y;</span></span>
1270
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> { x, y };</span></span>
1271
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1272
- <span class="line"></span>
1273
- <span class="line"><span style="color:#6A737D">// Tangent angle</span></span>
1274
- <span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> angleOnQuadraticBezier</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">p0</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">t</span><span style="color:#E1E4E8">) {</span></span>
1275
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> dx</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (p1.x </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> p0.x) </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (p2.x </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> p1.x);</span></span>
1276
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> dy</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (p1.y </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> p0.y) </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 2</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (p2.y </span><span style="color:#F97583">-</span><span style="color:#E1E4E8"> p1.y);</span></span>
1277
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">atan2</span><span style="color:#E1E4E8">(dy, dx) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">180</span><span style="color:#F97583"> /</span><span style="color:#E1E4E8"> Math.</span><span style="color:#79B8FF">PI</span><span style="color:#E1E4E8">);</span></span>
1278
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1279
- <span class="line"></span></code></pre>
1280
- <p><strong>Cubic Bezier</strong> (C command):</p>
1281
- <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">// Position: (1-t)³·P0 + 3(1-t)²t·P1 + 3(1-t)t²·P2 + t³·P3</span></span>
1282
- <span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> pointOnCubicBezier</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">p0</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p3</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">t</span><span style="color:#E1E4E8">) {</span></span>
1283
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> mt</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t;</span></span>
1284
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> mt2</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> mt;</span></span>
1285
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> mt3</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> mt;</span></span>
1286
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> t2</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t;</span></span>
1287
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> t3</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t;</span></span>
1288
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> x</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> mt3 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.x </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> t3 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p3.x;</span></span>
1289
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> y</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> mt3 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.y </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> t3 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p3.y;</span></span>
1290
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> { x, y };</span></span>
1291
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1292
- <span class="line"></span>
1293
- <span class="line"><span style="color:#6A737D">// Tangent angle</span></span>
1294
- <span class="line"><span style="color:#F97583">function</span><span style="color:#B392F0"> angleOnCubicBezier</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">p0</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">p3</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">t</span><span style="color:#E1E4E8">) {</span></span>
1295
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> mt</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> 1</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8"> t;</span></span>
1296
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> mt2</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> mt;</span></span>
1297
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> t2</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t;</span></span>
1298
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> dx</span><span style="color:#F97583"> =</span><span style="color:#F97583"> -</span><span style="color:#79B8FF">3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.x </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 6</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.x </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 6</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.x </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p3.x;</span></span>
1299
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> dy</span><span style="color:#F97583"> =</span><span style="color:#F97583"> -</span><span style="color:#79B8FF">3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p0.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.y </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 6</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p1.y </span><span style="color:#F97583">-</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 6</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> mt </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> t </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p2.y </span><span style="color:#F97583">+</span><span style="color:#79B8FF"> 3</span><span style="color:#F97583"> *</span><span style="color:#E1E4E8"> t2 </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> p3.y;</span></span>
1300
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">atan2</span><span style="color:#E1E4E8">(dy, dx) </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">180</span><span style="color:#F97583"> /</span><span style="color:#E1E4E8"> Math.</span><span style="color:#79B8FF">PI</span><span style="color:#E1E4E8">);</span></span>
1301
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1302
- <span class="line"></span></code></pre>
1303
- <p><strong>Circle</strong>:</p>
1304
- <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">function</span><span style="color:#B392F0"> pointOnCircle</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">cx</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">cy</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">radius</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">angleRadians</span><span style="color:#E1E4E8">) {</span></span>
1305
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> {</span></span>
1306
- <span class="line"><span style="color:#E1E4E8"> x: cx </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> radius </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">cos</span><span style="color:#E1E4E8">(angleRadians),</span></span>
1307
- <span class="line"><span style="color:#E1E4E8"> y: cy </span><span style="color:#F97583">+</span><span style="color:#E1E4E8"> radius </span><span style="color:#F97583">*</span><span style="color:#E1E4E8"> Math.</span><span style="color:#B392F0">sin</span><span style="color:#E1E4E8">(angleRadians)</span></span>
1308
- <span class="line"><span style="color:#E1E4E8"> };</span></span>
1309
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1310
- <span class="line"></span>
1311
- <span class="line"><span style="color:#6A737D">// Usage</span></span>
1312
- <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> angleRadians</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:#79B8FF">PI</span><span style="color:#F97583"> *</span><span style="color:#79B8FF"> 2</span><span style="color:#E1E4E8">;</span></span>
1313
- <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> pos</span><span style="color:#F97583"> =</span><span style="color:#B392F0"> pointOnCircle</span><span style="color:#E1E4E8">(</span><span style="color:#79B8FF">300</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">300</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">100</span><span style="color:#E1E4E8">, angleRadians);</span></span>
1314
- <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> tangentAngle</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (angleRadians </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 180</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"> 90</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Tangent is perpendicular</span></span>
1315
- <span class="line"></span></code></pre>
1316
- <p><strong>Tips:</strong></p>
1317
- <ul>
1318
- <li>Use <code>progress</code> (0-1) for smooth animation</li>
1319
- <li>The <code>translate(-50%, -50%)</code> centers the element on the path</li>
1320
- <li>Combine rotation with the translate: <code>translate(-50%, -50%) rotate(${angle}deg)</code></li>
1321
- <li>For text following a path, you can animate individual characters at different progress values</li>
1322
- </ul>
1323
- <h2 id="svg-stroke-animations">SVG Stroke Animations</h2>
1324
- <p>Animate SVG path strokes with the <strong>stroke-dash</strong> classes, perfect for drawing or erasing line art, icons, and illustrations.</p>
1325
- <h3 id="how-it-works">How It Works</h3>
1326
- <p>SVG stroke animations use <code>strokeDasharray</code> and <code>strokeDashoffset</code> CSS properties to create drawing effects:</p>
1327
- <ol>
1328
- <li><strong>Enter animations</strong> - Draw the stroke from start to finish</li>
1329
- <li><strong>Exit animations</strong> - Erase the stroke from finish to start</li>
1330
- <li><strong>Loop animations</strong> - Continuously draw and erase</li>
1331
- </ol>
1332
- <h3 id="format">Format</h3>
1333
- <p>All stroke-dash animations require the <strong>path length</strong> in brackets:</p>
1334
- <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:#E1E4E8">enter</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">stroke</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">dash</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">[length]</span><span style="color:#F97583">/</span><span style="color:#E1E4E8">start</span><span style="color:#F97583">/</span><span style="color:#E1E4E8">duration</span></span>
1335
- <span class="line"><span style="color:#E1E4E8">exit</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">stroke</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">dash</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">[length]</span><span style="color:#F97583">/</span><span style="color:#E1E4E8">start</span><span style="color:#F97583">/</span><span style="color:#E1E4E8">duration</span></span>
1336
- <span class="line"><span style="color:#E1E4E8">loop</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">stroke</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">dash</span><span style="color:#F97583">-</span><span style="color:#E1E4E8">[length]</span><span style="color:#F97583">/</span><span style="color:#E1E4E8">duration</span></span>
1337
- <span class="line"></span></code></pre>
1338
- <h3 id="basic-examples">Basic Examples</h3>
1339
- <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"> SVGAnimation</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
1340
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1341
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;400&quot;</span><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;200&quot;</span><span style="color:#B392F0"> viewBox</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;0 0 400 200&quot;</span><span style="color:#E1E4E8">&gt;</span></span>
1342
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Draw a curve over 1 second */</span><span style="color:#E1E4E8">}</span></span>
1343
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">path</span></span>
1344
- <span class="line"><span style="color:#B392F0"> d</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;M10 150 Q 95 10 180 150&quot;</span></span>
1345
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;black&quot;</span></span>
1346
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">4</span><span style="color:#E1E4E8">}</span></span>
1347
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1348
- <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;enter-stroke-dash-[300]/0/1000&#39;</span><span style="color:#E1E4E8">)}</span></span>
1349
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1350
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1351
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1352
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1353
- <span class="line"></span></code></pre>
1354
- <h3 id="enter-animations-drawing">Enter Animations (Drawing)</h3>
1355
- <p>Draw strokes from 0% to 100%:</p>
1356
- <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">// Draw a 300px path over 1 second</span></span>
1357
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[300]/0/1000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1358
- <span class="line"></span>
1359
- <span class="line"><span style="color:#6A737D">// Draw with spring easing</span></span>
1360
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-spring enter-stroke-dash-[500]/0/1500&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1361
- <span class="line"></span>
1362
- <span class="line"><span style="color:#6A737D">// Stagger multiple paths</span></span>
1363
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[200]/0/600&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1364
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[200]/200/600&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1365
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[200]/400/600&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1366
- <span class="line"></span></code></pre>
1367
- <h3 id="exit-animations-erasing">Exit Animations (Erasing)</h3>
1368
- <p>Erase strokes from 100% to 0%:</p>
1369
- <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">// Erase starting at 2000ms, lasting 500ms</span></span>
1370
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[300]/2000/500&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1371
- <span class="line"></span>
1372
- <span class="line"><span style="color:#6A737D">// Draw then erase the same path</span></span>
1373
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[400]/0/800 exit-stroke-dash-[400]/2200/800&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1374
- <span class="line"></span></code></pre>
1375
- <h3 id="loop-animations-1">Loop Animations</h3>
1376
- <p>Continuously draw and erase:</p>
1377
- <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">// Loop every 2 seconds (draws in first half, erases in second half)</span></span>
1378
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[300]/2000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1379
- <span class="line"></span>
1380
- <span class="line"><span style="color:#6A737D">// Faster loop</span></span>
1381
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[200]/1000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1382
- <span class="line"></span></code></pre>
1383
- <h3 id="getting-path-length">Getting Path Length</h3>
1384
- <p>To find the path length for your SVG:</p>
1385
- <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">// In browser console or component:</span></span>
1386
- <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> path</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> document.</span><span style="color:#B392F0">querySelector</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;path&#39;</span><span style="color:#E1E4E8">);</span></span>
1387
- <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> length</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> path.</span><span style="color:#B392F0">getTotalLength</span><span style="color:#E1E4E8">();</span></span>
1388
- <span class="line"><span style="color:#E1E4E8">console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(length); </span><span style="color:#6A737D">// e.g., 347.89</span></span>
1389
- <span class="line"></span></code></pre>
1390
- <p>Then use that value:</p>
1391
- <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:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[347.89]/0/1000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1392
- <span class="line"></span></code></pre>
1393
- <h3 id="complete-example">Complete Example</h3>
1394
- <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"> DrawingEffect</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
1395
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1396
- <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>
1397
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;600&quot;</span><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;400&quot;</span><span style="color:#B392F0"> viewBox</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;0 0 600 400&quot;</span><span style="color:#E1E4E8">&gt;</span></span>
1398
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Checkmark icon drawn in sequence */</span><span style="color:#E1E4E8">}</span></span>
1399
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">path</span></span>
1400
- <span class="line"><span style="color:#B392F0"> d</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;M100 200 L 200 300 L 400 100&quot;</span></span>
1401
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#10b981&quot;</span></span>
1402
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">8</span><span style="color:#E1E4E8">}</span></span>
1403
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1404
- <span class="line"><span style="color:#B392F0"> strokeLinecap</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;round&quot;</span></span>
1405
- <span class="line"><span style="color:#B392F0"> strokeLinejoin</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;round&quot;</span></span>
1406
- <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;ease-out enter-stroke-dash-[600]/0/1200&#39;</span><span style="color:#E1E4E8">)}</span></span>
1407
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1408
- <span class="line"></span>
1409
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Circle drawn after checkmark */</span><span style="color:#E1E4E8">}</span></span>
1410
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">circle</span></span>
1411
- <span class="line"><span style="color:#B392F0"> cx</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;250&quot;</span></span>
1412
- <span class="line"><span style="color:#B392F0"> cy</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;200&quot;</span></span>
1413
- <span class="line"><span style="color:#B392F0"> r</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;150&quot;</span></span>
1414
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#10b981&quot;</span></span>
1415
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">6</span><span style="color:#E1E4E8">}</span></span>
1416
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1417
- <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;ease-out enter-stroke-dash-[942]/1000/1000&#39;</span><span style="color:#E1E4E8">)}</span></span>
1418
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1419
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1420
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1421
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1422
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1423
- <span class="line"></span></code></pre>
1424
- <h3 id="combining-with-other-animations">Combining with Other Animations</h3>
1425
- <p>Stroke animations work alongside other animation classes:</p>
1426
- <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 while drawing</span></span>
1427
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">path</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-stroke-dash-[300]/0/1000 enter-fade-in/0/1000&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
1428
- <span class="line"></span>
1429
- <span class="line"><span style="color:#6A737D">// Draw with pulsing color</span></span>
1430
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1431
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">path</span></span>
1432
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;url(#gradient)&quot;</span></span>
1433
- <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;enter-stroke-dash-[500]/0/1500&#39;</span><span style="color:#E1E4E8">)}</span></span>
1434
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1435
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">defs</span><span style="color:#E1E4E8">&gt;</span></span>
1436
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#79B8FF">linearGradient</span><span style="color:#B392F0"> id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;gradient&quot;</span><span style="color:#E1E4E8">&gt;</span></span>
1437
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">stop</span><span style="color:#B392F0"> offset</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;0%&quot;</span><span style="color:#B392F0"> stopColor</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#8b5cf6&quot;</span><span style="color:#E1E4E8"> /&gt;</span></span>
1438
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">stop</span><span style="color:#B392F0"> offset</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;100%&quot;</span><span style="color:#B392F0"> stopColor</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#ec4899&quot;</span><span style="color:#E1E4E8"> /&gt;</span></span>
1439
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#79B8FF">linearGradient</span><span style="color:#E1E4E8">&gt;</span></span>
1440
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">defs</span><span style="color:#E1E4E8">&gt;</span></span>
1441
- <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1442
- <span class="line"></span></code></pre>
1443
- <h3 id="animated-dashed-strokes-marching-ants">Animated Dashed Strokes (Marching Ants)</h3>
1444
- <p>For <strong>marching ants</strong> or <strong>animated dashed patterns</strong>, use <code>frame</code> or <code>progress</code> directly instead of animation classes:</p>
1445
- <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"> MarchingAnts</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>
1446
- <span class="line"><span style="color:#6A737D"> // Calculate animated offset (loops every 30 frames)</span></span>
1447
- <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> dashOffset</span><span style="color:#F97583"> =</span><span style="color:#F97583"> -</span><span style="color:#E1E4E8">(frame </span><span style="color:#F97583">%</span><span style="color:#79B8FF"> 30</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 2</span><span style="color:#E1E4E8">;</span></span>
1448
- <span class="line"></span>
1449
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
1450
- <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>
1451
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">svg</span><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;600&quot;</span><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;400&quot;</span><span style="color:#B392F0"> viewBox</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;0 0 600 400&quot;</span><span style="color:#E1E4E8">&gt;</span></span>
1452
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Marching ants border */</span><span style="color:#E1E4E8">}</span></span>
1453
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">rect</span></span>
1454
- <span class="line"><span style="color:#B392F0"> x</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;50&quot;</span></span>
1455
- <span class="line"><span style="color:#B392F0"> y</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;50&quot;</span></span>
1456
- <span class="line"><span style="color:#B392F0"> width</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;500&quot;</span></span>
1457
- <span class="line"><span style="color:#B392F0"> height</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;300&quot;</span></span>
1458
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1459
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#3b82f6&quot;</span></span>
1460
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">3</span><span style="color:#E1E4E8">}</span></span>
1461
- <span class="line"><span style="color:#B392F0"> strokeDasharray</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;10 5&quot;</span></span>
1462
- <span class="line"><span style="color:#B392F0"> strokeDashoffset</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{dashOffset}</span></span>
1463
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1464
- <span class="line"></span>
1465
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Animated circle with different speed */</span><span style="color:#E1E4E8">}</span></span>
1466
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">circle</span></span>
1467
- <span class="line"><span style="color:#B392F0"> cx</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;300&quot;</span></span>
1468
- <span class="line"><span style="color:#B392F0"> cy</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;200&quot;</span></span>
1469
- <span class="line"><span style="color:#B392F0"> r</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;80&quot;</span></span>
1470
- <span class="line"><span style="color:#B392F0"> fill</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;none&quot;</span></span>
1471
- <span class="line"><span style="color:#B392F0"> stroke</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;#10b981&quot;</span></span>
1472
- <span class="line"><span style="color:#B392F0"> strokeWidth</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">4</span><span style="color:#E1E4E8">}</span></span>
1473
- <span class="line"><span style="color:#B392F0"> strokeDasharray</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;15 8&quot;</span></span>
1474
- <span class="line"><span style="color:#B392F0"> strokeDashoffset</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{dashOffset </span><span style="color:#F97583">*</span><span style="color:#79B8FF"> 1.5</span><span style="color:#E1E4E8">}</span></span>
1475
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
1476
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">svg</span><span style="color:#E1E4E8">&gt;</span></span>
1477
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
1478
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
1479
- <span class="line"><span style="color:#E1E4E8">}</span></span>
1480
- <span class="line"></span></code></pre>
1481
- <p><strong>Tips:</strong></p>
1482
- <ul>
1483
- <li><code>strokeDasharray=&quot;10 5&quot;</code> - 10px dash, 5px gap</li>
1484
- <li><code>strokeDashoffset={dashOffset}</code> - animates the pattern position</li>
1485
- <li>Negative offset moves forward, positive moves backward</li>
1486
- <li>Different speeds: multiply by different values (e.g., <code>dashOffset * 2</code>)</li>
1487
- </ul>
1488
- <p>This technique is different from <code>stroke-dash</code> classes:</p>
1489
- <ul>
1490
- <li><strong><code>stroke-dash</code> classes</strong> - Draw/erase the stroke (reveal animation)</li>
1491
- <li><strong>Marching ants</strong> - Move a dashed pattern along the stroke</li>
1492
- </ul>
1493
- <h2 id="performance-tips">Performance Tips</h2>
1494
- <ol>
1495
- <li><strong>Use Tailwind classes</strong> when possible - they’re optimized for the renderer</li>
1496
- <li><strong>Avoid too many nested animations</strong> - each adds computation per frame</li>
1497
- <li><strong>Use loop animations sparingly</strong> - they’re computed every frame</li>
1498
- <li><strong>Prefer opacity and transform</strong> - they’re the most performant properties</li>
1499
- </ol>
1500
- <h2 id="next-steps">Next Steps</h2>
1501
- <ul>
1502
- <li><a href="/video">Video Templates</a> - Creating video templates</li>
1503
- <li><a href="/sdk">SDK</a> - Programmatic rendering with animations</li>
1504
- <li><a href="/helpers">Helpers</a> - QR codes, images, and more</li>
1505
- </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>