videowright 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 (306) hide show
  1. package/README.md +91 -0
  2. package/dist/cli/argv.d.ts +28 -0
  3. package/dist/cli/argv.d.ts.map +1 -0
  4. package/dist/cli/argv.js +115 -0
  5. package/dist/cli/argv.js.map +1 -0
  6. package/dist/cli/bin.d.ts +7 -0
  7. package/dist/cli/bin.d.ts.map +1 -0
  8. package/dist/cli/bin.js +10 -0
  9. package/dist/cli/bin.js.map +1 -0
  10. package/dist/cli/dev.d.ts +19 -0
  11. package/dist/cli/dev.d.ts.map +1 -0
  12. package/dist/cli/dev.js +104 -0
  13. package/dist/cli/dev.js.map +1 -0
  14. package/dist/cli/discover.d.ts +29 -0
  15. package/dist/cli/discover.d.ts.map +1 -0
  16. package/dist/cli/discover.js +104 -0
  17. package/dist/cli/discover.js.map +1 -0
  18. package/dist/cli/discover_project.d.ts +29 -0
  19. package/dist/cli/discover_project.d.ts.map +1 -0
  20. package/dist/cli/discover_project.js +108 -0
  21. package/dist/cli/discover_project.js.map +1 -0
  22. package/dist/cli/errors.d.ts +10 -0
  23. package/dist/cli/errors.d.ts.map +1 -0
  24. package/dist/cli/errors.js +13 -0
  25. package/dist/cli/errors.js.map +1 -0
  26. package/dist/cli/ffmpeg.d.ts +57 -0
  27. package/dist/cli/ffmpeg.d.ts.map +1 -0
  28. package/dist/cli/ffmpeg.js +122 -0
  29. package/dist/cli/ffmpeg.js.map +1 -0
  30. package/dist/cli/index.d.ts +7 -0
  31. package/dist/cli/index.d.ts.map +1 -0
  32. package/dist/cli/index.js +152 -0
  33. package/dist/cli/index.js.map +1 -0
  34. package/dist/cli/playwright_check.d.ts +44 -0
  35. package/dist/cli/playwright_check.d.ts.map +1 -0
  36. package/dist/cli/playwright_check.js +20 -0
  37. package/dist/cli/playwright_check.js.map +1 -0
  38. package/dist/cli/prompt.d.ts +13 -0
  39. package/dist/cli/prompt.d.ts.map +1 -0
  40. package/dist/cli/prompt.js +47 -0
  41. package/dist/cli/prompt.js.map +1 -0
  42. package/dist/cli/render.d.ts +60 -0
  43. package/dist/cli/render.d.ts.map +1 -0
  44. package/dist/cli/render.js +471 -0
  45. package/dist/cli/render.js.map +1 -0
  46. package/dist/cli/script_cmd.d.ts +26 -0
  47. package/dist/cli/script_cmd.d.ts.map +1 -0
  48. package/dist/cli/script_cmd.js +88 -0
  49. package/dist/cli/script_cmd.js.map +1 -0
  50. package/dist/cli/time_shim.d.ts +44 -0
  51. package/dist/cli/time_shim.d.ts.map +1 -0
  52. package/dist/cli/time_shim.js +390 -0
  53. package/dist/cli/time_shim.js.map +1 -0
  54. package/dist/cli/ts_loader.d.ts +28 -0
  55. package/dist/cli/ts_loader.d.ts.map +1 -0
  56. package/dist/cli/ts_loader.js +95 -0
  57. package/dist/cli/ts_loader.js.map +1 -0
  58. package/dist/cli/vite_helpers.d.ts +62 -0
  59. package/dist/cli/vite_helpers.d.ts.map +1 -0
  60. package/dist/cli/vite_helpers.js +273 -0
  61. package/dist/cli/vite_helpers.js.map +1 -0
  62. package/dist/index.d.ts +11 -0
  63. package/dist/index.d.ts.map +1 -0
  64. package/dist/index.js +14 -0
  65. package/dist/index.js.map +1 -0
  66. package/dist/player/hash_router.d.ts +23 -0
  67. package/dist/player/hash_router.d.ts.map +1 -0
  68. package/dist/player/hash_router.js +49 -0
  69. package/dist/player/hash_router.js.map +1 -0
  70. package/dist/player/hud.d.ts +33 -0
  71. package/dist/player/hud.d.ts.map +1 -0
  72. package/dist/player/hud.js +357 -0
  73. package/dist/player/hud.js.map +1 -0
  74. package/dist/player/index.d.ts +123 -0
  75. package/dist/player/index.d.ts.map +1 -0
  76. package/dist/player/index.js +848 -0
  77. package/dist/player/index.js.map +1 -0
  78. package/dist/player/input.d.ts +14 -0
  79. package/dist/player/input.d.ts.map +1 -0
  80. package/dist/player/input.js +90 -0
  81. package/dist/player/input.js.map +1 -0
  82. package/dist/player/slot.d.ts +22 -0
  83. package/dist/player/slot.d.ts.map +1 -0
  84. package/dist/player/slot.js +43 -0
  85. package/dist/player/slot.js.map +1 -0
  86. package/dist/player/transitions/cut.d.ts +7 -0
  87. package/dist/player/transitions/cut.d.ts.map +1 -0
  88. package/dist/player/transitions/cut.js +9 -0
  89. package/dist/player/transitions/cut.js.map +1 -0
  90. package/dist/player/transitions/fade.d.ts +7 -0
  91. package/dist/player/transitions/fade.d.ts.map +1 -0
  92. package/dist/player/transitions/fade.js +18 -0
  93. package/dist/player/transitions/fade.js.map +1 -0
  94. package/dist/player/transitions/index.d.ts +4 -0
  95. package/dist/player/transitions/index.d.ts.map +1 -0
  96. package/dist/player/transitions/index.js +4 -0
  97. package/dist/player/transitions/index.js.map +1 -0
  98. package/dist/player/transitions/slide.d.ts +6 -0
  99. package/dist/player/transitions/slide.d.ts.map +1 -0
  100. package/dist/player/transitions/slide.js +35 -0
  101. package/dist/player/transitions/slide.js.map +1 -0
  102. package/dist/script/index.d.ts +2 -0
  103. package/dist/script/index.d.ts.map +1 -0
  104. package/dist/script/index.js +2 -0
  105. package/dist/script/index.js.map +1 -0
  106. package/dist/script/script.d.ts +10 -0
  107. package/dist/script/script.d.ts.map +1 -0
  108. package/dist/script/script.js +41 -0
  109. package/dist/script/script.js.map +1 -0
  110. package/dist/segment/SegmentRunner.d.ts +52 -0
  111. package/dist/segment/SegmentRunner.d.ts.map +1 -0
  112. package/dist/segment/SegmentRunner.js +187 -0
  113. package/dist/segment/SegmentRunner.js.map +1 -0
  114. package/dist/segment/defineConfig.d.ts +6 -0
  115. package/dist/segment/defineConfig.d.ts.map +1 -0
  116. package/dist/segment/defineConfig.js +7 -0
  117. package/dist/segment/defineConfig.js.map +1 -0
  118. package/dist/segment/defineSegment.d.ts +7 -0
  119. package/dist/segment/defineSegment.d.ts.map +1 -0
  120. package/dist/segment/defineSegment.js +25 -0
  121. package/dist/segment/defineSegment.js.map +1 -0
  122. package/dist/segment/index.d.ts +5 -0
  123. package/dist/segment/index.d.ts.map +1 -0
  124. package/dist/segment/index.js +4 -0
  125. package/dist/segment/index.js.map +1 -0
  126. package/dist/timeline/index.d.ts +73 -0
  127. package/dist/timeline/index.d.ts.map +1 -0
  128. package/dist/timeline/index.js +142 -0
  129. package/dist/timeline/index.js.map +1 -0
  130. package/dist/timeline/loadAudioTrack.d.ts +18 -0
  131. package/dist/timeline/loadAudioTrack.d.ts.map +1 -0
  132. package/dist/timeline/loadAudioTrack.js +44 -0
  133. package/dist/timeline/loadAudioTrack.js.map +1 -0
  134. package/dist/timeline/loadVoiceover.d.ts +18 -0
  135. package/dist/timeline/loadVoiceover.d.ts.map +1 -0
  136. package/dist/timeline/loadVoiceover.js +38 -0
  137. package/dist/timeline/loadVoiceover.js.map +1 -0
  138. package/dist/timeline/resolveTiming.d.ts +28 -0
  139. package/dist/timeline/resolveTiming.d.ts.map +1 -0
  140. package/dist/timeline/resolveTiming.js +63 -0
  141. package/dist/timeline/resolveTiming.js.map +1 -0
  142. package/dist/timeline/validateTiming.d.ts +29 -0
  143. package/dist/timeline/validateTiming.d.ts.map +1 -0
  144. package/dist/timeline/validateTiming.js +62 -0
  145. package/dist/timeline/validateTiming.js.map +1 -0
  146. package/dist/types.d.ts +216 -0
  147. package/dist/types.d.ts.map +1 -0
  148. package/dist/types.js +6 -0
  149. package/dist/types.js.map +1 -0
  150. package/package.json +47 -0
  151. package/skill/SKILL.md +64 -0
  152. package/skill/assets/hello_world/PLAN.md +31 -0
  153. package/skill/assets/hello_world/README.md +27 -0
  154. package/skill/assets/hello_world/audio/audio_plan.md +14 -0
  155. package/skill/assets/hello_world/segments/hello_intro.ts +69 -0
  156. package/skill/assets/hello_world/segments/hello_outro.ts +71 -0
  157. package/skill/assets/hello_world/timeline.ts +15 -0
  158. package/skill/assets/hello_world/voiceover_script/script.md +10 -0
  159. package/skill/assets/install/package.json +10 -0
  160. package/skill/assets/install/tsconfig.json +23 -0
  161. package/skill/assets/styles/editorial-mono/STYLE.md +124 -0
  162. package/skill/assets/styles/editorial-mono/brand.md +85 -0
  163. package/skill/assets/styles/editorial-mono/reference/animations.jsx +752 -0
  164. package/skill/assets/styles/editorial-mono/reference/scenes.html +563 -0
  165. package/skill/assets/styles/editorial-mono/sample/bullet.ts +101 -0
  166. package/skill/assets/styles/editorial-mono/sample/content.ts +104 -0
  167. package/skill/assets/styles/editorial-mono/sample/cta.ts +113 -0
  168. package/skill/assets/styles/editorial-mono/sample/feature.ts +111 -0
  169. package/skill/assets/styles/editorial-mono/sample/grid.ts +97 -0
  170. package/skill/assets/styles/editorial-mono/sample/kinetic.ts +96 -0
  171. package/skill/assets/styles/editorial-mono/sample/section.ts +101 -0
  172. package/skill/assets/styles/editorial-mono/sample/stat.ts +128 -0
  173. package/skill/assets/styles/editorial-mono/sample/title.ts +97 -0
  174. package/skill/assets/styles/editorial-mono/sample/ui-showcase.ts +159 -0
  175. package/skill/assets/styles/editorial-mono/tokens.css +44 -0
  176. package/skill/assets/styles/iso-diagram/STYLE.md +109 -0
  177. package/skill/assets/styles/iso-diagram/brand.md +32 -0
  178. package/skill/assets/styles/iso-diagram/reference/animations.jsx +673 -0
  179. package/skill/assets/styles/iso-diagram/reference/scenes.html +427 -0
  180. package/skill/assets/styles/iso-diagram/sample/bullet.ts +144 -0
  181. package/skill/assets/styles/iso-diagram/sample/content.ts +192 -0
  182. package/skill/assets/styles/iso-diagram/sample/cta.ts +162 -0
  183. package/skill/assets/styles/iso-diagram/sample/feature.ts +205 -0
  184. package/skill/assets/styles/iso-diagram/sample/grid.ts +181 -0
  185. package/skill/assets/styles/iso-diagram/sample/kinetic.ts +102 -0
  186. package/skill/assets/styles/iso-diagram/sample/section.ts +149 -0
  187. package/skill/assets/styles/iso-diagram/sample/stat.ts +164 -0
  188. package/skill/assets/styles/iso-diagram/sample/title.ts +173 -0
  189. package/skill/assets/styles/iso-diagram/sample/ui-showcase.ts +162 -0
  190. package/skill/assets/styles/iso-diagram/tokens.css +40 -0
  191. package/skill/assets/styles/motion-engineering/STYLE.md +106 -0
  192. package/skill/assets/styles/motion-engineering/brand.md +29 -0
  193. package/skill/assets/styles/motion-engineering/reference/animations.jsx +673 -0
  194. package/skill/assets/styles/motion-engineering/reference/scenes.html +513 -0
  195. package/skill/assets/styles/motion-engineering/sample/bullet.ts +176 -0
  196. package/skill/assets/styles/motion-engineering/sample/content.ts +228 -0
  197. package/skill/assets/styles/motion-engineering/sample/cta.ts +209 -0
  198. package/skill/assets/styles/motion-engineering/sample/feature.ts +299 -0
  199. package/skill/assets/styles/motion-engineering/sample/grid.ts +190 -0
  200. package/skill/assets/styles/motion-engineering/sample/kinetic.ts +159 -0
  201. package/skill/assets/styles/motion-engineering/sample/section.ts +196 -0
  202. package/skill/assets/styles/motion-engineering/sample/stat.ts +230 -0
  203. package/skill/assets/styles/motion-engineering/sample/title.ts +219 -0
  204. package/skill/assets/styles/motion-engineering/sample/ui-showcase.ts +267 -0
  205. package/skill/assets/styles/motion-engineering/tokens.css +40 -0
  206. package/skill/assets/styles/neon-terminal/STYLE.md +105 -0
  207. package/skill/assets/styles/neon-terminal/brand.md +27 -0
  208. package/skill/assets/styles/neon-terminal/reference/animations.jsx +673 -0
  209. package/skill/assets/styles/neon-terminal/reference/scenes.html +387 -0
  210. package/skill/assets/styles/neon-terminal/sample/bullet.ts +113 -0
  211. package/skill/assets/styles/neon-terminal/sample/content.ts +117 -0
  212. package/skill/assets/styles/neon-terminal/sample/cta.ts +131 -0
  213. package/skill/assets/styles/neon-terminal/sample/feature.ts +112 -0
  214. package/skill/assets/styles/neon-terminal/sample/grid.ts +128 -0
  215. package/skill/assets/styles/neon-terminal/sample/kinetic.ts +105 -0
  216. package/skill/assets/styles/neon-terminal/sample/section.ts +96 -0
  217. package/skill/assets/styles/neon-terminal/sample/stat.ts +123 -0
  218. package/skill/assets/styles/neon-terminal/sample/title.ts +122 -0
  219. package/skill/assets/styles/neon-terminal/sample/ui-showcase.ts +127 -0
  220. package/skill/assets/styles/neon-terminal/tokens.css +39 -0
  221. package/skill/assets/styles/risograph/STYLE.md +110 -0
  222. package/skill/assets/styles/risograph/brand.md +26 -0
  223. package/skill/assets/styles/risograph/reference/animations.jsx +673 -0
  224. package/skill/assets/styles/risograph/reference/scenes.html +403 -0
  225. package/skill/assets/styles/risograph/sample/bullet.ts +124 -0
  226. package/skill/assets/styles/risograph/sample/content.ts +135 -0
  227. package/skill/assets/styles/risograph/sample/cta.ts +149 -0
  228. package/skill/assets/styles/risograph/sample/feature.ts +152 -0
  229. package/skill/assets/styles/risograph/sample/grid.ts +123 -0
  230. package/skill/assets/styles/risograph/sample/kinetic.ts +125 -0
  231. package/skill/assets/styles/risograph/sample/section.ts +130 -0
  232. package/skill/assets/styles/risograph/sample/stat.ts +145 -0
  233. package/skill/assets/styles/risograph/sample/title.ts +132 -0
  234. package/skill/assets/styles/risograph/sample/ui-showcase.ts +147 -0
  235. package/skill/assets/styles/risograph/tokens.css +39 -0
  236. package/skill/assets/styles/swiss-console/STYLE.md +107 -0
  237. package/skill/assets/styles/swiss-console/brand.md +37 -0
  238. package/skill/assets/styles/swiss-console/reference/animations.jsx +673 -0
  239. package/skill/assets/styles/swiss-console/reference/scenes.html +420 -0
  240. package/skill/assets/styles/swiss-console/sample/bullet.ts +122 -0
  241. package/skill/assets/styles/swiss-console/sample/content.ts +137 -0
  242. package/skill/assets/styles/swiss-console/sample/cta.ts +109 -0
  243. package/skill/assets/styles/swiss-console/sample/feature.ts +163 -0
  244. package/skill/assets/styles/swiss-console/sample/grid.ts +145 -0
  245. package/skill/assets/styles/swiss-console/sample/kinetic.ts +117 -0
  246. package/skill/assets/styles/swiss-console/sample/section.ts +127 -0
  247. package/skill/assets/styles/swiss-console/sample/stat.ts +148 -0
  248. package/skill/assets/styles/swiss-console/sample/title.ts +148 -0
  249. package/skill/assets/styles/swiss-console/sample/ui-showcase.ts +198 -0
  250. package/skill/assets/styles/swiss-console/tokens.css +39 -0
  251. package/skill/install/INSTALL.md +400 -0
  252. package/skill/references/audio/audio_plan.md +199 -0
  253. package/skill/references/audio/build.md +208 -0
  254. package/skill/references/audio/cue_template.md +219 -0
  255. package/skill/references/audio/ffmpeg_cookbook.md +267 -0
  256. package/skill/references/audio/music/music.md +171 -0
  257. package/skill/references/audio/music/providers/elevenlabs.md +170 -0
  258. package/skill/references/audio/music/providers/manual.md +140 -0
  259. package/skill/references/audio/music/providers/openverse.md +265 -0
  260. package/skill/references/audio/sfx/providers/elevenlabs.md +152 -0
  261. package/skill/references/audio/sfx/providers/manual.md +117 -0
  262. package/skill/references/audio/sfx/providers/openverse.md +243 -0
  263. package/skill/references/audio/sfx/sfx.md +149 -0
  264. package/skill/references/audio/styles.md +102 -0
  265. package/skill/references/audio/sync.md +237 -0
  266. package/skill/references/audio/voiceover/animation_sync.md +142 -0
  267. package/skill/references/audio/voiceover/provider_script.md +153 -0
  268. package/skill/references/audio/voiceover/providers/elevenlabs.md +288 -0
  269. package/skill/references/audio/voiceover/providers/manual.md +100 -0
  270. package/skill/references/audio/voiceover/script_writing.md +100 -0
  271. package/skill/references/audio/voiceover/style_intake.md +56 -0
  272. package/skill/references/audio/voiceover/sync_algorithm.md +167 -0
  273. package/skill/references/audio/voiceover.md +296 -0
  274. package/skill/references/audio.md +135 -0
  275. package/skill/references/authoring_segment.md +446 -0
  276. package/skill/references/create_or_edit_video.md +232 -0
  277. package/skill/references/dev_server.md +157 -0
  278. package/skill/references/export.md +145 -0
  279. package/skill/references/new_video.md +117 -0
  280. package/skill/references/project_structure.md +144 -0
  281. package/skill/references/setup.md +109 -0
  282. package/skill/references/setup_new_style.md +158 -0
  283. package/skill/references/styles.md +154 -0
  284. package/skill/references/testing.md +115 -0
  285. package/skill/references/types.md +240 -0
  286. package/src/cli/entry/components/copy_button.ts +42 -0
  287. package/src/cli/entry/components/download_modal.ts +204 -0
  288. package/src/cli/entry/components/empty_state.ts +55 -0
  289. package/src/cli/entry/components/hide_hud_tab.ts +37 -0
  290. package/src/cli/entry/components/icons.ts +31 -0
  291. package/src/cli/entry/components/top_bar.ts +69 -0
  292. package/src/cli/entry/components/video_card.ts +57 -0
  293. package/src/cli/entry/dev_frame.ts +189 -0
  294. package/src/cli/entry/entry_index.ts +16 -0
  295. package/src/cli/entry/entry_video.ts +24 -0
  296. package/src/cli/entry/index.html +12 -0
  297. package/src/cli/entry/parse_slug.ts +14 -0
  298. package/src/cli/entry/render.html +17 -0
  299. package/src/cli/entry/render_entry.ts +121 -0
  300. package/src/cli/entry/styles/base.css +45 -0
  301. package/src/cli/entry/styles/components.css +605 -0
  302. package/src/cli/entry/styles/tokens.css +44 -0
  303. package/src/cli/entry/video.html +22 -0
  304. package/src/cli/entry/views/homepage.ts +66 -0
  305. package/src/cli/entry/views/video_view.ts +286 -0
  306. package/src/cli/entry/virtual.d.ts +8 -0
