volito 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (480) hide show
  1. package/LICENSE +29 -0
  2. package/PACKS-LICENSE.md +43 -0
  3. package/README.md +342 -2
  4. package/dist/browser.d.ts +523 -0
  5. package/dist/browser.js +5182 -0
  6. package/dist/chunks/chunk-CFDFWZAC.js +6125 -0
  7. package/dist/cli.js +401 -0
  8. package/dist/index.d.ts +723 -0
  9. package/dist/index.js +138 -0
  10. package/dist/mcp.js +237 -0
  11. package/dist/registry.json +1 -0
  12. package/examples/gallery.html +222 -0
  13. package/fonts/anton-latin-400-normal.ttf +0 -0
  14. package/fonts/anton-latin-ext-400-normal.ttf +0 -0
  15. package/fonts/anton-vietnamese-400-normal.ttf +0 -0
  16. package/fonts/archivo-black-latin-400-normal.ttf +0 -0
  17. package/fonts/archivo-black-latin-ext-400-normal.ttf +0 -0
  18. package/fonts/bebas-neue-latin-400-normal.ttf +0 -0
  19. package/fonts/bebas-neue-latin-ext-400-normal.ttf +0 -0
  20. package/fonts/bricolage-grotesque-latin-500-normal.ttf +0 -0
  21. package/fonts/bricolage-grotesque-latin-800-normal.ttf +0 -0
  22. package/fonts/bricolage-grotesque-latin-ext-500-normal.ttf +0 -0
  23. package/fonts/bricolage-grotesque-latin-ext-800-normal.ttf +0 -0
  24. package/fonts/bricolage-grotesque-vietnamese-500-normal.ttf +0 -0
  25. package/fonts/bricolage-grotesque-vietnamese-800-normal.ttf +0 -0
  26. package/fonts/caveat-cyrillic-400-normal.ttf +0 -0
  27. package/fonts/caveat-cyrillic-700-normal.ttf +0 -0
  28. package/fonts/caveat-cyrillic-ext-400-normal.ttf +0 -0
  29. package/fonts/caveat-cyrillic-ext-700-normal.ttf +0 -0
  30. package/fonts/caveat-latin-400-normal.ttf +0 -0
  31. package/fonts/caveat-latin-700-normal.ttf +0 -0
  32. package/fonts/caveat-latin-ext-400-normal.ttf +0 -0
  33. package/fonts/caveat-latin-ext-700-normal.ttf +0 -0
  34. package/fonts/dm-serif-display-latin-400-italic.ttf +0 -0
  35. package/fonts/dm-serif-display-latin-400-normal.ttf +0 -0
  36. package/fonts/dm-serif-display-latin-ext-400-italic.ttf +0 -0
  37. package/fonts/dm-serif-display-latin-ext-400-normal.ttf +0 -0
  38. package/fonts/faces.json +2040 -0
  39. package/fonts/fraunces-latin-600-italic.ttf +0 -0
  40. package/fonts/fraunces-latin-600-normal.ttf +0 -0
  41. package/fonts/fraunces-latin-900-normal.ttf +0 -0
  42. package/fonts/fraunces-latin-ext-600-italic.ttf +0 -0
  43. package/fonts/fraunces-latin-ext-600-normal.ttf +0 -0
  44. package/fonts/fraunces-latin-ext-900-normal.ttf +0 -0
  45. package/fonts/fraunces-vietnamese-600-italic.ttf +0 -0
  46. package/fonts/fraunces-vietnamese-600-normal.ttf +0 -0
  47. package/fonts/fraunces-vietnamese-900-normal.ttf +0 -0
  48. package/fonts/fredoka-hebrew-400-normal.ttf +0 -0
  49. package/fonts/fredoka-hebrew-600-normal.ttf +0 -0
  50. package/fonts/fredoka-hebrew-700-normal.ttf +0 -0
  51. package/fonts/fredoka-latin-400-normal.ttf +0 -0
  52. package/fonts/fredoka-latin-600-normal.ttf +0 -0
  53. package/fonts/fredoka-latin-700-normal.ttf +0 -0
  54. package/fonts/fredoka-latin-ext-400-normal.ttf +0 -0
  55. package/fonts/fredoka-latin-ext-600-normal.ttf +0 -0
  56. package/fonts/fredoka-latin-ext-700-normal.ttf +0 -0
  57. package/fonts/gabarito-latin-700-normal.ttf +0 -0
  58. package/fonts/gabarito-latin-900-normal.ttf +0 -0
  59. package/fonts/gabarito-latin-ext-700-normal.ttf +0 -0
  60. package/fonts/gabarito-latin-ext-900-normal.ttf +0 -0
  61. package/fonts/im-fell-english-latin-400-italic.ttf +0 -0
  62. package/fonts/im-fell-english-latin-400-normal.ttf +0 -0
  63. package/fonts/inter-cyrillic-300-normal.ttf +0 -0
  64. package/fonts/inter-cyrillic-400-normal.ttf +0 -0
  65. package/fonts/inter-cyrillic-500-normal.ttf +0 -0
  66. package/fonts/inter-cyrillic-600-normal.ttf +0 -0
  67. package/fonts/inter-cyrillic-700-normal.ttf +0 -0
  68. package/fonts/inter-cyrillic-800-normal.ttf +0 -0
  69. package/fonts/inter-cyrillic-900-normal.ttf +0 -0
  70. package/fonts/inter-cyrillic-ext-300-normal.ttf +0 -0
  71. package/fonts/inter-cyrillic-ext-400-normal.ttf +0 -0
  72. package/fonts/inter-cyrillic-ext-500-normal.ttf +0 -0
  73. package/fonts/inter-cyrillic-ext-600-normal.ttf +0 -0
  74. package/fonts/inter-cyrillic-ext-700-normal.ttf +0 -0
  75. package/fonts/inter-cyrillic-ext-800-normal.ttf +0 -0
  76. package/fonts/inter-cyrillic-ext-900-normal.ttf +0 -0
  77. package/fonts/inter-greek-300-normal.ttf +0 -0
  78. package/fonts/inter-greek-400-normal.ttf +0 -0
  79. package/fonts/inter-greek-500-normal.ttf +0 -0
  80. package/fonts/inter-greek-600-normal.ttf +0 -0
  81. package/fonts/inter-greek-700-normal.ttf +0 -0
  82. package/fonts/inter-greek-800-normal.ttf +0 -0
  83. package/fonts/inter-greek-900-normal.ttf +0 -0
  84. package/fonts/inter-greek-ext-300-normal.ttf +0 -0
  85. package/fonts/inter-greek-ext-400-normal.ttf +0 -0
  86. package/fonts/inter-greek-ext-500-normal.ttf +0 -0
  87. package/fonts/inter-greek-ext-600-normal.ttf +0 -0
  88. package/fonts/inter-greek-ext-700-normal.ttf +0 -0
  89. package/fonts/inter-greek-ext-800-normal.ttf +0 -0
  90. package/fonts/inter-greek-ext-900-normal.ttf +0 -0
  91. package/fonts/inter-latin-300-normal.ttf +0 -0
  92. package/fonts/inter-latin-400-normal.ttf +0 -0
  93. package/fonts/inter-latin-500-normal.ttf +0 -0
  94. package/fonts/inter-latin-600-normal.ttf +0 -0
  95. package/fonts/inter-latin-700-normal.ttf +0 -0
  96. package/fonts/inter-latin-800-normal.ttf +0 -0
  97. package/fonts/inter-latin-900-normal.ttf +0 -0
  98. package/fonts/inter-latin-ext-300-normal.ttf +0 -0
  99. package/fonts/inter-latin-ext-400-normal.ttf +0 -0
  100. package/fonts/inter-latin-ext-500-normal.ttf +0 -0
  101. package/fonts/inter-latin-ext-600-normal.ttf +0 -0
  102. package/fonts/inter-latin-ext-700-normal.ttf +0 -0
  103. package/fonts/inter-latin-ext-800-normal.ttf +0 -0
  104. package/fonts/inter-latin-ext-900-normal.ttf +0 -0
  105. package/fonts/inter-vietnamese-300-normal.ttf +0 -0
  106. package/fonts/inter-vietnamese-400-normal.ttf +0 -0
  107. package/fonts/inter-vietnamese-500-normal.ttf +0 -0
  108. package/fonts/inter-vietnamese-600-normal.ttf +0 -0
  109. package/fonts/inter-vietnamese-700-normal.ttf +0 -0
  110. package/fonts/inter-vietnamese-800-normal.ttf +0 -0
  111. package/fonts/inter-vietnamese-900-normal.ttf +0 -0
  112. package/fonts/licenses/anton.txt +93 -0
  113. package/fonts/licenses/archivo-black.txt +93 -0
  114. package/fonts/licenses/bebas-neue.txt +93 -0
  115. package/fonts/licenses/bricolage-grotesque.txt +93 -0
  116. package/fonts/licenses/caveat.txt +93 -0
  117. package/fonts/licenses/dm-serif-display.txt +93 -0
  118. package/fonts/licenses/fraunces.txt +93 -0
  119. package/fonts/licenses/fredoka.txt +93 -0
  120. package/fonts/licenses/gabarito.txt +93 -0
  121. package/fonts/licenses/im-fell-english.txt +93 -0
  122. package/fonts/licenses/inter.txt +93 -0
  123. package/fonts/licenses/montserrat.txt +93 -0
  124. package/fonts/licenses/orbitron.txt +93 -0
  125. package/fonts/licenses/outfit.txt +93 -0
  126. package/fonts/licenses/pacifico.txt +93 -0
  127. package/fonts/licenses/patrick-hand.txt +93 -0
  128. package/fonts/licenses/permanent-marker.txt +201 -0
  129. package/fonts/licenses/playfair-display.txt +93 -0
  130. package/fonts/licenses/poppins.txt +93 -0
  131. package/fonts/licenses/press-start-2p.txt +93 -0
  132. package/fonts/licenses/righteous.txt +93 -0
  133. package/fonts/licenses/space-grotesk.txt +93 -0
  134. package/fonts/licenses/space-mono.txt +93 -0
  135. package/fonts/licenses/syne.txt +93 -0
  136. package/fonts/licenses/unbounded.txt +93 -0
  137. package/fonts/montserrat-cyrillic-300-normal.ttf +0 -0
  138. package/fonts/montserrat-cyrillic-400-normal.ttf +0 -0
  139. package/fonts/montserrat-cyrillic-500-normal.ttf +0 -0
  140. package/fonts/montserrat-cyrillic-700-normal.ttf +0 -0
  141. package/fonts/montserrat-cyrillic-800-normal.ttf +0 -0
  142. package/fonts/montserrat-cyrillic-900-normal.ttf +0 -0
  143. package/fonts/montserrat-cyrillic-ext-300-normal.ttf +0 -0
  144. package/fonts/montserrat-cyrillic-ext-400-normal.ttf +0 -0
  145. package/fonts/montserrat-cyrillic-ext-500-normal.ttf +0 -0
  146. package/fonts/montserrat-cyrillic-ext-700-normal.ttf +0 -0
  147. package/fonts/montserrat-cyrillic-ext-800-normal.ttf +0 -0
  148. package/fonts/montserrat-cyrillic-ext-900-normal.ttf +0 -0
  149. package/fonts/montserrat-latin-300-normal.ttf +0 -0
  150. package/fonts/montserrat-latin-400-normal.ttf +0 -0
  151. package/fonts/montserrat-latin-500-normal.ttf +0 -0
  152. package/fonts/montserrat-latin-700-normal.ttf +0 -0
  153. package/fonts/montserrat-latin-800-normal.ttf +0 -0
  154. package/fonts/montserrat-latin-900-normal.ttf +0 -0
  155. package/fonts/montserrat-latin-ext-300-normal.ttf +0 -0
  156. package/fonts/montserrat-latin-ext-400-normal.ttf +0 -0
  157. package/fonts/montserrat-latin-ext-500-normal.ttf +0 -0
  158. package/fonts/montserrat-latin-ext-700-normal.ttf +0 -0
  159. package/fonts/montserrat-latin-ext-800-normal.ttf +0 -0
  160. package/fonts/montserrat-latin-ext-900-normal.ttf +0 -0
  161. package/fonts/montserrat-vietnamese-300-normal.ttf +0 -0
  162. package/fonts/montserrat-vietnamese-400-normal.ttf +0 -0
  163. package/fonts/montserrat-vietnamese-500-normal.ttf +0 -0
  164. package/fonts/montserrat-vietnamese-700-normal.ttf +0 -0
  165. package/fonts/montserrat-vietnamese-800-normal.ttf +0 -0
  166. package/fonts/montserrat-vietnamese-900-normal.ttf +0 -0
  167. package/fonts/orbitron-latin-500-normal.ttf +0 -0
  168. package/fonts/orbitron-latin-800-normal.ttf +0 -0
  169. package/fonts/outfit-latin-700-normal.ttf +0 -0
  170. package/fonts/outfit-latin-900-normal.ttf +0 -0
  171. package/fonts/outfit-latin-ext-700-normal.ttf +0 -0
  172. package/fonts/outfit-latin-ext-900-normal.ttf +0 -0
  173. package/fonts/pacifico-cyrillic-400-normal.ttf +0 -0
  174. package/fonts/pacifico-cyrillic-ext-400-normal.ttf +0 -0
  175. package/fonts/pacifico-latin-400-normal.ttf +0 -0
  176. package/fonts/pacifico-latin-ext-400-normal.ttf +0 -0
  177. package/fonts/pacifico-vietnamese-400-normal.ttf +0 -0
  178. package/fonts/patrick-hand-latin-400-normal.ttf +0 -0
  179. package/fonts/patrick-hand-latin-ext-400-normal.ttf +0 -0
  180. package/fonts/patrick-hand-vietnamese-400-normal.ttf +0 -0
  181. package/fonts/permanent-marker-latin-400-normal.ttf +0 -0
  182. package/fonts/playfair-display-cyrillic-400-italic.ttf +0 -0
  183. package/fonts/playfair-display-cyrillic-400-normal.ttf +0 -0
  184. package/fonts/playfair-display-cyrillic-700-italic.ttf +0 -0
  185. package/fonts/playfair-display-cyrillic-700-normal.ttf +0 -0
  186. package/fonts/playfair-display-cyrillic-900-italic.ttf +0 -0
  187. package/fonts/playfair-display-cyrillic-900-normal.ttf +0 -0
  188. package/fonts/playfair-display-latin-400-italic.ttf +0 -0
  189. package/fonts/playfair-display-latin-400-normal.ttf +0 -0
  190. package/fonts/playfair-display-latin-700-italic.ttf +0 -0
  191. package/fonts/playfair-display-latin-700-normal.ttf +0 -0
  192. package/fonts/playfair-display-latin-900-italic.ttf +0 -0
  193. package/fonts/playfair-display-latin-900-normal.ttf +0 -0
  194. package/fonts/playfair-display-latin-ext-400-italic.ttf +0 -0
  195. package/fonts/playfair-display-latin-ext-400-normal.ttf +0 -0
  196. package/fonts/playfair-display-latin-ext-700-italic.ttf +0 -0
  197. package/fonts/playfair-display-latin-ext-700-normal.ttf +0 -0
  198. package/fonts/playfair-display-latin-ext-900-italic.ttf +0 -0
  199. package/fonts/playfair-display-latin-ext-900-normal.ttf +0 -0
  200. package/fonts/playfair-display-vietnamese-400-italic.ttf +0 -0
  201. package/fonts/playfair-display-vietnamese-400-normal.ttf +0 -0
  202. package/fonts/playfair-display-vietnamese-700-italic.ttf +0 -0
  203. package/fonts/playfair-display-vietnamese-700-normal.ttf +0 -0
  204. package/fonts/playfair-display-vietnamese-900-italic.ttf +0 -0
  205. package/fonts/playfair-display-vietnamese-900-normal.ttf +0 -0
  206. package/fonts/poppins-devanagari-300-normal.ttf +0 -0
  207. package/fonts/poppins-devanagari-400-normal.ttf +0 -0
  208. package/fonts/poppins-devanagari-600-normal.ttf +0 -0
  209. package/fonts/poppins-devanagari-700-normal.ttf +0 -0
  210. package/fonts/poppins-devanagari-800-normal.ttf +0 -0
  211. package/fonts/poppins-devanagari-900-normal.ttf +0 -0
  212. package/fonts/poppins-latin-300-normal.ttf +0 -0
  213. package/fonts/poppins-latin-400-normal.ttf +0 -0
  214. package/fonts/poppins-latin-600-normal.ttf +0 -0
  215. package/fonts/poppins-latin-700-normal.ttf +0 -0
  216. package/fonts/poppins-latin-800-normal.ttf +0 -0
  217. package/fonts/poppins-latin-900-normal.ttf +0 -0
  218. package/fonts/poppins-latin-ext-300-normal.ttf +0 -0
  219. package/fonts/poppins-latin-ext-400-normal.ttf +0 -0
  220. package/fonts/poppins-latin-ext-600-normal.ttf +0 -0
  221. package/fonts/poppins-latin-ext-700-normal.ttf +0 -0
  222. package/fonts/poppins-latin-ext-800-normal.ttf +0 -0
  223. package/fonts/poppins-latin-ext-900-normal.ttf +0 -0
  224. package/fonts/press-start-2p-cyrillic-400-normal.ttf +0 -0
  225. package/fonts/press-start-2p-cyrillic-ext-400-normal.ttf +0 -0
  226. package/fonts/press-start-2p-greek-400-normal.ttf +0 -0
  227. package/fonts/press-start-2p-latin-400-normal.ttf +0 -0
  228. package/fonts/press-start-2p-latin-ext-400-normal.ttf +0 -0
  229. package/fonts/righteous-latin-400-normal.ttf +0 -0
  230. package/fonts/righteous-latin-ext-400-normal.ttf +0 -0
  231. package/fonts/space-grotesk-latin-400-normal.ttf +0 -0
  232. package/fonts/space-grotesk-latin-500-normal.ttf +0 -0
  233. package/fonts/space-grotesk-latin-600-normal.ttf +0 -0
  234. package/fonts/space-grotesk-latin-700-normal.ttf +0 -0
  235. package/fonts/space-grotesk-latin-ext-400-normal.ttf +0 -0
  236. package/fonts/space-grotesk-latin-ext-500-normal.ttf +0 -0
  237. package/fonts/space-grotesk-latin-ext-600-normal.ttf +0 -0
  238. package/fonts/space-grotesk-latin-ext-700-normal.ttf +0 -0
  239. package/fonts/space-grotesk-vietnamese-400-normal.ttf +0 -0
  240. package/fonts/space-grotesk-vietnamese-500-normal.ttf +0 -0
  241. package/fonts/space-grotesk-vietnamese-600-normal.ttf +0 -0
  242. package/fonts/space-grotesk-vietnamese-700-normal.ttf +0 -0
  243. package/fonts/space-mono-latin-400-normal.ttf +0 -0
  244. package/fonts/space-mono-latin-700-normal.ttf +0 -0
  245. package/fonts/space-mono-latin-ext-400-normal.ttf +0 -0
  246. package/fonts/space-mono-latin-ext-700-normal.ttf +0 -0
  247. package/fonts/space-mono-vietnamese-400-normal.ttf +0 -0
  248. package/fonts/space-mono-vietnamese-700-normal.ttf +0 -0
  249. package/fonts/syne-greek-600-normal.ttf +0 -0
  250. package/fonts/syne-greek-800-normal.ttf +0 -0
  251. package/fonts/syne-latin-600-normal.ttf +0 -0
  252. package/fonts/syne-latin-800-normal.ttf +0 -0
  253. package/fonts/syne-latin-ext-600-normal.ttf +0 -0
  254. package/fonts/syne-latin-ext-800-normal.ttf +0 -0
  255. package/fonts/unbounded-cyrillic-500-normal.ttf +0 -0
  256. package/fonts/unbounded-cyrillic-800-normal.ttf +0 -0
  257. package/fonts/unbounded-cyrillic-ext-500-normal.ttf +0 -0
  258. package/fonts/unbounded-cyrillic-ext-800-normal.ttf +0 -0
  259. package/fonts/unbounded-latin-500-normal.ttf +0 -0
  260. package/fonts/unbounded-latin-800-normal.ttf +0 -0
  261. package/fonts/unbounded-latin-ext-500-normal.ttf +0 -0
  262. package/fonts/unbounded-latin-ext-800-normal.ttf +0 -0
  263. package/fonts/unbounded-vietnamese-500-normal.ttf +0 -0
  264. package/fonts/unbounded-vietnamese-800-normal.ttf +0 -0
  265. package/libs/world.js +113 -0
  266. package/package.json +119 -4
  267. package/packs/3d/bars-3d/frame.js +39 -0
  268. package/packs/3d/bars-3d/item.json +78 -0
  269. package/packs/3d/card-flip/frame.js +36 -0
  270. package/packs/3d/card-flip/item.json +67 -0
  271. package/packs/3d/cube/frame.js +49 -0
  272. package/packs/3d/cube/item.json +52 -0
  273. package/packs/3d/globe/frame.js +66 -0
  274. package/packs/3d/globe/item.json +67 -0
  275. package/packs/3d/logo-3d/frame.js +26 -0
  276. package/packs/3d/logo-3d/item.json +53 -0
  277. package/packs/3d/number-3d/frame.js +26 -0
  278. package/packs/3d/number-3d/item.json +65 -0
  279. package/packs/3d/pack.json +21 -0
  280. package/packs/3d/shared.js +33 -0
  281. package/packs/3d/title-3d/frame.js +38 -0
  282. package/packs/3d/title-3d/item.json +52 -0
  283. package/packs/annotate/arrow/frame.js +28 -0
  284. package/packs/annotate/arrow/item.json +85 -0
  285. package/packs/annotate/circle/frame.js +22 -0
  286. package/packs/annotate/circle/item.json +90 -0
  287. package/packs/annotate/emphasis/frame.js +30 -0
  288. package/packs/annotate/emphasis/item.json +76 -0
  289. package/packs/annotate/focus/frame.js +24 -0
  290. package/packs/annotate/focus/item.json +82 -0
  291. package/packs/annotate/highlight/frame.js +22 -0
  292. package/packs/annotate/highlight/item.json +83 -0
  293. package/packs/annotate/markers/frame.js +22 -0
  294. package/packs/annotate/markers/item.json +62 -0
  295. package/packs/annotate/pack.json +24 -0
  296. package/packs/annotate/pointer/frame.js +26 -0
  297. package/packs/annotate/pointer/item.json +81 -0
  298. package/packs/annotate/reactions/frame.js +22 -0
  299. package/packs/annotate/reactions/item.json +78 -0
  300. package/packs/annotate/shared.js +30 -0
  301. package/packs/annotate/spotlight/frame.js +35 -0
  302. package/packs/annotate/spotlight/item.json +105 -0
  303. package/packs/annotate/stamp/frame.js +18 -0
  304. package/packs/annotate/stamp/item.json +79 -0
  305. package/packs/backdrops/aurora/frame.js +12 -0
  306. package/packs/backdrops/aurora/item.json +56 -0
  307. package/packs/backdrops/blobs/frame.js +19 -0
  308. package/packs/backdrops/blobs/item.json +56 -0
  309. package/packs/backdrops/bokeh/frame.js +18 -0
  310. package/packs/backdrops/bokeh/item.json +56 -0
  311. package/packs/backdrops/gradient/frame.js +10 -0
  312. package/packs/backdrops/gradient/item.json +46 -0
  313. package/packs/backdrops/pack.json +23 -0
  314. package/packs/backdrops/pattern/frame.js +8 -0
  315. package/packs/backdrops/pattern/item.json +96 -0
  316. package/packs/backdrops/retro-grid/frame.js +33 -0
  317. package/packs/backdrops/retro-grid/item.json +55 -0
  318. package/packs/backdrops/shared.js +7 -0
  319. package/packs/backdrops/starfield/frame.js +18 -0
  320. package/packs/backdrops/starfield/item.json +52 -0
  321. package/packs/backdrops/tiles/frame.js +8 -0
  322. package/packs/backdrops/tiles/item.json +56 -0
  323. package/packs/backdrops/topo/frame.js +25 -0
  324. package/packs/backdrops/topo/item.json +56 -0
  325. package/packs/broadcast/countdown/frame.js +34 -0
  326. package/packs/broadcast/countdown/item.json +49 -0
  327. package/packs/broadcast/live-badge/frame.js +43 -0
  328. package/packs/broadcast/live-badge/item.json +64 -0
  329. package/packs/broadcast/location/frame.js +35 -0
  330. package/packs/broadcast/location/item.json +62 -0
  331. package/packs/broadcast/lt-bars/frame.js +31 -0
  332. package/packs/broadcast/lt-bars/item.json +52 -0
  333. package/packs/broadcast/lt-kicker/frame.js +36 -0
  334. package/packs/broadcast/lt-kicker/item.json +58 -0
  335. package/packs/broadcast/lt-news/frame.js +30 -0
  336. package/packs/broadcast/lt-news/item.json +47 -0
  337. package/packs/broadcast/lt-pill/frame.js +28 -0
  338. package/packs/broadcast/lt-pill/item.json +68 -0
  339. package/packs/broadcast/lt-reveal/frame.js +25 -0
  340. package/packs/broadcast/lt-reveal/item.json +51 -0
  341. package/packs/broadcast/pack.json +23 -0
  342. package/packs/broadcast/score-bug/frame.js +40 -0
  343. package/packs/broadcast/score-bug/item.json +106 -0
  344. package/packs/broadcast/ticker/frame.js +28 -0
  345. package/packs/broadcast/ticker/item.json +64 -0
  346. package/packs/data/bar-race/frame.js +46 -0
  347. package/packs/data/bar-race/item.json +113 -0
  348. package/packs/data/donut/frame.js +47 -0
  349. package/packs/data/donut/item.json +100 -0
  350. package/packs/data/flight/frame.js +75 -0
  351. package/packs/data/flight/item.json +66 -0
  352. package/packs/data/funnel/frame.js +52 -0
  353. package/packs/data/funnel/item.json +83 -0
  354. package/packs/data/goals/frame.js +34 -0
  355. package/packs/data/goals/item.json +64 -0
  356. package/packs/data/line-chart/frame.js +61 -0
  357. package/packs/data/line-chart/item.json +117 -0
  358. package/packs/data/pack.json +23 -0
  359. package/packs/data/shared.js +38 -0
  360. package/packs/data/timeline/frame.js +56 -0
  361. package/packs/data/timeline/item.json +70 -0
  362. package/packs/data/versus/frame.js +39 -0
  363. package/packs/data/versus/item.json +84 -0
  364. package/packs/data/world-map/frame.js +63 -0
  365. package/packs/data/world-map/item.json +126 -0
  366. package/packs/essentials/banner/frame.js +46 -0
  367. package/packs/essentials/banner/item.json +70 -0
  368. package/packs/essentials/bar-chart/frame.js +56 -0
  369. package/packs/essentials/bar-chart/item.json +108 -0
  370. package/packs/essentials/callout/frame.js +43 -0
  371. package/packs/essentials/callout/item.json +86 -0
  372. package/packs/essentials/end-card/frame.js +47 -0
  373. package/packs/essentials/end-card/item.json +85 -0
  374. package/packs/essentials/headline/frame.js +40 -0
  375. package/packs/essentials/headline/item.json +74 -0
  376. package/packs/essentials/logo-sting/frame.js +48 -0
  377. package/packs/essentials/logo-sting/item.json +64 -0
  378. package/packs/essentials/lower-third/frame.js +41 -0
  379. package/packs/essentials/lower-third/item.json +68 -0
  380. package/packs/essentials/pack.json +28 -0
  381. package/packs/essentials/quote/frame.js +33 -0
  382. package/packs/essentials/quote/item.json +66 -0
  383. package/packs/essentials/shared.js +16 -0
  384. package/packs/essentials/social/frame.js +43 -0
  385. package/packs/essentials/social/item.json +86 -0
  386. package/packs/essentials/stat/frame.js +49 -0
  387. package/packs/essentials/stat/item.json +113 -0
  388. package/packs/essentials/steps/frame.js +53 -0
  389. package/packs/essentials/steps/item.json +80 -0
  390. package/packs/essentials/subscribe/frame.js +39 -0
  391. package/packs/essentials/subscribe/item.json +87 -0
  392. package/packs/essentials/title-card/frame.js +50 -0
  393. package/packs/essentials/title-card/item.json +73 -0
  394. package/packs/essentials/wipe/frame.js +48 -0
  395. package/packs/essentials/wipe/item.json +75 -0
  396. package/packs/promo/coupon/frame.js +35 -0
  397. package/packs/promo/coupon/item.json +63 -0
  398. package/packs/promo/cta/frame.js +17 -0
  399. package/packs/promo/cta/item.json +73 -0
  400. package/packs/promo/features/frame.js +25 -0
  401. package/packs/promo/features/item.json +57 -0
  402. package/packs/promo/launch/frame.js +26 -0
  403. package/packs/promo/launch/item.json +66 -0
  404. package/packs/promo/offer-countdown/frame.js +29 -0
  405. package/packs/promo/offer-countdown/item.json +64 -0
  406. package/packs/promo/pack.json +22 -0
  407. package/packs/promo/price-card/frame.js +42 -0
  408. package/packs/promo/price-card/item.json +102 -0
  409. package/packs/promo/ribbon/frame.js +17 -0
  410. package/packs/promo/ribbon/item.json +58 -0
  411. package/packs/promo/sale-badge/frame.js +18 -0
  412. package/packs/promo/sale-badge/item.json +74 -0
  413. package/packs/promo/shared.js +15 -0
  414. package/packs/social/chat/frame.js +54 -0
  415. package/packs/social/chat/item.json +71 -0
  416. package/packs/social/comments/frame.js +46 -0
  417. package/packs/social/comments/item.json +66 -0
  418. package/packs/social/follow-card/frame.js +52 -0
  419. package/packs/social/follow-card/item.json +105 -0
  420. package/packs/social/notification/frame.js +27 -0
  421. package/packs/social/notification/item.json +66 -0
  422. package/packs/social/notifications/frame.js +28 -0
  423. package/packs/social/notifications/item.json +68 -0
  424. package/packs/social/now-playing/frame.js +51 -0
  425. package/packs/social/now-playing/item.json +72 -0
  426. package/packs/social/pack.json +22 -0
  427. package/packs/social/post/frame.js +41 -0
  428. package/packs/social/post/item.json +86 -0
  429. package/packs/social/rating/frame.js +45 -0
  430. package/packs/social/rating/item.json +58 -0
  431. package/packs/social/shared.js +25 -0
  432. package/packs/transitions/blinds/frame.js +24 -0
  433. package/packs/transitions/blinds/item.json +67 -0
  434. package/packs/transitions/clock/frame.js +26 -0
  435. package/packs/transitions/clock/item.json +60 -0
  436. package/packs/transitions/doors/frame.js +28 -0
  437. package/packs/transitions/doors/item.json +56 -0
  438. package/packs/transitions/glitch/frame.js +41 -0
  439. package/packs/transitions/glitch/item.json +59 -0
  440. package/packs/transitions/ink/frame.js +25 -0
  441. package/packs/transitions/ink/item.json +68 -0
  442. package/packs/transitions/iris/frame.js +19 -0
  443. package/packs/transitions/iris/item.json +78 -0
  444. package/packs/transitions/pack.json +25 -0
  445. package/packs/transitions/pixels/frame.js +19 -0
  446. package/packs/transitions/pixels/item.json +59 -0
  447. package/packs/transitions/shared.js +58 -0
  448. package/packs/transitions/slices/frame.js +19 -0
  449. package/packs/transitions/slices/item.json +58 -0
  450. package/packs/transitions/stripes/frame.js +22 -0
  451. package/packs/transitions/stripes/item.json +68 -0
  452. package/packs/transitions/tiles/frame.js +33 -0
  453. package/packs/transitions/tiles/item.json +71 -0
  454. package/packs/transitions/whip/frame.js +27 -0
  455. package/packs/transitions/whip/item.json +63 -0
  456. package/packs/type/decode/frame.js +23 -0
  457. package/packs/type/decode/item.json +52 -0
  458. package/packs/type/echo/frame.js +20 -0
  459. package/packs/type/echo/item.json +52 -0
  460. package/packs/type/key-phrase/frame.js +32 -0
  461. package/packs/type/key-phrase/item.json +45 -0
  462. package/packs/type/liquid-fill/frame.js +27 -0
  463. package/packs/type/liquid-fill/item.json +52 -0
  464. package/packs/type/marquee/frame.js +21 -0
  465. package/packs/type/marquee/item.json +67 -0
  466. package/packs/type/pack.json +24 -0
  467. package/packs/type/shared.js +13 -0
  468. package/packs/type/split-flap/frame.js +49 -0
  469. package/packs/type/split-flap/item.json +44 -0
  470. package/packs/type/stack/frame.js +19 -0
  471. package/packs/type/stack/item.json +51 -0
  472. package/packs/type/typewriter/frame.js +13 -0
  473. package/packs/type/typewriter/item.json +60 -0
  474. package/packs/type/word-by-word/frame.js +21 -0
  475. package/packs/type/word-by-word/item.json +52 -0
  476. package/packs/type/word-swap/frame.js +43 -0
  477. package/packs/type/word-swap/item.json +63 -0
  478. package/skill/SKILL.md +79 -0
  479. package/skill/template/frame.js +26 -0
  480. package/skill/template/item.json +16 -0
package/LICENSE ADDED
@@ -0,0 +1,29 @@
1
+ Volito is two things with two licences:
2
+
3
+ - The engine (everything outside packs/ and fonts/): the MIT License, below.
4
+ - The MONARC packs (packs/): the MONARC Packs License 1.0, in PACKS-LICENSE.md.
5
+ - The fonts (fonts/): each family's SIL Open Font License 1.1, in fonts/licenses/.
6
+
7
+ --------------------------------------------------------------------------------
8
+
9
+ MIT License
10
+
11
+ Copyright (c) 2026 MONARC STUDIOS
12
+
13
+ Permission is hereby granted, free of charge, to any person obtaining a copy
14
+ of this software and associated documentation files (the "Software"), to deal
15
+ in the Software without restriction, including without limitation the rights
16
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
17
+ copies of the Software, and to permit persons to whom the Software is
18
+ furnished to do so, subject to the following conditions:
19
+
20
+ The above copyright notice and this permission notice shall be included in all
21
+ copies or substantial portions of the Software.
22
+
23
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
24
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
25
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
26
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
27
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
28
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
29
+ SOFTWARE.
@@ -0,0 +1,43 @@
1
+ # MONARC Packs License 1.0
2
+
3
+ > **Draft.** Have counsel review this text before the first public release.
4
+
5
+ Copyright (c) 2026 MONARC STUDIOS
6
+
7
+ This licence covers the motion graphics packs distributed with Volito (the `packs/` folder of
8
+ `volito`) and any other pack whose `pack.json` names this licence (together, the **Packs**).
9
+ The Volito engine is under the MIT License (see `LICENSE`); the fonts are under their own
10
+ SIL Open Font Licenses (see `fonts/licenses/`).
11
+
12
+ ## What you may do
13
+
14
+ 1. **Make things with the Packs.** You may use, copy, modify and render the Packs to make videos,
15
+ images and other media (**Productions**) — personal or commercial, for yourself or for clients,
16
+ including advertising, broadcast and streaming.
17
+ 2. **Share what you make.** You may publish, sell and distribute your Productions anywhere, with no
18
+ royalty and no attribution required (a credit to Volito is welcome, never required).
19
+ 3. **Change the items.** You may edit an item's code, props and look for your own Productions.
20
+ 4. **Build on them.** You may use the Packs inside your own software or service to make Productions
21
+ for your users, as long as your users receive the rendered media, not the Packs themselves.
22
+
23
+ ## What you may not do
24
+
25
+ 1. **Resell or give away the Packs as templates.** You may not sell, license, sublicense or
26
+ distribute the Packs, or modified versions of them, as templates, presets, project files, a
27
+ template library or marketplace listing, or as any product or service whose main value is the
28
+ Packs themselves.
29
+ 2. **Remove notices.** Keep this licence with any copy of the Packs you distribute as part of your
30
+ own software (item 4 above).
31
+ 3. **Use our name as yours.** This licence gives no right to the MONARC, MONARC STUDIOS, MONARC PRO or
32
+ Volito names or logos, except to say truthfully that you used Volito.
33
+
34
+ ## The rest
35
+
36
+ - **Termination.** If you break these terms, your permission ends; Productions you made before
37
+ then stay yours.
38
+ - **No warranty.** The Packs are provided "as is", without warranty of any kind, express or
39
+ implied, including merchantability, fitness for a particular purpose and non-infringement.
40
+ - **No liability.** In no event shall MONARC STUDIOS be liable for any claim, damages or other
41
+ liability arising from the Packs or their use.
42
+
43
+ Questions, or a use these terms do not cover: hello@monarcpro.app
package/README.md CHANGED
@@ -1,3 +1,343 @@
1
- # Temporary Holding Version
1
+ # Volito
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ **Brand-aware, voice-synced motion graphics as code — for developers and AI agents.**
4
+
5
+ By [MONARC STUDIOS](https://monarcpro.app), the team behind MONARC PRO. Volito is the motion graphics engine
6
+ inside the [MONARC PRO](https://monarcpro.app) video editor, opened up; the name is Latin for “to flutter”.
7
+ Every graphic is a small program — `function frame(t, $)` returns the SVG of one frame — so it is
8
+ readable, diffable, seekable to any frame, and something an AI agent can write and fix. It ships with
9
+ 96 ready-made graphics in ten packs (3D, maps, transitions and kinetic type among them), 36 brand styles,
10
+ sixteen animated patterns, a CLI, a Node API, a browser player and an MCP server, and renders to ProRes 4444 or HEVC with alpha, WebM, MP4, GIF, PNG frames or SVG.
11
+
12
+ - **One design, every brand.** Items draw with colour roles and faces, not fixed colours: pass one of 36
13
+ built-in styles, your `DESIGN.md`, or a couple of overrides, and the whole pack re-skins.
14
+ - **One design, every aspect.** Layouts follow the canvas and keep to title-safe areas, including the
15
+ space platforms reserve on 9:16. 16:9, 9:16, 1:1 and 4:5 from the same item.
16
+ - **On the voice.** Give a transcript and text lands on the words that say it.
17
+ - **Drops onto footage.** Overlays render with real alpha for Premiere, Resolve, Final Cut, After
18
+ Effects and CapCut.
19
+ - **Agent-native.** An MCP server gives Claude Code, Cursor and other agents tools to find, preview (as an
20
+ image they can see), check and render graphics — or to write their own.
21
+ - **Many scripts.** Latin, Latin Extended, Vietnamese, Cyrillic, Greek and Devanagari (Hindi), shaped properly.
22
+
23
+ ```bash
24
+ npx volito render lower-third \
25
+ --prop name="Priya Sharma" --prop role="Product designer" \
26
+ --style ember --aspect 16:9 --out priya.mov
27
+ ```
28
+
29
+ ## Install
30
+
31
+ ```bash
32
+ npm install volito # or run it with npx, nothing to install
33
+ ```
34
+
35
+ Volito was first published as `@monarcpro/motion`; that package is deprecated in favour of this one.
36
+
37
+ Node 20.10 or newer. Video formats need [ffmpeg](https://ffmpeg.org) on your `PATH` (or `VOLITO_FFMPEG`);
38
+ stills, contact sheets and PNG frames do not. WebM needs an ffmpeg built with libvpx.
39
+
40
+ ## The packs
41
+
42
+ 96 graphics in ten packs. Every one takes any brand style and any aspect, and every part of it takes any move.
43
+
44
+ | Pack | Items |
45
+ | --- | --- |
46
+ | **Essentials** (14) | `lower-third` · `title-card` · `headline` (kinetic, on the voice) · `subscribe` · `social` · `callout` · `stat` · `bar-chart` · `steps` · `quote` · `banner` · `end-card` · `logo-sting` · `wipe` |
47
+ | **Broadcast** (10) | Lower thirds in five looks — `lt-bars`, `lt-reveal` (mask reveal), `lt-kicker`, `lt-pill` (picture or initials, status dot), `lt-news` (tight boxes) — `ticker` (crawl), `live-badge` (viewers, clock), `score-bug` (teams, scores, clock, goal flash), `location` (pin and place card), `countdown` |
48
+ | **Social** (8) | `follow-card` (profile, count, Follow press) · `notification` (phone or desktop) · `notifications` (a stack that cascades) · `comments` (typing on) · `chat` (thread with typing dots) · `post` (counts and a heart) · `now-playing` (music card) · `rating` (stars, score, review) |
49
+ | **Data** (9) | `line-chart` (draws on, target line) · `donut` · `bar-race` (overtaking across periods) · `goals` (meters) · `versus` · `timeline` · `funnel` · `world-map` (countries filled by value, regions) · `flight` (a great-circle route between two places) |
50
+ | **3D** (7) | `logo-3d` (extruded wordmark, light sweep) · `title-3d` (letters flip up) · `number-3d` (an extruded counter) · `card-flip` (front and back) · `cube` (a word prism that rolls) · `bars-3d` (orbiting camera) · `globe` (spins to a country, routes arc in) |
51
+ | **Transitions** (11) | Cover the frame by the cut, reveal the next shot: `iris` (circle, diamond, star, square) · `blinds` · `doors` (with a Bauhaus disc) · `glitch` · `ink` (wobbly blooms) · `clock` · `tiles` (Bauhaus shapes) · `pixels` · `stripes` · `slices` · `whip` — each with a word at the cut |
52
+ | **Annotate** (10) | Point at things in footage (places in % of the frame): `arrow` (hand-drawn or clean) · `circle` · `spotlight` (feathered dim) · `focus` (brackets that lock on) · `highlight` (highlighter, underline, box, strike) · `stamp` (pressed ink) · `reactions` (live hearts, likes, fire) · `pointer` (leader line and card) · `emphasis` · `markers` (numbered) |
53
+ | **Type** (10) | Kinetic type: `typewriter` · `word-swap` (a word that keeps changing) · `split-flap` · `marquee` (tilted scrolling bands) · `echo` · `liquid-fill` · `decode` · `word-by-word` · `key-phrase` (marker on *marked* words) · `stack` (editorial) |
54
+ | **Backdrops** (9) | Moving grounds: `pattern` (any of the sixteen) · `aurora` · `tiles` (Bauhaus field) · `retro-grid` (synthwave) · `blobs` (lava goo) · `gradient` · `starfield` · `bokeh` · `topo` |
55
+ | **Promo** (8) | `sale-badge` (starburst) · `price-card` (counts down, strike, click) · `coupon` (copy the code) · `offer-countdown` (D:H:M:S) · `features` (checklist) · `cta` (button and cursor) · `launch` · `ribbon` (crossing tapes) |
56
+
57
+ `volito info <item>` lists every prop. To see them all live, serve this package's folder and
58
+ open `examples/gallery.html`.
59
+
60
+ ## Motion without limits
61
+
62
+ Every item is made of named **parts** (`volito info lower-third` lists them: `scrim`, `spine`, `plate`,
63
+ `name`, `role`). Any part takes any move, and the moves combine freely:
64
+
65
+ ```bash
66
+ volito render lower-third \
67
+ --motion name.in=typewriter --motion plate.in=iris --motion "*.ease=bouncy" \
68
+ --motion role.emphasis=pulse@2 --motion spine.idle=pulse --out priya.mov
69
+ ```
70
+
71
+ | Setting | Takes |
72
+ | --- | --- |
73
+ | `in`, `out` | 38 moves — `rise` `drop` `slide` `smear` `arc` `pop` `zoom` `push` `grow` `wipe` `iris` `shutter` `blinds` `diagonal` `blur` `flip` `turn` `spin` `roll` `swing` `skew` `stretch` `squash` `bounce` `elastic` `slam` `tilt` `float` `glitch` `flicker` `typewriter` `scramble` … An exit plays its move backwards. |
74
+ | `ease` | `out` `inOut` `expo` `back` `elastic` `bounce`, springs `snappy` `punchy` `bouncy` `calm` `wobbly`, or `spring(f,d)`, `steps(n)`, `cubic(x1,y1,x2,y2)` |
75
+ | `from`, `outFrom` | the side a move comes from or leaves to (`left`, `right`, `up`, `down`, diagonals) |
76
+ | `dur`, `delay`, `at`, `outAt`, `distance`, `intensity`, `origin`, `blur` | timing, travel, scale, pivot, motion blur |
77
+ | `idle` | a loop while it holds: `float` `bob` `pulse` `breathe` `wiggle` `sway` `drift` `jitter` `spin` `heartbeat` `shimmer` |
78
+ | `emphasis` | hits at a time, a beat or a spoken word: `"shake@1.2, pop@now"` (`pulse` `pop` `shake` `jump` `wobble` `flash` `spin` `rubber` `tada`) |
79
+ | `split`, `order`, `stagger` | text whole, or by `lines` / `words` / `letters`, `forward` `reverse` `center` `edges` `random` |
80
+ | `keys` | your own keyframes: `[{"t":0,"x":-300,"op":0},{"t":0.8,"x":0,"op":1,"ease":"bouncy"}]` — any path |
81
+
82
+ Or let it choreograph itself: `--mood energetic | elegant | playful | cinematic | glitchy | minimal | retro | kinetic`,
83
+ and `--seed <n>` for a new take on every number (the same number always moves the same way). `--speed 2` plays
84
+ it all twice as fast. `volito moves` lists everything. Programs you write get the same kit:
85
+ `const M = motion($, t); M.part("card", { at, in: "pop", box }, markup)`.
86
+
87
+ ## 3D and maps
88
+
89
+ The 3D items are real geometry, not tricks: meshes are lit, faces turned away are culled, everything is
90
+ sorted far to near and projected through a perspective camera — then drawn as SVG paths, so 3D renders on
91
+ any machine with no GPU, at the same speed as the rest. 3D text is extruded from the outlines of the
92
+ bundled faces (read straight from the font files), so a logo turns in the brand's own type.
93
+
94
+ ```js
95
+ function frame(t, $) {
96
+ const S = scene3d($, { camera: { yaw: -20 + 40 * (t / $.dur), pitch: -8 } });
97
+ S.add(S.text("VOLITO", { face: $.font("display"), size: 220 * $.k, depth: 60 * $.k, color: $.c.fg, side: $.c.accent }));
98
+ return S.render();
99
+ }
100
+ ```
101
+
102
+ Maps use Natural Earth's countries (177, packed into 30 KB): `worldMap($, { center, zoom })` projects them
103
+ flat (Equal Earth), `worldGlobe(S, …)` puts them on a 3D globe, and `worldFind("UK")` finds one by name,
104
+ short name or ISO number. `volito api` documents both.
105
+
106
+ ## CLI
107
+
108
+ ```bash
109
+ volito list # every item
110
+ volito info stat # what it is, every prop
111
+ volito styles # the built-in brand styles
112
+ volito moves # every move, ease, idle, hit and mood
113
+ volito sheet title-card --mood playful --seed 7 # a new choreography
114
+ volito sheet stat --prop value=72 --prop suffix=% --prop chart=ring # frames across time, one PNG
115
+ volito still title-card --aspect 9:16 --t 1.5 --out frame.png
116
+ volito render banner --prop headline="Doors open at 9" --format webm --out banner.webm
117
+ volito check ./my-graphic.js # run it at every aspect, report problems
118
+ ```
119
+
120
+ | Option | |
121
+ | --- | --- |
122
+ | `--prop name=value` | a prop (repeat). Lists: `"a; b; c"`. Chart rows: `"Label: 42; Other: 17"` |
123
+ | `--props <json or file>` | every prop at once |
124
+ | `--image name=path` | a picture for an image prop (a file or URL) |
125
+ | `--style <name or DESIGN.md>` | a built-in style or your brand's `DESIGN.md` |
126
+ | `--accent --accent2 --ink --paper #hex` · `--mode dark\|light` · `--display --text Font:900` | overrides on the style |
127
+ | `--aspect 16:9\|9:16\|1:1\|4:5\|WxH` · `--duration s` · `--fps n` · `--width px` | the frame |
128
+ | `--bg #hex\|transparent` | a ground under the graphic |
129
+ | `--words transcript.json` · `--offset s` | land text on a voice (`[{w, s, e}]` or Whisper JSON) |
130
+ | `--motion part.setting=value` | how a part moves (repeat; `*` for every part) — see *Motion without limits* |
131
+ | `--mood m` · `--seed n` · `--speed x` | a choreography, a new take per seed, faster or slower |
132
+ | `--beat in=0.4 --beat out=-0.6` | move the entrance and exit (negative counts from the end) |
133
+ | `--packs <dir>` | more packs (also `VOLITO_PACKS`) |
134
+ | `--format mov\|webm\|mp4\|hevc\|gif\|png` | for `render`; `png`/`svg` for `still` |
135
+
136
+ | Format | |
137
+ | --- | --- |
138
+ | `mov` | ProRes 4444 with alpha — the default; for every desktop editor |
139
+ | `hevc` | HEVC with alpha in .mov — small files for Final Cut, iMovie, Safari (macOS) |
140
+ | `webm` | VP9 with alpha — for the web and CapCut |
141
+ | `mp4` | H.264, no alpha — drawn on `--bg` (black) |
142
+ | `gif` | animated GIF, 1-bit transparency |
143
+ | `png` | a folder of PNG frames with alpha |
144
+
145
+ ## AI agents (MCP)
146
+
147
+ ```bash
148
+ claude mcp add volito -- npx -y volito mcp
149
+ ```
150
+
151
+ Cursor, Windsurf and other MCP clients:
152
+
153
+ ```json
154
+ { "mcpServers": { "volito": { "command": "npx", "args": ["-y", "volito", "mcp"] } } }
155
+ ```
156
+
157
+ | Tool | |
158
+ | --- | --- |
159
+ | `motion_list` | find graphics by words or category |
160
+ | `motion_info` | an item's props (and its source with `code: true`) |
161
+ | `motion_styles` | the brand styles |
162
+ | `motion_preview` | a contact sheet as an image — the agent sees how it moves and whether text fits |
163
+ | `motion_still` | one frame as an image |
164
+ | `motion_check` | errors and warnings at every aspect |
165
+ | `motion_render` | render to a file and return its path |
166
+ | `motion_moves` | every move, ease, idle, hit and mood the `motion` settings take |
167
+ | `motion_api` | the program API and the motion kit, for writing new graphics |
168
+
169
+ Every tool takes an `item` or your own `code`, plus `motion`, `mood`, `seed` and `speed`. A ready-made agent skill is in `skill/SKILL.md` — copy it
170
+ to `~/.claude/skills/volito/` for Claude Code.
171
+
172
+ ## Node API
173
+
174
+ ```js
175
+ import { findItem, renderVideo, renderStill, renderSheet, checkItem } from "volito";
176
+
177
+ const item = findItem("essentials/lower-third");
178
+ const result = await renderVideo(item, {
179
+ props: { name: "Priya Sharma", role: "Product designer" },
180
+ style: "ember", // or the text of a DESIGN.md, or { colors, fonts, … }
181
+ colors: { accent: "#00A86B" }, // overrides
182
+ aspect: "9:16",
183
+ out: "priya.mov",
184
+ });
185
+ console.log(result.file, result.frames, result.warnings);
186
+ ```
187
+
188
+ ## Browser
189
+
190
+ ```js
191
+ import { loadRegistry, findItem, createPlayer } from "volito/browser";
192
+
193
+ const registry = await loadRegistry(); // the packs, from jsDelivr (or pass your own base URL)
194
+ const player = await createPlayer(canvas, findItem(registry, "headline"), {
195
+ props: { text: "Stop editing. *Start directing.*" },
196
+ style: "neon",
197
+ aspect: "16:9",
198
+ });
199
+ player.play(); // also: pause(), seek(t), update({ props }), destroy()
200
+ ```
201
+
202
+ The player runs each program in a sandboxed Web Worker and draws through the same SVG path as the
203
+ renderer, so what plays on the page is what renders. Fonts load from `base` (the package's own
204
+ `fonts/` on jsDelivr by default); serve the package's `fonts/` and `dist/registry.json` to stay offline.
205
+
206
+ ## Brand styles
207
+
208
+ 36 built in. MONARC PRO's: `ember`, `cream`, `mono`, `neon`, `pop`, `studio`, and the explainer art
209
+ styles `whiteboard`, `sketch`, `pastel`, `pixel`, `collage`, `diorama`, `clay`, `storybook`. And Volito's
210
+ own, each with an animated pattern for a ground:
211
+
212
+ | Style | Look | Pattern |
213
+ | --- | --- | --- |
214
+ | `cobalt` | cobalt colour field, cream type, acid lime | `bauhaus` |
215
+ | `tomato` | tomato-red poster, black slabs | `halftone` |
216
+ | `acid` | acid-yellow sheet, indigo serif | `dither` |
217
+ | `candy` | neo-brutal: outlines, hard shadows, pink and yellow | `dots` |
218
+ | `riso` | risograph pink and blue on paper | `halftone` |
219
+ | `aurora` | night with drifting violet and cyan light, glass | `mesh` |
220
+ | `sunset` | plum ground, coral and gold blooms | `mesh` |
221
+ | `lime` | ink ground, electric lime | `plus` |
222
+ | `sport` | black, volt and blaze, condensed caps | `stripes` |
223
+ | `retro` | seventies cream, orange and mustard, fat serif | `waves` |
224
+ | `diner` | cream, cherry and teal, script headline | `checker` |
225
+ | `blueprint` | graph paper, cobalt ink, serif | `graph` |
226
+ | `forest` | deep green field, peony pink, soft serif | `rings` |
227
+ | `luxe` | black and champagne gold, deco | `sunburst` |
228
+ | `capsule` | outlined pills, coral and lime | `pills` |
229
+ | `memphis` | warm white, hot pink and sky, confetti | `confetti` |
230
+ | `swiss` | off-white, black, signal red, heavy Inter | `tiles` |
231
+ | `terminal` | phosphor green monospace | `dither` |
232
+ | `vapor` | synthwave magenta and cyan | `waves` |
233
+ | `scifi` | HUD cyan, geometric display | `plus` |
234
+ | `mint` | mint sheet, coral pop | `dots` |
235
+ | `editorial` | magazine black and red, didone | `hatch` |
236
+
237
+ `volito styles` lists them all. Or pass a `DESIGN.md`:
238
+
239
+ ```markdown
240
+ ---
241
+ name: acme
242
+ mode: light
243
+ colors:
244
+ accent: "#00A86B"
245
+ accent2: "#FFD23F"
246
+ ink: "#101418"
247
+ paper: "#FAFAF7"
248
+ fonts:
249
+ display: "Poppins:800"
250
+ text: "Inter:600"
251
+ motion: bouncy
252
+ surface: glass
253
+ ---
254
+ # Acme
255
+ Friendly, confident, never shouty.
256
+ ```
257
+
258
+ Faces available: Inter, Space Grotesk, Space Mono, Poppins, Playfair Display, Montserrat, Anton, Outfit,
259
+ Gabarito, Caveat, Press Start 2P, Permanent Marker, Patrick Hand, Fredoka, IM Fell English, Bebas Neue,
260
+ DM Serif Display, Archivo Black, Syne, Unbounded, Righteous, Orbitron, Pacifico, Fraunces and Bricolage Grotesque.
261
+
262
+ ### Patterns
263
+
264
+ A style's `texture` can name any of sixteen animated patterns, and every ground the items draw picks it
265
+ up: `dots`, `plus`, `graph`, `hatch`, `stripes`, `checker`, `halftone`, `dither`, `waves`, `rings`, `mesh`,
266
+ `confetti`, `bauhaus`, `tiles`, `pills`, `sunburst` (the editor's `grid`, `glow`, `grain`, `paper`, `board`,
267
+ `parchment`, `pixel` and `studio` still work). Programs can draw one anywhere:
268
+
269
+ ```js
270
+ s += $.pattern(t, "halftone", { box: { x: 0, y: 0, w: W, h: H }, a: 1.2, scale: 1, speed: 0.5 });
271
+ ```
272
+
273
+ Options: `box`, `color`, `color2`, `a` (strength), `scale`, `speed`, `angle`, `at` ([x, y] for rings,
274
+ halftone, sunburst), `count`, `seed`, `r`. They are pure functions of time like everything else — no GPU.
275
+
276
+ ## Write your own
277
+
278
+ ```bash
279
+ volito new promo-card # item.json + frame.js from a template
280
+ volito sheet ./motion/promo-card
281
+ volito api # the whole $ runtime
282
+ volito guide # how items and packs are laid out
283
+ ```
284
+
285
+ ```js
286
+ function frame(t, $) {
287
+ const p = $.data, k = $.k; // props, and the canvas scale (1 at 1080 px)
288
+ const tin = $.beat("in", 0.2);
289
+ return $.g($.enter(t, tin, { dy: 60 * k, ox: $.W / 2, oy: $.H / 2 }),
290
+ $.card($.W / 2 - 320 * k, $.H / 2 - 110 * k, 640 * k, 220 * k),
291
+ $.text($.case(p.title ?? "Hello"), { ...$.font("display"), size: 80 * k, x: $.W / 2, y: $.H / 2 - 44 * k, anchor: "middle" }));
292
+ }
293
+ ```
294
+
295
+ A program is a pure function of `t`: no `Date`, `Math.random` (use `$.hash`), timers, network or DOM.
296
+ Size by `$.k`, colour from `$.c`, faces from `$.font(role)`, and a brand's `DESIGN.md` re-skins it.
297
+ A pack is a folder with `pack.json`, a `shared.js` of helpers and one folder per item; load it with
298
+ `--packs <dir>`.
299
+
300
+ ## How it renders
301
+
302
+ Node runs each program in a fresh `vm` context holding the same worker source MONARC PRO uses.
303
+ Only strings and numbers cross into it, and eval, `Function`, `require`, `process` and the network are
304
+ out of reach. Text is measured with fontkit against the bundled faces; frames are rasterised by
305
+ [resvg](https://github.com/RazrFalcon/resvg); text beyond a face's Latin cut is shaped by fontkit and
306
+ drawn as outlines, and dash patterns written against `pathLength` (which resvg ignores) are scaled to
307
+ each shape's real length first. Frames that don't change are drawn once. The motion kit, the 3D kit and
308
+ the map data ship as libraries that are added to a program when it is built: items stay small, and the
309
+ 60 000-character limit applies only to what an item's author (or an agent) wrote.
310
+
311
+ `vm` keeps mistakes contained, but it is not a security boundary. Run packs you trust, as you would
312
+ any npm package.
313
+
314
+ ## Development
315
+
316
+ ```bash
317
+ pnpm install # Node 22.18 or newer for development (the package itself runs on Node 20.10+)
318
+ pnpm build # fonts/ from Fontsource, then dist/
319
+ pnpm test
320
+ node dist/cli.js sheet lower-third --mood playful --seed 7 --out sheet.png
321
+ ```
322
+
323
+ `node scripts/review.mjs <aspect> <style> [items | pack:<id>] [times]` writes contact sheets to `out/`,
324
+ `node scripts/styles.mjs [styles] [items]` one row per style, `node scripts/strip.mjs <items> <aspect> <style>
325
+ <times> '<props JSON>'` the same props across several items,
326
+ `node scripts/variants.mjs <item>` one item under many seeds, and `node scripts/demo-grid.mjs <item>` a 3×3
327
+ video of nine choreographies.
328
+
329
+ The engine in `src/engine/` (the runtime every program draws with, its sandbox and the brand styles) is the
330
+ same code MONARC PRO uses, copied from MONARC PRO's core so this repo stands alone; `src/engine/SOURCE.json`
331
+ names the commit. With a MONARC PRO checkout (`../monarc`) next to this one, `pnpm sync-engine` brings it up to date and
332
+ `node scripts/sync-engine.mjs --check` reports drift. Packs, the motion kit (`src/kit.ts`), the extra
333
+ faces (`src/fonts-extra.ts`), styles (`src/styles-extra.ts`) and patterns (`src/patterns.ts`) live here;
334
+ `src/engine.ts` splices the faces and patterns into the runtime without editing the copy.
335
+
336
+ ## Licence
337
+
338
+ - The engine: [MIT](LICENSE).
339
+ - The MONARC packs: the [MONARC Packs License](PACKS-LICENSE.md). Use them in any video, personal or
340
+ commercial, with no attribution required. Don't resell them as templates.
341
+ - The fonts: each family's SIL Open Font License, in `fonts/licenses/`.
342
+
343
+ Made by [MONARC STUDIOS](https://monarcpro.app), the team behind [MONARC PRO](https://monarcpro.app).