package/skill/assets/styles/neon-terminal/reference/scenes.html ADDED
@@ -0,0 +1,387 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Neon Terminal — Reference Scenes</title>
6
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
7
+ <link rel="stylesheet" href="../tokens.css" />
8
+ <style>
9
+ html, body { margin: 0; padding: 0; height: 100%; background: #0a0a0a; font-family: var(--font-body); }
10
+ .nt-canvas { position: absolute; inset: 0; background: var(--color-bg); color: var(--color-fg); overflow: hidden; }
11
+ .nt-canvas::before {
12
+ content: ''; position: absolute; inset: 0; pointer-events: none;
13
+ background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
14
+ }
15
+ .nt-canvas::after {
16
+ content: ''; position: absolute; inset: 0; pointer-events: none;
17
+ background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 100%);
18
+ }
19
+ .nt-glow { text-shadow: 0 0 12px rgba(74,222,128,0.45); color: var(--color-accent); }
20
+ .nt-glow-amber { text-shadow: 0 0 12px rgba(245,158,11,0.45); color: var(--amber); }
21
+ .nt-muted { color: var(--color-muted); }
22
+ .nt-h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.0; }
23
+ .nt-frame { border: 1px solid var(--color-border); }
24
+ @keyframes nt-blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
25
+ .nt-cursor { display: inline-block; width: 0.6em; height: 1em; background: var(--color-accent); box-shadow: 0 0 12px rgba(74,222,128,0.7); vertical-align: text-bottom; animation: nt-blink 1s steps(2,end) infinite; margin-left: 4px; }
26
+ </style>
27
+ </head>
28
+ <body>
29
+
30
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
31
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
32
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
33
+
34
+ <div id="root"></div>
35
+
36
+ <script type="text/babel" src="animations.jsx"></script>
37
+ <script type="text/babel">
38
+ const SCENE = 4;
39
+
40
+ // Typewriter — reveals N chars based on local time
41
+ function Type({ text, at = 0, cps = 40, className = '', style = {}, cursor = false, glow = false }) {
42
+ const { localTime } = useSprite();
43
+ const t = Math.max(0, localTime - at);
44
+ const n = Math.min(text.length, Math.floor(t * cps));
45
+ const done = n >= text.length;
46
+ return (
47
+ <span className={className} style={{ ...style }}>
48
+ <span className={glow ? 'nt-glow' : ''}>{text.slice(0, n)}</span>
49
+ {cursor && (done || n > 0) && <span className="nt-cursor" />}
50
+ </span>
51
+ );
52
+ }
53
+
54
+ // FadeStep — stepped fade-in (for blocks rather than text)
55
+ function Step({ at = 0, dur = 0.2, children, style = {} }) {
56
+ const { localTime } = useSprite();
57
+ const op = localTime < at ? 0 : localTime < at + dur ? Math.round(clamp((localTime - at)/dur, 0, 1) * 8) / 8 : 1;
58
+ return <div style={{ ...style, opacity: op }}>{children}</div>;
59
+ }
60
+
61
+ // Terminal window frame
62
+ function Term({ title, status, children }) {
63
+ return (
64
+ <div className="nt-frame" style={{ position: 'absolute', inset: '80px 96px', background: 'rgba(10,14,11,0.6)' }}>
65
+ <div style={{ display: 'flex', alignItems: 'center', padding: '14px 20px', borderBottom: '1px solid var(--color-border)', gap: 12, fontSize: 14, color: 'var(--color-muted)' }}>
66
+ <span style={{ width: 10, height: 10, borderRadius: 5, background: 'var(--color-border)' }} />
67
+ <span style={{ width: 10, height: 10, borderRadius: 5, background: 'var(--color-border)' }} />
68
+ <span style={{ width: 10, height: 10, borderRadius: 5, background: 'var(--color-border)' }} />
69
+ <span style={{ marginLeft: 16 }}>{title}</span>
70
+ <span style={{ marginLeft: 'auto' }} className="nt-glow">{status}</span>
71
+ </div>
72
+ <div style={{ padding: '48px 56px', height: 'calc(100% - 48px)', overflow: 'hidden', position: 'relative' }}>
73
+ {children}
74
+ </div>
75
+ </div>
76
+ );
77
+ }
78
+
79
+ function Counter() {
80
+ const t = useTime();
81
+ const i = Math.min(9, Math.floor(t/SCENE));
82
+ const labels = ['boot','section','statement','findings','metric','feature','grid','tui','memo','cta'];
83
+ return <div style={{ position: 'absolute', right: 110, top: 22, fontSize: 12, color: 'var(--color-muted)', fontFamily: 'var(--font-mono)' }}>
84
+ [{String(i+1).padStart(2,'0')}/10] {labels[i]}
85
+ </div>;
86
+ }
87
+
88
+ // ── Scene 1 — Boot / Title ──────────────────────────────────────────
89
+ function S1() {
90
+ return <Sprite start={0} end={SCENE}>
91
+ <Term title="beacon@console:~$" status="[ booting ]">
92
+ <div style={{ fontSize: 22 }}>
93
+ <div className="nt-muted">$ <Type text="beacon --launch" at={0} cps={20} glow /></div>
94
+ <div className="nt-muted" style={{ marginTop: 8 }}><Type text="initializing runtime..." at={1.0} cps={30} /></div>
95
+ <div className="nt-muted" style={{ marginTop: 6 }}><Type text="loaded 12 modules in 240ms" at={1.6} cps={50} /></div>
96
+ <Step at={2.2}>
97
+ <pre className="nt-h1 nt-glow" style={{ fontSize: 96, lineHeight: 1.1, margin: '40px 0 24px', whiteSpace: 'pre' }}>{
98
+ ` ____ ___ ___ ___ ___ _ _
99
+ | __ )| __| / __| / __/ _ \\| \\| |
100
+ | _ \\| _| | (__ | (_| (_) | . |
101
+ |___/|___| \\___| \\___\\___/|_|\\_|`
102
+ }</pre>
103
+ </Step>
104
+ <Step at={2.8} style={{ marginTop: 28 }}>
105
+ <div className="nt-h1" style={{ fontSize: 28 }}>// long-running agents for research labs<span className="nt-cursor" /></div>
106
+ </Step>
107
+ </div>
108
+ </Term>
109
+ <Counter />
110
+ </Sprite>;
111
+ }
112
+
113
+ // ── Scene 2 — Section ───────────────────────────────────────────────
114
+ function S2() {
115
+ return <Sprite start={SCENE} end={SCENE*2}>
116
+ <Term title="beacon@console:~$ section --part=02" status="[ chapter ]">
117
+ <div style={{ fontSize: 22 }}>
118
+ <div className="nt-muted"><Type text="── chapter 02 ────────────────────────────────────────────" at={0} cps={80} /></div>
119
+ <Step at={0.8} style={{ marginTop: 60 }}>
120
+ <div className="nt-h1" style={{ fontSize: 180 }}><span className="nt-glow">$</span> the architecture<span className="nt-cursor" /></div>
121
+ </Step>
122
+ <Step at={1.3} style={{ marginTop: 60 }}>
123
+ <div className="nt-muted" style={{ fontSize: 22 }}><Type text="── 3 primitives · memory · reasoning · recovery ──────────" at={1.3} cps={80} /></div>
124
+ </Step>
125
+ </div>
126
+ </Term>
127
+ <Counter />
128
+ </Sprite>;
129
+ }
130
+
131
+ // ── Scene 3 — Kinetic ───────────────────────────────────────────────
132
+ function S3() {
133
+ return <Sprite start={SCENE*2} end={SCENE*3}>
134
+ <Term title="beacon@console:~$ statement --id=03" status="[ premise ]">
135
+ <div style={{ fontSize: 22 }}>
136
+ <div className="nt-muted">$ <Type text="echo statement.03" at={0} cps={40} /></div>
137
+ <Step at={1.0} style={{ marginTop: 60 }}>
138
+ <div className="nt-h1" style={{ fontSize: 100, lineHeight: 1.1, maxWidth: 1500 }}>
139
+ <Type text="Most agents fail" at={1.0} cps={20} />
140
+ <br />
141
+ <Type text="because they " at={2.0} cps={20} />
142
+ <Type text="forget." at={2.7} cps={20} glow cursor />
143
+ </div>
144
+ </Step>
145
+ </div>
146
+ </Term>
147
+ <Counter />
148
+ </Sprite>;
149
+ }
150
+
151
+ // ── Scene 4 — Bullet ────────────────────────────────────────────────
152
+ function S4() {
153
+ const items = [
154
+ ['[01]','Context windows decay.','OK'],
155
+ ['[02]','Tool selection drifts.','OK'],
156
+ ['[03]','Plans go stale.','··'],
157
+ ['[04]','Errors compound.','··'],
158
+ ['[05]','Recovery requires restart.','!!'],
159
+ ];
160
+ return <Sprite start={SCENE*3} end={SCENE*4}>
161
+ <Term title="beacon@console:~$ failures --list" status="[ 5 findings ]">
162
+ <div style={{ fontSize: 22 }}>
163
+ <div className="nt-muted">$ <Type text="failures list --top=5" at={0} cps={40} /></div>
164
+ <div style={{ marginTop: 36 }}>
165
+ {items.map(([n, t, st], i) => (
166
+ <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 24, padding: '14px 0', borderBottom: '1px solid var(--color-border)' }}>
167
+ <Type text={n} at={0.8 + i*0.25} cps={40} className="nt-glow" />
168
+ <span style={{ minWidth: 40 }}>
169
+ <Type text={t} at={0.95 + i*0.25} cps={40} style={{ fontSize: 30 }} />
170
+ </span>
171
+ <span style={{ marginLeft: 'auto', minWidth: 80, textAlign: 'right' }}>
172
+ <Type text={`[${st}]`} at={1.15 + i*0.25} cps={40} className={st === 'OK' ? 'nt-glow' : st === '!!' ? 'nt-glow-amber' : 'nt-muted'} />
173
+ </span>
174
+ </div>
175
+ ))}
176
+ </div>
177
+ </div>
178
+ </Term>
179
+ <Counter />
180
+ </Sprite>;
181
+ }
182
+
183
+ // ── Scene 5 — Stat ──────────────────────────────────────────────────
184
+ function S5() {
185
+ return <Sprite start={SCENE*4} end={SCENE*5}>
186
+ {({ localTime }) => {
187
+ const t = Math.max(0, localTime - 0.6);
188
+ const v = Math.min(84, Math.floor(t * 100));
189
+ return <Term title="beacon@console:~$ metrics --id=03" status="[ Q1 2026 ]">
190
+ <div style={{ fontSize: 22 }}>
191
+ <div className="nt-muted">$ <Type text="metrics.failure_rate(step > 4)" at={0} cps={36} /></div>
192
+ <Step at={0.55} style={{ marginTop: 64 }}>
193
+ <div className="nt-h1 nt-glow" style={{ fontSize: 360, lineHeight: 0.95 }}>{String(v).padStart(2, '0')}%</div>
194
+ </Step>
195
+ <Step at={1.5} style={{ marginTop: 28 }}>
196
+ <div style={{ fontSize: 26, maxWidth: 1300 }}>
197
+ <span className="nt-muted">// </span>
198
+ of agent failures occur after the 4<span className="nt-muted">th</span> tool call.
199
+ </div>
200
+ <div className="nt-muted" style={{ fontSize: 18, marginTop: 16 }}>source: beacon.logs · n=12,840 sessions</div>
201
+ </Step>
202
+ </div>
203
+ </Term>;
204
+ }}
205
+ </Sprite>;
206
+ }
207
+
208
+ // ── Scene 6 — Feature ───────────────────────────────────────────────
209
+ function S6() {
210
+ return <Sprite start={SCENE*5} end={SCENE*6}>
211
+ <Term title="beacon@console:~$ feature describe" status="[ 01 of 03 ]">
212
+ <div style={{ fontSize: 22 }}>
213
+ <div className="nt-muted">$ <Type text="feature describe --name=checkpoint-memory" at={0} cps={28} /></div>
214
+ <Step at={1.4} style={{ marginTop: 48 }}>
215
+ <div className="nt-h1" style={{ fontSize: 100, marginBottom: 28 }}><span className="nt-glow">▸</span> checkpoint memory</div>
216
+ </Step>
217
+ <Step at={1.7}>
218
+ <div className="nt-muted" style={{ fontSize: 22, maxWidth: 1400, lineHeight: 1.5, marginBottom: 36 }}>
219
+ Snapshots an agent's reasoning state at each tool boundary. When a plan goes stale, the agent rewinds — not to the start, but to the last point its model of the world was correct.
220
+ </div>
221
+ </Step>
222
+ <Step at={2.1}>
223
+ <pre style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--color-muted)', margin: 0 }}>{
224
+ `╭─ params ─────────────────────────────────╮
225
+ │ snapshots/min : 120 │
226
+ │ avg restore : 9 ms │
227
+ │ retention : 14 d │
228
+ ╰──────────────────────────────────────────╯`
229
+ }</pre>
230
+ </Step>
231
+ </div>
232
+ </Term>
233
+ <Counter />
234
+ </Sprite>;
235
+ }
236
+
237
+ // ── Scene 7 — Card grid (3 mini terminals) ──────────────────────────
238
+ function S7() {
239
+ const cards = [
240
+ { n: '01', name: 'memory', cmd: 'memory.snap()', d: 'Persistent state across long sessions.' },
241
+ { n: '02', name: 'reasoning', cmd: 'plan.revise()', d: 'Plans that adapt to fresh evidence.' },
242
+ { n: '03', name: 'recovery', cmd: 'rewind.to(t)', d: 'Rewind to a last-known-good moment.' },
243
+ ];
244
+ return <Sprite start={SCENE*6} end={SCENE*7}>
245
+ <Term title="beacon@console:~$ architecture --primitives" status="[ 3 panes ]">
246
+ <div style={{ fontSize: 18 }}>
247
+ <div className="nt-muted">$ <Type text="arch.primitives()" at={0} cps={30} /></div>
248
+ <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
249
+ {cards.map((c, i) => (
250
+ <Step key={c.n} at={0.8 + i*0.2}>
251
+ <div className="nt-frame" style={{ padding: 24, minHeight: 360, background: 'rgba(74,222,128,0.03)' }}>
252
+ <div className="nt-glow" style={{ fontSize: 14, marginBottom: 20 }}>[{c.n}/03]</div>
253
+ <div className="nt-h1" style={{ fontSize: 48, marginBottom: 18 }}>{c.name}</div>
254
+ <div className="nt-muted" style={{ fontSize: 17, lineHeight: 1.5, marginBottom: 28 }}>{c.d}</div>
255
+ <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 18 }}>
256
+ <span className="nt-glow">$</span> <span style={{ fontSize: 17 }}>{c.cmd}</span>
257
+ </div>
258
+ </div>
259
+ </Step>
260
+ ))}
261
+ </div>
262
+ </div>
263
+ </Term>
264
+ <Counter />
265
+ </Sprite>;
266
+ }
267
+
268
+ // ── Scene 8 — TUI showcase ──────────────────────────────────────────
269
+ function S8() {
270
+ return <Sprite start={SCENE*7} end={SCENE*8}>
271
+ <Term title="beacon@console:~$ tui --session=41ac" status="[ live ]">
272
+ <div style={{ fontSize: 16 }}>
273
+ <Step at={0.2}>
274
+ <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr 240px', height: 720, border: '1px solid var(--color-border)' }}>
275
+ <div style={{ padding: 16, borderRight: '1px solid var(--color-border)', display: 'flex', flexDirection: 'column', gap: 6 }}>
276
+ <div className="nt-muted" style={{ fontSize: 12, marginBottom: 8 }}>── MENU ──</div>
277
+ {['run','memory','plan','tools','trace','eval'].map((x, i) => (
278
+ <div key={x} className={i === 2 ? 'nt-glow' : 'nt-muted'} style={{ padding: '6px 10px', background: i===2 ? 'rgba(74,222,128,0.08)' : 'transparent', fontSize: 16 }}>{i===2 ? '▸ ':' '}{x}</div>
279
+ ))}
280
+ <div style={{ marginTop: 'auto' }} className="nt-muted">── status ──</div>
281
+ <div className="nt-glow" style={{ fontSize: 14 }}>● running 00:14:22</div>
282
+ </div>
283
+ <div style={{ padding: 20 }}>
284
+ <div className="nt-muted" style={{ fontSize: 14 }}>── PLAN · v3 ────────────────────────────</div>
285
+ {[['done','Read eval spec'],['done','Generate 12 candidate prompts'],['done','Score each against rubric'],['··','Select top-3 by F1'],['··','Iterate with reasoning trace'],['··','Submit batch to coordinator']].map(([st,t],i) => (
286
+ <div key={i} style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--color-border)' }}>
287
+ <span style={{ minWidth: 20 }} className="nt-muted">{String(i+1).padStart(2,'0')}</span>
288
+ <span style={{ flex: 1, fontSize: 16 }}>{t}</span>
289
+ <span className={st === 'done' ? 'nt-glow' : 'nt-glow-amber'} style={{ minWidth: 60, textAlign: 'right' }}>[{st}]</span>
290
+ </div>
291
+ ))}
292
+ </div>
293
+ <div style={{ padding: 16, borderLeft: '1px solid var(--color-border)' }}>
294
+ <div className="nt-muted" style={{ fontSize: 14, marginBottom: 12 }}>── MEMORY ──</div>
295
+ <pre style={{ fontSize: 14, margin: 0, lineHeight: 1.7, color: 'var(--color-muted)' }}>{
296
+ `t=00:02 ✓ snap_001
297
+ t=00:05 ✓ snap_002
298
+ t=00:09 ✓ snap_003`
299
+ }</pre>
300
+ <pre className="nt-glow" style={{ fontSize: 14, margin: 0, lineHeight: 1.7 }}>{`t=00:14 ● snap_004`}</pre>
301
+ </div>
302
+ </div>
303
+ </Step>
304
+ </div>
305
+ </Term>
306
+ <Counter />
307
+ </Sprite>;
308
+ }
309
+
310
+ // ── Scene 9 — Content ───────────────────────────────────────────────
311
+ function S9() {
312
+ return <Sprite start={SCENE*8} end={SCENE*9}>
313
+ <Term title="beacon@console:~$ cat ./manifesto.txt" status="[ memo ]">
314
+ <div style={{ fontSize: 22, maxWidth: 1500 }}>
315
+ <div className="nt-muted">$ <Type text="cat ./manifesto.txt" at={0} cps={30} /></div>
316
+ <Step at={1.0} style={{ marginTop: 36 }}>
317
+ <div className="nt-h1" style={{ fontSize: 72, marginBottom: 32 }}>// what we believe</div>
318
+ </Step>
319
+ <Step at={1.4}>
320
+ <div style={{ fontSize: 24, lineHeight: 1.6, marginBottom: 24 }}>
321
+ <span className="nt-glow">&gt; </span>The next decade of AI infrastructure will be built around <span className="nt-glow">long</span> runs — agents that work for hours, not seconds.
322
+ </div>
323
+ <div className="nt-muted" style={{ fontSize: 22, lineHeight: 1.6 }}>
324
+ The bottleneck won't be the model. It will be everything around the model: memory, recovery, observability. The unglamorous parts. The parts we are building.
325
+ </div>
326
+ </Step>
327
+ <Step at={2.0} style={{ marginTop: 32 }}>
328
+ <div className="nt-muted">── beacon team · 2026.05</div>
329
+ </Step>
330
+ </div>
331
+ </Term>
332
+ <Counter />
333
+ </Sprite>;
334
+ }
335
+
336
+ // ── Scene 10 — CTA ──────────────────────────────────────────────────
337
+ function S10() {
338
+ return <Sprite start={SCENE*9} end={SCENE*10}>
339
+ <Term title="beacon@console:~$ install" status="[ ready ]">
340
+ <div style={{ fontSize: 22 }}>
341
+ <div className="nt-muted">$ <Type text="curl -sSL beacon.run/install | sh" at={0} cps={28} cursor /></div>
342
+ <Step at={1.6} style={{ marginTop: 56 }}>
343
+ <div className="nt-h1 nt-glow" style={{ fontSize: 160, lineHeight: 1.0 }}>$ install beacon</div>
344
+ </Step>
345
+ <Step at={2.2} style={{ marginTop: 36, fontSize: 24 }}>
346
+ <div className="nt-muted">→ beacon.run · docs · github.com/beacon-ai</div>
347
+ </Step>
348
+ <Step at={2.6} style={{ marginTop: 60, display: 'flex', alignItems: 'center', gap: 12 }}>
349
+ <div style={{ width: 22, height: 22, border: '1.5px solid var(--color-fg)', position: 'relative' }}>
350
+ <div style={{ position: 'absolute', inset: 5, background: 'var(--color-accent)', boxShadow: '0 0 12px rgba(74,222,128,0.7)' }} />
351
+ </div>
352
+ <span className="nt-muted" style={{ fontSize: 14, letterSpacing: '0.2em', textTransform: 'uppercase' }}>BEACON · 2026</span>
353
+ </Step>
354
+ </div>
355
+ </Term>
356
+ <Counter />
357
+ </Sprite>;
358
+ }
359
+
360
+ // Lower-third demo within scene 9
361
+ function LT() {
362
+ const start = SCENE*8 + 1.0, end = SCENE*8 + 3.5;
363
+ return <Sprite start={start} end={end}>
364
+ {({ localTime, duration }) => {
365
+ const op = clamp(localTime/0.3, 0, 1) * clamp((duration-localTime)/0.3, 0, 1);
366
+ return <div style={{ position: 'absolute', left: 160, right: 160, bottom: 140, opacity: op, fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--color-muted)', borderTop: '1px solid var(--color-border)', paddingTop: 10 }}>
367
+ [ ▸ narration · 00:24 · lower-third ]
368
+ </div>;
369
+ }}
370
+ </Sprite>;
371
+ }
372
+
373
+ function App() {
374
+ return (
375
+ <Stage width={1920} height={1080} duration={SCENE*10} background="var(--color-bg)" persistKey="neon-terminal-ref">
376
+ <div className="nt-canvas">
377
+ <S1 /><S2 /><S3 /><S4 /><S5 /><S6 /><S7 /><S8 /><S9 /><LT /><S10 />
378
+ </div>
379
+ </Stage>
380
+ );
381
+ }
382
+
383
+ ReactDOM.createRoot(document.getElementById('root')).render(<App />);
384
+ </script>
385
+
386
+ </body>
387
+ </html>
package/skill/assets/styles/neon-terminal/sample/bullet.ts ADDED
@@ -0,0 +1,113 @@
1
+ import { defineSegment } from "videowright";
2
+
3
+ let host: HTMLElement | null = null;
4
+
5
+ export default defineSegment({
6
+ id: "neon-terminal-sample-bullet",
7
+ advances: [2.5, 5.0],
8
+ voiceover:
9
+ "Bullet reveals in Neon Terminal. Numbered rows with status badges, each appearing in a stepped stagger.",
10
+
11
+ mount(el) {
12
+ host = el;
13
+
14
+ const items = [
15
+ { n: "01", text: "Context windows decay.", status: "OK" },
16
+ { n: "02", text: "Tool selection drifts.", status: "OK" },
17
+ { n: "03", text: "Plans go stale.", status: "··" },
18
+ { n: "04", text: "Errors compound.", status: "··" },
19
+ { n: "05", text: "Recovery requires restart.", status: "!!" },
20
+ ];
21
+
22
+ const rows = items
23
+ .map(
24
+ (item, i) => `
25
+ <div data-ref="row${i}" style="
26
+ display: flex; align-items: center; gap: 24px;
27
+ padding: 14px 0;
28
+ border-bottom: 1px solid var(--color-border);
29
+ opacity: 0;
30
+ ">
31
+ <span style="color: var(--color-accent); text-shadow: var(--glow); min-width: 40px;">[${item.n}]</span>
32
+ <span style="flex: 1; font-size: 28px;">${item.text}</span>
33
+ <span style="
34
+ min-width: 60px; text-align: right;
35
+ ${item.status === "OK" ? "color: var(--color-accent); text-shadow: var(--glow);" : item.status === "!!" ? "color: var(--amber); text-shadow: 0 0 12px rgba(245,158,11,0.45);" : "color: var(--color-muted);"}
36
+ ">[${item.status}]</span>
37
+ </div>`,
38
+ )
39
+ .join("");
40
+
41
+ el.innerHTML = `
42
+ <div style="
43
+ position: relative;
44
+ height: 100%;
45
+ background: var(--color-bg);
46
+ color: var(--color-fg);
47
+ font-family: var(--font-mono);
48
+ overflow: hidden;
49
+ ">
50
+ <div style="
51
+ position: absolute; inset: 0; pointer-events: none;
52
+ background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
53
+ "></div>
54
+
55
+ <div style="
56
+ position: absolute;
57
+ inset: var(--safe-y) var(--safe-x);
58
+ border: 1px solid var(--color-border);
59
+ background: rgba(10,14,11,0.6);
60
+ ">
61
+ <div style="
62
+ display: flex; align-items: center;
63
+ padding: 14px 20px;
64
+ border-bottom: 1px solid var(--color-border);
65
+ gap: 12px; font-size: 14px; color: var(--color-muted);
66
+ ">
67
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
68
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
69
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
70
+ <span style="margin-left: 16px;">beacon@console:~$ failures --list</span>
71
+ <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ 5 findings ]</span>
72
+ </div>
73
+
74
+ <div style="padding: 48px 56px; overflow: hidden;">
75
+ <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
76
+ $ failures list --top=5
77
+ </div>
78
+ <div style="margin-top: 36px;">
79
+ ${rows}
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </div>
84
+ `;
85
+ },
86
+
87
+ async play(ctx) {
88
+ const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
89
+
90
+ const ease = "steps(8, end)";
91
+ const opts = { fill: "forwards" as const, easing: ease };
92
+
93
+ prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
94
+ ...opts,
95
+ duration: 250,
96
+ });
97
+
98
+ for (let i = 0; i < 5; i++) {
99
+ const row = host?.querySelector(`[data-ref="row${i}"]`) as HTMLElement;
100
+ row.animate([{ opacity: 0 }, { opacity: 1 }], {
101
+ ...opts,
102
+ duration: 200,
103
+ delay: 400 + i * 160,
104
+ });
105
+ }
106
+
107
+ await ctx.waitForNext();
108
+ },
109
+
110
+ unmount() {
111
+ host = null;
112
+ },
113
+ });
package/skill/assets/styles/neon-terminal/sample/content.ts ADDED
@@ -0,0 +1,117 @@
1
+ import { defineSegment } from "videowright";
2
+
3
+ let host: HTMLElement | null = null;
4
+
5
+ export default defineSegment({
6
+ id: "neon-terminal-sample-content",
7
+ advances: [2.5, 5.0],
8
+ voiceover:
9
+ "Content cards in Neon Terminal. A manifesto-style block of text with quote prefixes, typed in with stepped reveals.",
10
+
11
+ mount(el) {
12
+ host = el;
13
+ el.innerHTML = `
14
+ <div style="
15
+ position: relative;
16
+ height: 100%;
17
+ background: var(--color-bg);
18
+ color: var(--color-fg);
19
+ font-family: var(--font-mono);
20
+ overflow: hidden;
21
+ ">
22
+ <div style="
23
+ position: absolute; inset: 0; pointer-events: none;
24
+ background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(74, 222, 128, 0.04) 3px 4px);
25
+ "></div>
26
+
27
+ <div style="
28
+ position: absolute;
29
+ inset: var(--safe-y) var(--safe-x);
30
+ border: 1px solid var(--color-border);
31
+ background: rgba(10,14,11,0.6);
32
+ ">
33
+ <div style="
34
+ display: flex; align-items: center;
35
+ padding: 14px 20px;
36
+ border-bottom: 1px solid var(--color-border);
37
+ gap: 12px; font-size: 14px; color: var(--color-muted);
38
+ ">
39
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
40
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
41
+ <span style="width: 10px; height: 10px; border-radius: 5px; background: var(--color-border);"></span>
42
+ <span style="margin-left: 16px;">beacon@console:~$ cat ./manifesto.txt</span>
43
+ <span style="margin-left: auto; color: var(--color-accent); text-shadow: var(--glow);">[ memo ]</span>
44
+ </div>
45
+
46
+ <div style="padding: 48px 56px; overflow: hidden; max-width: 1500px;">
47
+ <div data-ref="prompt" style="font-size: 22px; color: var(--color-muted); opacity: 0;">
48
+ $ cat ./manifesto.txt
49
+ </div>
50
+
51
+ <div data-ref="heading" style="font-size: 72px; font-weight: 500; margin-top: 36px; margin-bottom: 32px; opacity: 0;">
52
+ // what we believe
53
+ </div>
54
+
55
+ <div data-ref="quote" style="font-size: 24px; line-height: 1.6; margin-bottom: 24px; opacity: 0;">
56
+ <span style="color: var(--color-accent); text-shadow: var(--glow);">&gt; </span>The next decade of AI infrastructure will be built around <span style="color: var(--color-accent); text-shadow: var(--glow);">long</span> runs — agents that work for hours, not seconds.
57
+ </div>
58
+
59
+ <div data-ref="body" style="font-size: 22px; line-height: 1.6; color: var(--color-muted); opacity: 0;">
60
+ The bottleneck won't be the model. It will be everything around the model: memory, recovery, observability. The unglamorous parts. The parts we are building.
61
+ </div>
62
+
63
+ <div data-ref="sig" style="font-size: 22px; color: var(--color-muted); margin-top: 32px; opacity: 0;">
64
+ ── beacon team · 2026.05
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ `;
70
+ },
71
+
72
+ async play(ctx) {
73
+ const prompt = host?.querySelector('[data-ref="prompt"]') as HTMLElement;
74
+ const heading = host?.querySelector('[data-ref="heading"]') as HTMLElement;
75
+ const quote = host?.querySelector('[data-ref="quote"]') as HTMLElement;
76
+ const body = host?.querySelector('[data-ref="body"]') as HTMLElement;
77
+ const sig = host?.querySelector('[data-ref="sig"]') as HTMLElement;
78
+
79
+ const ease = "steps(8, end)";
80
+ const opts = { fill: "forwards" as const, easing: ease };
81
+
82
+ prompt.animate([{ opacity: 0 }, { opacity: 1 }], {
83
+ ...opts,
84
+ duration: 250,
85
+ });
86
+
87
+ heading.animate([{ opacity: 0 }, { opacity: 1 }], {
88
+ ...opts,
89
+ duration: 250,
90
+ delay: 400,
91
+ });
92
+
93
+ quote.animate([{ opacity: 0 }, { opacity: 1 }], {
94
+ ...opts,
95
+ duration: 250,
96
+ delay: 700,
97
+ });
98
+
99
+ body.animate([{ opacity: 0 }, { opacity: 1 }], {
100
+ ...opts,
101
+ duration: 250,
102
+ delay: 1000,
103
+ });
104
+
105
+ sig.animate([{ opacity: 0 }, { opacity: 1 }], {
106
+ ...opts,
107
+ duration: 250,
108
+ delay: 1300,
109
+ });
110
+
111
+ await ctx.waitForNext();
112
+ },
113
+
114
+ unmount() {
115
+ host = null;
116
+ },
117
+ });